كيفية تنفيذ تأثير الرسوم المتحركة لانعكاس صورة العنصر على القماش

يمكنك النقر هنا: صورة قماشية عرض توضيحي للرسوم المتحركة بمرآة أفقية

يظهر تأثير الرسوم المتحركة للنقر على الصورة في الصفحة التجريبية.

من السهل نسبيًا تحقيق تأثير التقليب للعناصر في CSS، على سبيل المثال، إذا أردنا قلب صورة معينة أفقيًا، فنحن نحتاج فقط إلى سطر واحد من CSS:

 img {تحويل: مقياس X (-1)؛}

أو:

 img { تحويل: مقياس (-1، 1)؛}

ولكن في اللوحة القماشية، فإن المشكلة ليست في عدم إمكانية قلبها، بل في تحديد موضع نظام الإحداثيات.

في Canvas، يمكن للكود التالي تحقيق انعكاس أفقي للموارد (بافتراض أن السياق هو السياق ثنائي الأبعاد لـ Canvas):

 context.scale(-1, 1);

أو استخدم setTransform API لتحويل المصفوفة المباشر:

 context.setTransform(-1, 0, 0, 1, 0, 0);

ومع ذلك، على الرغم من تنفيذ عملية التقليب، إلا أن هناك مشكلة كبيرة في تحديد موضع العناصر في Canvas. وذلك لأن نظام التحويل الإحداثي في ​​Canvas يختلف عن نظام CSS. لذلك، إذا أردنا تحقيق تأثير قلب مركزي، فنحن بحاجة إلى نقل النقطة المركزية للعنصر المستهدف إلى محور التحويل قبل التقليب.

خذ مسافة الوجه الأفقية، وقم بترجمة الإزاحة الأفقية بعد تحويل الإزاحة قبل القياس، وبعد ذلك يمكنك رؤية تأثير توسيط الوجه دائمًا.

اللغة شاحبة، لذلك دعونا نلتقط صورة للتوضيح.

نظام إحداثيات التغيير الافتراضي للقماش هو الزاوية اليسرى العليا.

لذلك، إذا كان المقياس الأفقي هو 1، 0.5، 0، -0.5، -1، يكون الموضع النهائي كما هو موضح أدناه:

حتى نتمكن من الحصول على صيغة المسافة الأفقية التي ينبغي تعويضها:

distance = (canvas.width – image.width * scale) / 2;

لذلك، يصبح رمز المفتاح النهائي لنسخ الصور ورسمها هكذا (على افتراض أن حجم القياس الأفقي هو الحجم):

 // تنسيق تعديل المرجع context.translate((canvas.width - image.width *scale) / 2, 0);context.scale(scale, 1);context.drawImage(image, 0, 0);//تنسيق المرجع استعادة السياق.setTransform(1, 0, 0, 1, 0, 0);

كيفية إضافة تأثير الرسوم المتحركة؟

يمكننا استخدام Tween.js، https://github.com/zhangxinxu/tween

هناك العديد من خوارزميات التخفيف بمساعدة طريقة Math.animation() المريحة، يمكننا بسهولة تحقيق التأثير الذي نريده!

 Math.animation(form, to, term, easing, callback);

الرسوم المتحركة JS هي كما يلي:

 var Canvas = document.querySelector('canvas');var context = Canvas.getContext('2d');//Animation Math.animation(1, -1, 600, 'Quad.easeInOut'، الوظيفة (القيمة، isEnding ) { // امسح محتوى اللوحة القماشية context.clearRect(0, 0, Canvas.width, Canvas.height); ضبط الإحداثيات context.translate((canvas.width - Canvas.width * value) / 2, 0); // ضبط القياس context.scale(value, 1); // ارسم الصورة الحالية context.drawImage(eleImg, 0, 0); // استعادة مرجع الإحداثيات context.setTransform(1, 0, 0, 1, 0, 0);});

مقال بارد آخر لا يوجد الكثير من مستخدمي الواجهة الأمامية للقماش، وجمهوره ليس شائعًا مثل التكنولوجيا الشائعة. ومع ذلك، كما يقول المثل القديم، لا يوجد عمل جيد أصغر من أن يتم إهماله، وآمل أن يتمكن بعض الأصدقاء من تقديم المساعدة عندما يبحثون عن القضايا ذات الصلة في المستقبل.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.