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