Anime.js - مكتبة الرسوم المتحركة JavaScript خفيفة

الرسوم المتحركة على شبكة الإنترنت قد قطع شوطا طويلا. لا يمكن للمطورين إنشاء أي رسوم متحركة باستخدام مجموعة من CSS / SVG / JS ، ولكن هناك أيضًا العشرات من المكتبات المجانية لتوفير الوقت في هذه العملية.

واحدة من المفضلة هي Anime.js, مصدر مجاني تماما ، مفتوح مكتبة جافا سكريبت للرسوم المتحركة.

هذه المكتبة يمكن قم بها كلها. انها بنيت على جافا سكريبت ولكنه أيضا تعتمد اعتمادا كبيرا على الرسوم المتحركة CSS. يمكنك استهداف عناصر صفحة فردية عبر DOM أو يمكنك حتى الهدف SVGs المخصصة.

جميع الوثائق هي ذاتية الاستضافة على جيثب, لذلك قد تحتاج إلى التمرير للعثور على ما تبحث عنه بالضبط. ولكن كل ميزة الرسوم المتحركة يأتي مع بعض المعلمات مثل التأخير ، والمدة ، والتخفيف.

لاحظ هذه المكتبة لا يأتي مع العديد من أنماط الرسوم المتحركة الافتراضية. Anime.js هو صنع للمطورين الذين يريدون تخصيص الرسوم المتحركة الخاصة بهم دون كتابة رمز مطول.

ل مثال حي, تحقق من القلم Codepen أدناه. الكود هو بسيطة للغاية لكنك تحصل على رسوم متحركة معقولة الاسكواش وتمتد زائد توقع, كلا أساسيات الرسوم المتحركة.

تحذير عادل: مكتبة Anime.js هي كثيف. ليس من الصعب إنشاء رسم متحرك مخصص ولكنك بحاجة إلى ذلك فهم بعض الأساسيات مثل تخفيف وبناء جملة جافا سكريبت المشتركة لردود وخيارات.

لكن كل المعلومات التي تحتاجها على صفحة الريبو, بما فيها الكثير من عينات الكود و جداول وثائق مفصلة. ويمكنك استعراض تقارير الأخطاء المفتوحة أو التحقق من دعم المتصفح الذي يتضمن حاليًا جميع المتصفحات الرئيسية و IE 10+.

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

لرؤية حفنة من أمثلة حية, تحقق من هذه المجموعة من العروض Anime.js المستضافة على CodePen. أدناه ، أنا مضمن المفضلة التي ينعش الشعار بأكمله من الصفر, مع حيوية حقيقية.