توفّر Web Animations API عناصر أساسية فعّالة لوصف الرسوم المتحرّكة الإلزامية من JavaScript، ولكن ما المقصود بذلك؟ اطّلِع على الموارد المتاحة لك، بما في ذلك العروض التوضيحية وcodelabs من Google.
الخلفية
توفّر واجهة برمجة التطبيقات في الأساس طريقة Element.animate().
لنلقِ نظرة على مثال يغيّر لون الخلفية من الأحمر إلى الأخضر بشكل متحرك:
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
تتوفّر هذه الطريقة في جميع المتصفحات الحديثة، مع بديل رائع للعناصر القابلة للاستبدال (مزيد من المعلومات حول ذلك لاحقًا). أصبح التوافق الأصلي مع هذه الطريقة وعنصر المشغّل متاحًا على نطاق واسع كجزء من Chrome 39. وتتوفّر أيضًا بشكل تلقائي في Opera، وهي قيد التطوير النشط في Firefox. هذه دالة أساسية فعّالة تستحق أن تُدرَج في مجموعة الأدوات الخاصة بك.
Codelabs
تتوفّر مجموعة متزايدة من الدروس التطبيقية حول الترميز لواجهة برمجة التطبيقات Web Animations API. هذه أدلة ذاتية السرعة توضّح مفاهيم مختلفة في واجهة برمجة التطبيقات. في معظم هذه الدورات التدريبية على رموز البرامج، ستأخذ محتوى ثابتًا وتُحسِّنه باستخدام تأثيرات الصور المتحركة.
إنّ هذه الدروس التطبيقية حول الترميز والروابط أو المراجع ذات الصلة هي أفضل مكان للبدء إذا كنت تريد فهم العناصر الأساسية الجديدة المتاحة لك في Web Animations. للحصول على فكرة عن التأثيرات التي يمكنك إنشاؤها، يمكنك الاطّلاع على تأثير الظهور المستوحى من Android:
إذا كنت قد بدأت للتو، إليك بعض الاقتراحات.
عروض توضيحية
للحصول على أفكار جديدة، يمكنك الاطّلاع على العروض التوضيحية للرسوم المتحرّكة على الويب المستوحاة من Material Design، والتي تتوفّر مع المصدر المستضاف على GitHub. تعرض هذه العروض مجموعة متنوعة من التأثيرات الرائعة، ويمكنك عرض الرمز المصدر لكل عرض توضيحي مضمّنًا.
تتضمّن العروض التوضيحية مجرة ملونة تدور أو كوكب الأرض يدور أو حتى مجموعة متنوعة من التأثيرات على عنصر عادي قديم.
Polyfill
لضمان توافق ممتاز مع جميع المتصفحات الحديثة، يمكنك استخدام مكتبة polyfill. تتوفّر واجهة برمجة التطبيقات Web Animations API مع polyfill متاح حاليًا يمكن استخدامه مع جميع المتصفّحات الحديثة، بما في ذلك Internet Explorer وFirefox وSafari.
إذا كنت جريئًا، يمكنك استخدام حزمة web-animations-next polyfill التي تتضمّن أيضًا ميزات لم يتم الانتهاء منها بعد، مثل عنصرَي الإنشاء GroupEffect وSequenceEffect القابلَين للتركيب.
للاطّلاع على مقارنة بين أسلوبَي الملء، يُرجى الانتقال إلى الصفحة الرئيسية.
لاستخدام أيّ من polyfill في رمزك البرمجي، تتوفّر لك بعض الخيارات.
استخدِم شبكة توصيل المحتوى (CDN)، مثل cdnjs أو jsDelivr، أو استهدِف إصدارًا معيّنًا من خلال rawgit.com.
التثبيت من خلال NPM أو Bower
$ npm install web-animations-js $ bower install web-animations-js ```
في جميع الحالات، يمكنك ببساطة تضمين الpolyfill في علامة نص برمجي قبل أي رمز برمجي آخر:
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
مراجع أخرى
إذا أردت قراءة مقدّمة أكثر تقنية، يُرجى الاطّلاع على مواصفات W3C.
كتب "دان ويلسون" أيضًا مجموعة رائعة من المشاركات حول رسومات الويب المتحركة، بما في ذلك كيفية استخدامها إلى جانب خاصية motion-path الجديدة في CSS.
للحصول على بعض العيّنات التي تستخدم motion-path، يمكنك الاطّلاع على مستند Eric Willigers.