تقدم هذه المقالة بشكل أساسي برنامجًا تعليميًا حول استخدام قماش في HTML5 لرسم حركة الجسيمات باستخدام الصيغ ، ويتطلب رمز JavaScript كصيغة. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها
أرغب مؤخرًا في إنشاء صفحة ويب ووضع بعض العروض التوضيحية التي قمت بها في عملية تعلم HTML5 لصنع مجموعات. ومع ذلك ، إذا قمت فقط بإنشاء صفحة ويب وترتيب جميع العروض التوضيحية واحدًا تلو الآخر ، فستشعر بأنها قبيحة للغاية. لقد فكرت فقط ، منذ أن تعلمت قماشًا ، دعنا نتعبث مع المتصفح ونجعل الرسوم المتحركة الصغيرة الافتتاحية.
فكرت في تأثير الرسوم المتحركة الافتتاحية لفترة من الوقت وقررت استخدام الجزيئات لأنني اعتقدت أن الجسيمات كانت أكثر متعة. ما زلت أتذكر أول منشور مدونة فني كتبته من قبل ، والذي كان حول صور نصية تشبه الجسيمات: صور نصية تشبه الجسيمات ، ثم قمت بحركة خطية فقط ، وأضفت القليل من التأثير ثلاثي الأبعاد. صيغة الحركة بسيطة. لذلك أريد فقط أن أجعل هذه الرسوم المتحركة الافتتاحية أكثر ديناميكية.
انتقل إلى العرض التوضيحي أولاً: http://2.axescanvas.sinaapp.com/demohome/index.html
هل التأثير أكثر ديناميكية من حركة الخط المستقيم؟ وهو في الواقع بسيط للغاية. لا تنس عنوان منشور المدونة هذا ، والصيغة الصغيرة ، والمرح العظيم. لتحقيق مثل هذا التأثير ، نستخدم فقط المدرسة الثانوية. . أو المعرفة الفيزيائية في المدرسة الثانوية ، صيغة التسريع للحركة والحركة المتباينة. لذلك هي في الواقع صيغة صغيرة. يحب الملصق العبث ببعض الأشياء الرائعة. على الرغم من أنه قد لا يكون مفيدًا في العمل ، إلا أن هذه المتعة رائعة حقًا. علاوة على ذلك ، فإن القيام بذلك يمكن أن يعزز قدرة تفكير البرمجة الخاصة بك.
بدون مزيد من اللغط ، سأذهب إلى الموضوع. فقط شرح المبدأ باختصار ~~~
الكود الأساسي لحركة الجسيمات هو هذا فقط:
XML/HTML رمز نسخ المحتوى إلى الحافظة