قارن خيارات الرسوم المتحركة على الويب

الرسوم المتحركة موضوع رائع. سواء كنت ترغب في إضافة رسوم متحركة تفاعلية مثل الانتقالات ، أو إنشاء تجربة ملء الشاشة بالكامل ، فلديك كل الأدوات التي تحتاجها

الرسوم المتحركة موضوع رائع. سواء كنت ترغب في إضافة رسوم متحركة تفاعلية مثل الانتقالات ، أو إنشاء تجربة ملء الشاشة بالكامل ، فلديك كل الأدوات التي تحتاجها.

ولديك عدد غير قليل من الخيارات ، وكلها مختلفة تمامًا وتخدم أغراضًا مختلفة.

CSSمن المعروف بشكل عام أنه أكثر كفاءة ، على الرغم من أن JavaScript يمكن أن يكون أيضًا فعالاً للغاية. كل هذا يتوقف على ما عليك القيام به ، ومقدار الوقت الذي يستغرقه كل إطار لعرضه.

دعنا نرى نظرة عامة على هذه الخيارات لمعرفة الخيار الصحيح.

انتقالات CSS

انتقالات CSSلها بداية ونهاية. ينتقلون نقطة واحدة من X إلى Y ، أو من المرئي إلى غير المرئي.

إنها أبسط الرسوم المتحركة ، وتستخدم في الغالب للرسوم المتحركة الدقيقة التي تتكامل جيدًا مع بقية الصفحة.

مع التحولات ، يمكنك الانتقال من حالة إلى أخرى ، لكن لا يمكنك الحصول على المزيد.

الرسوم المتحركة CSS

الرسوم المتحركة CSSبالمقارنة مع انتقالات CSS تسمح لك بالحصول على أكثر من حالتين فقط ، في الواقع يمكنك الحصول على الكثير منها ، ويمكن استخدامها لإنشاء رسوم متحركة أكثر تعقيدًا.

يوصى باستخدام رسوم CSS المتحركة عندما تحتاج إلى رسوم متحركة بسيطة نسبيًا لا يمكن القيام بها مع التحولات.

صور SVG المتحركة

SVGهو تنسيق رائع يعتمد على المتجهات يسمح بإنشاء رسوم متحركة باستخدام SMIL ، تنسيق SVG للرسوم المتحركة "الأصلي".

كان SMIL على وشك أن يتم إهماله في Chrome ، لكن الفريق عكس هذا القرار في الوقت الحالي بسبب المقاومة ، على الرغم من أن SMIL لديها تناقضات عبر المتصفح (ولا يدعمها IE / Edge).

إنهم يريدون دفع CSS Animations وواجهة برمجة تطبيقات Web Animations بدلاً من SMIL.

Canvas API الرسوم المتحركة

القماش APIيوفر طريقة للرسم على الشاشة باستخدام خطوط المسح بدلاً من المتجهات.

الرسوم المتحركة ممكنة على الرغم من أنها ليست ذات أداء جيد

واجهة برمجة تطبيقات الويب للرسوم المتحركة

واجهة برمجة تطبيقات Web Animations هي مستقبل الرسوم المتحركة على الويب. يهدف إلى تحقيق أداء الرسوم المتحركة CSS مع القدرة على استخدام JavaScript لإنشاء رسوم متحركة أطول بسهولة.

إنه يعمل حاليًا فقط في Chrome و Firefox. لا تزال Safari و IE و Edge تفكر في ذلك ، لكنيوجد بوليفيللجعلها تعمل عبر جميع المتصفحات.

WebGL

يتيح لك WebGL إنشاء رسوم متحركة ثلاثية الأبعاد ، وهو أكثر ملاءمة لتجارب الرسوم المتحركة بملء الشاشة والواقع الافتراضي ، على الرغم من كونها أكثر تعقيدًا.


بالإضافة إلى واجهات برمجة التطبيقات الأصلية ، توجد مكتبات رائعة تُلخص لك معظم التفاصيل: