موارد الصور المتحركة على الويب

Sam Thorogood

توفّر 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. تتوفّر حزمة polyfill لواجهة برمجة التطبيقات Web Animations API الآن، ما يتيح استخدامها في جميع المتصفّحات الحديثة، بما في ذلك Internet Explorer وFirefox وSafari.

إذا كنت جريئًا، يمكنك استخدام حزمة web-animations-next polyfill التي تتضمّن أيضًا ميزات لم تكتمل بعد، مثل عنصرَي الإنشاء GroupEffect وSequenceEffect القابلَين للتركيب. للاطّلاع على مقارنة بين أسلوبَي الملء، يُرجى الانتقال إلى الصفحة الرئيسية.

لاستخدام أيّ من polyfill في رمزك البرمجي، تتوفّر لك بعض الخيارات.

  1. استخدِم شبكة توصيل المحتوى (CDN)، مثل cdnjs أو jsDelivr، أو استهدِف إصدارًا معيّنًا من خلال rawgit.com.

  2. التثبيت من خلال 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.