📋 محتويات الصفحة
📖 الوصف
Anime.js هي مكتبة رسوم متحركة خفيفة (~17KB) تعمل مع JavaScript, CSS properties, SVG, وDOM attributes. توفر API بسيطة وقوية لإنشاء animations معقدة. Anime.js v4 (beta) يقدم rewrite كامل مع performance محسّن وAPI محسّن. مناسب للمشاريع التي تحتاج animations متوسطة التعقيد بدون overhead GSAP.
🎯 يستخدم في
مجالات استخدام هذه الأداة
Web animations
SVG animations
CSS property animations
Timeline animations
Stagger animations
✨ المميزات
أبرز مميزات هذه الأداة
خفيفة (~17KB)
API بسيطة
Timeline animations
Stagger animations سهلة
SVG line drawing
Works مع جميع العناصر
TypeScript support (v4)
Framework-agnostic
⚠️ العيوب
نقاط يجب مراعاتها
أداء أقل من GSAP
Society أصغر
v4 لا يزال في beta
أقل plugins
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
import anime from 'animejs';
// Basic 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,
duration: 600
}).add({
targets: '.circle',
translateX: 250,
duration: 600
}, '-=300');
// Stagger
anime({
targets: '.stagger-demo div',
scale: [0.5, 1],
opacity: [0, 1],
delay: anime.stagger(100)
});
// SVG path animation
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
direction: 'alternate'
});
// React integration
import { useAnime } from 'animejs/react';
function Component() {
const { animeInstance } = useAnime({
targets: '.element',
translateX: [0, 100],
duration: 1000
});
return <div className="element">محتوى</div>;
}📚 أدوات أخرى في Animation
قد يعجبك أيضاً
AutoAnimate
مكتبة رسوميات تلقائية بدون إعداد مسبق
Framer Motion
⭐مكتبة رسوم متحركة لـ React (React Animation Library)
GSAP
⭐مكتبة رسوم متحركة قوية (Powerful Animation Library)
Lenis
⭐مكتبة Smooth Scroll (Smooth Scroll Library)
Lottie
⭐مكتبة رسوم متحركة JSON-based (JSON Animation Library)
Motion One
مكتبة رسوميات خفيفة وعالية الأداء للويب