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