المشكلة اللي كانت ناقصة في جودة أنيميشن الذكاء الاصطناعي… أخيرًا انحلت!
قبل كان الأنيميشن اللي يطلعه الذكاء الاصطناعي جامد، مسطح، وما فيه روح…
أشارككم أداة مفتوحة المصدر وخفيفة اسمها anime.js، ترفع جودة وحسّ الأنيميشن بشكل مباشر.
بسطر كود واحد تقدر تسوي حركات أنيميشن معقدة وسلسة: خصائص CSS، تحريك وتغيير أشكال SVG، خط زمني (Timeline)، حركات متداخلة (Stagger)، تشغيل مع السكرول، سحب العناصر (Draggable)، فيزياء الـ Spring… كلها تقدر تتحكم فيها بسهولة.
ليش anime.js تعتبر من أقوى مكتبات الأنيميشن؟
خفيفة جدًا: حجمها كم كيلوبايت فقط ومقسمة بشكل Modular، بدون تعقيد أو ثقل.
واجهة استخدام بسيطة: أوامرها واضحة وسهلة القراءة، وما تحتاج تتعلم كثير — خصوصًا مع الكود اللي يولده الذكاء الاصطناعي.
إمكانياتها واسعة: فيها SVG Morph، مسارات الحركة (Motion Path)، مراقبة السكرول (Scroll Observer)، فيزياء Spring، وTimeline… حتى السيناريوهات المعقدة تتعامل معها.
وتشتغل بشكل ممتاز مع أدوات مثل Cursor و Claude والوكلاء الذكيين (AI Agent)، اللي مهتم يجربها يشيك عليها.