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