كيفية تحقيق مثال مخصص للرسوم المتحركة في القماش

في المشروع الأخير ، أحتاج إلى تقديم طلب جديد: تحقيق الرسوم المتحركة المخصصة للمسار في قماش. لا يتضمن المسار المخصص SO هنا خطًا مستقيمًا فقط ، وربما مجموعات حركة مستقيمة متعددة ، وحتى تشمل منحنى Bessel.

فكيف يمكننا تحقيق تأثير الرسوم المتحركة هذا في قماش؟ في الواقع ، الأمر بسيط للغاية.

قبل صنع الرسوم المتحركة ، يجب أن نحصل على مسار الرسوم المتحركة أولاً. فقط استخدم SVG API ، لذلك لا يحتاج إلى إدراجها في الصفحة)

 const path = 'm0،33.90861 25.90861،16 48،16 C70.09139،16 88،33.90861 88،56 C88،78.09139 105.90861 128،92 C150.09139 160،72 160،56 C108،24 96،40 96،56 C96،72 105.90861،92 128،92 C154،93 168،78 168،56 C168،33.90861 185.90861،16 208،16 C230.09139،16 248،33.90861 230.09139،96 208،96 L48،96 C25.90861،96 8،78.09139 8،56 z '؛ pathelement.setattributens (null ، 'd' ، path) ؛

واجهات برمجة التطبيقات التي توفرها SVGPathElement أمران بالغ الأهمية.

يمكن أن تحصل طريقة GetTotallength على الطول الإجمالي لـ SVGPathElement

يتم تمرير طريقة GetPointTlength إلى طول X ، والتي ستعود الإحداثيات النهائية لطول نقطة انطلاق SVGPathElement.

استخدم هذين واجهات برمجة التطبيقات لتحديث إحداثيات الرسومات المستمرة في قماش من خلال دورة ، ويمكن تحقيق الرسوم المتحركة للمسار:

 const = pathelement.gettallenge () 0 ؛ Move (x ، y) ؛ ، canvas) ؛ Closepath () ؛}

أخيرًا ، نقوم بتغليفها لتحقيق وظيفة بسيطة تدرك الرسوم المتحركة المخصصة في القماش:

 وظيفة custmepath (المسار ، func) مدة const = 1000 ؛ خطوة) .x) ؛ 'M0 ، 0 C8،33.9961 25.90861،16 48،16 C70.09139،16 88،33.90861 88،56 C88،78.09139 105.90862 128،92 C150.09139،72 160،56 96،40 96،56 C96،72 105.90861،92 128،92 C154،93 168،78 168،56 96 208،96 L48،96 C25.90861،96 8،78.09139 8،56 Z '؛ {context.clearrect (0 ، 0 ، canvas.width ، canvas.height) ؛

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

على الرغم من أنهم ليسوا في نطاق مناقشة هذه المقالة ، إلا أنه ينبغي أن يكونوا يستحقون التفكير.

ما سبق هو كل محتويات هذا المقال.