كيف تضع الرسوم المتحركة على الصورة؟

كيف تضع الرسوم المتحركة على الصورة؟. الرسوم المتحركة بالصور (جافا سكريبت)

لإنشاء رسم متحرك مثل هذا ، يجب عليك أولاً إنشاء سلسلة من الصور. بعد ذلك ، لتحريك هذه الصور ، يجب عليك تنزيل هذه الصور في مصفوفة.
أولاً ، دعنا نحدد متغيرات التأخير وعدد الإطارات وعلم الإطار الحالي:
تأخير = 100 ؛ <- التأخير بين الصور (.1 ثانية) imgNumber = 0 ؛ <- إجمالي مؤشر الصورة الحالي = 8 ؛ <- عدد إطارات الرسوم المتحركة = new Array () ؛ <- مجموعة الصور Secondo ، لنقم بتنزيل جميع الصور في المصفوفة. لـ (i = 0؛ i wave "+ (i + 1) + '.gif'؛} ثالثًا ، نحتاج إلى إنشاء وظيفتين ؛ واحدة لمبادلة الصور والأخرى للتحكم في التأخير:
وظيفة Switch () document.waveanim.src = anim[imgNumber].src؛ imgNumber ++ ؛ if (imgNumber> = totalimgNumber) imgNumber = 0 ؛
في علامة IMG ، يجب عليك تضمين NAME = “waveanim”.
وظيفة animate () Switch () ؛ setTimeout (“animate ()” ، تأخير) ؛ هذه الوظيفة تستدعي فقط يُحوّل وينتظر لوقت محدد (تأخير) قبل الاتصال يُحوّل حبر مرة واحدة.

لتغيير سرعة الحركة ، فقط قم بتغيير متغير التأخير: function fast () {delay- = 10؛ <- تقليل التأخير بمقدار .1 ثانية إذا (تأخير وظيفة التأخير () تأخير + = 10 ؛ <- زيادة التأخير بمقدار .1 ثانية إذا كان (تأخير> 4000) تأخير = 4000 ؛ أخيرًا ، لبدء الرسم المتحرك ، يجب أن يكون نفذ animate () بمجرد تحميل الصفحة: onLoad = “animate ()”؛

هل كان المقال مفيداً؟شاركه مع أصدقائك ولا تنسى لايك والتعليق