📋 محتويات الصفحة
📖 الوصف
Anime.js هي مكتبة JavaScript خفيفة لإنشاء رسوم متحركة بسيطة ومعقدة. تعمل على عناصر DOM, CSS properties, SVG, وJavaScript objects. تُعد بديلاً أصغر حجماً وأسهل تعلماً من GSAP مع واجهة برمجية intuitive. تتميز Anime.js بالسهلة والوضوح، مما يجعلها خياراً ممتازاً للمشاريع التي تحتاج رسوم متحركة متوسطة ا...
🎯 يستخدم في
مجالات استخدام هذه الأداة
رسوم متحركة للـ CSS properties
SVG animations
Timeline animations بسيطة
Hover effects وmicro-interactions
Page transitions
✨ المميزات
أبرز مميزات هذه الأداة
خفيفة جداً (~17KB)
API بسيط وواضح
دعم timeline للتسلسلات
Stagger animations سهلة
SVG morphing مدمج
متوافقة مع جميع المتصفحات
⚠️ العيوب
نقاط يجب مراعاتها
أداء أبطأ من GSAP في الرسوم المعقدة
لا يوجد ScrollTrigger مثل GSAP
مجتمع أصغر وموارد أقل
غير نشط التطوير منذ فترة (تم إطلاق v4 beta)
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import anime from 'animejs';
// Simple animation
anime({
targets: '.element',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800,
easing: 'easeInOutQuad'
});
// Timeline
const tl = anime.timeline();
tl.add({
targets: '.square',
translateX: 250,
easing: 'easeInOutExpo',
duration: 600
})
.add({
targets: '.circle',
translateX: 250,
easing: 'easeInOutExpo',
duration: 600
}, '-=300'); // Overlap 300ms
// Stagger animation
anime({
targets: '.stagger-demo div',
scale: [0.5, 1],
opacity: [0, 1],
delay: anime.stagger(100) // 100ms between each
});📚 أدوات أخرى في JavaScript
قد يعجبك أيضاً
Chart.js (Core)
⭐مكتبة رسوم بيانية (Charting Library)
D3.js
⭐مكتبة تصور البيانات (Data Visualization Library)
Date-fns
⭐مكتبة معالجة التاريخ والوقت (Date/Time Library)
Day.js
⭐مكتبة معالجة التاريخ والوقت (Date/Time Library)
GSAP (Core)
⭐مكتبة رسوم متحركة متقدمة (Animation Library)
Immutable.js
⭐مكتبة البيانات الثابتة (Immutable Data Structures)