توفّر Web Animations API عناصر أساسية فعّالة لوصف الصور المتحركة الإلزامية من JavaScript، ولكن ما المقصود بذلك؟ يمكنك الاطّلاع على المراجع المتاحة لك، بما في ذلك العروض التوضيحية وcodelabs من Google.
الخلفية
توفّر واجهة برمجة التطبيقات في الأساس طريقة Element.animate().
ولنأخذ مثالاً على ذلك الذي يحرّك لون الخلفية من الأحمر إلى الأخضر
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
تتوافق هذه الطريقة مع جميع المتصفحات الحديثة، مع استخدام عنصر polyfill الاحتياطي رائع (سنتناول المزيد من التفاصيل لاحقًا). وأصبح التوافق المحلي لهذه الطريقة، وكائن المشغِّل الخاص بها، متاحًا على نطاق واسع في إطار إصدار Chrome 39. تتوفّر هذه الميزة أيضًا بشكل تلقائي في متصفّح Opera، وهي قيد التطوير النشط في Firefox. هذا أمر أساسي قوي ويستحق مكانًا في صندوق أدواتك.
Codelabs
تتوفّر مجموعة متزايدة من الدروس التطبيقية حول الترميز لواجهة برمجة التطبيقات Web Animations API. وهي عبارة عن أدلة ذاتية التقدّم توضح مفاهيم مختلفة في واجهة برمجة التطبيقات. في معظم هذه الدروس التطبيقية حول الترميز، عليك استخدام محتوى ثابت وتحسينه باستخدام تأثيرات الصور المتحركة.
إنّ هذه الدروس التطبيقية حول الترميز والروابط أو المراجع ذات الصلة هي أفضل مكان للبدء إذا كنت تريد فهم العناصر الأساسية الجديدة المتاحة لك في Web Animations. للحصول على فكرة عن التأثيرات التي يمكنك إنشاؤها، يمكنك الاطّلاع على تأثير الظهور المستوحى من Android:
إذا كنت قد بدأت للتو، إليك بعض الاقتراحات.
إصدارات تجريبية
للحصول على أفكار جديدة، يمكنك الاطّلاع على العروض التوضيحية للرسوم المتحرّكة على الويب المستوحاة من Material Design، والتي تتوفّر مع المصدر المستضاف على GitHub. تعرض هذه العروض مجموعة متنوعة من التأثيرات الرائعة، ويمكنك عرض الرمز المصدر لكل عرض توضيحي مضمّنًا.
وتتضمّن هذه العروض مجرة دوّارة ملوّنة أو أرض تدور أو حتى مجموعة متنوعة من التأثيرات على عنصر قديم بسيط.
حشو بوليستر
لضمان توافق ممتاز مع جميع المتصفحات الحديثة، يمكنك استخدام مكتبة polyfill. تتوفّر حزمة polyfill لواجهة برمجة التطبيقات Web Animations API الآن، ما يتيح استخدامها في جميع المتصفّحات الحديثة، بما في ذلك 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.