anime-js by dylantarre/animation-principles
npx skills add https://github.com/dylantarre/animation-principles --skill anime-js使用 Anime.js 灵活的动画引擎实现所有 12 项迪士尼动画原则。
anime({
targets: '.ball',
scaleX: [1, 1.2, 1],
scaleY: [1, 0.8, 1],
duration: 300,
easing: 'easeInOutQuad'
});
anime.timeline()
.add({
targets: '.character',
translateY: 10,
scaleY: 0.9,
duration: 200
})
.add({
targets: '.character',
translateY: -200,
duration: 400,
easing: 'easeOutQuad'
});
anime({
targets: '.background',
filter: 'blur(3px)',
opacity: 0.6,
duration: 500
});
anime({
targets: '.hero',
scale: 1.1,
duration: 500
});
anime({
targets: '.element',
keyframes: [
{ translateX: 0, translateY: 0 },
{ translateX: 100, translateY: -50 },
{ translateX: 200, translateY: 0 },
{ translateX: 300, translateY: -30 }
],
duration: 1000
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
anime.timeline()
.add({ targets: '.body', translateX: 200, duration: 500 })
.add({ targets: '.hair', translateX: 200, duration: 500 }, '-=450')
.add({ targets: '.cape', translateX: 200, duration: 600 }, '-=500');
anime({
targets: '.element',
translateX: 300,
duration: 600,
easing: 'easeInOutCubic'
});
// 选项: easeInQuad, easeOutQuad, easeInOutQuad
// easeInCubic, easeOutCubic, easeInOutCubic
// spring(mass, stiffness, damping, velocity)
anime({
targets: '.ball',
translateX: 200,
translateY: [
{ value: -100, duration: 500 },
{ value: 0, duration: 500 }
],
easing: 'easeOutQuad',
duration: 1000
});
// 或使用 SVG 路径
anime({
targets: '.element',
translateX: anime.path('.motion-path')('x'),
translateY: anime.path('.motion-path')('y'),
duration: 1000
});
const tl = anime.timeline();
tl.add({
targets: '.button',
scale: 1.1,
duration: 200
})
.add({
targets: '.icon',
rotate: 15,
duration: 150
}, '-=150')
.add({
targets: '.particles',
opacity: [0, 1],
delay: anime.stagger(50)
}, '-=100');
// 快速 - 利落
anime({ targets: '.fast', translateX: 100, duration: 150 });
// 正常
anime({ targets: '.normal', translateX: 100, duration: 300 });
// 缓慢 - 戏剧性
anime({ targets: '.slow', translateX: 100, duration: 600 });
// 弹簧物理
anime({ targets: '.spring', translateX: 100, easing: 'spring(1, 80, 10, 0)' });
anime({
targets: '.element',
scale: 1.5,
rotate: '2turn',
duration: 800,
easing: 'easeOutElastic(1, 0.5)' // 过冲
});
anime({
targets: '.box',
rotateX: 45,
rotateY: 30,
perspective: 1000,
duration: 500
});
anime({
targets: '.card',
scale: 1.02,
boxShadow: '0 20px 40px rgba(0,0,0,0.2)',
duration: 300,
easing: 'easeOutQuad'
});
anime({
targets: '.item',
translateY: [20, 0],
opacity: [0, 1],
delay: anime.stagger(100), // 每个间隔 100 毫秒
easing: 'easeOutQuad'
});
anime.timeline() - 序列动画keyframes - 多姿态anime.stagger() - 偏移延迟anime.path() - SVG 运动路径spring() + elastic()'-=200' - 相对偏移时间anime.set() - 即时属性设置每周安装量
128
代码仓库
GitHub 星标数
20
首次出现
2026 年 1 月 23 日
安全审计
安装于
gemini-cli104
opencode103
codex100
github-copilot95
cursor93
kimi-cli80
Implement all 12 Disney animation principles using Anime.js's flexible animation engine.
anime({
targets: '.ball',
scaleX: [1, 1.2, 1],
scaleY: [1, 0.8, 1],
duration: 300,
easing: 'easeInOutQuad'
});
anime.timeline()
.add({
targets: '.character',
translateY: 10,
scaleY: 0.9,
duration: 200
})
.add({
targets: '.character',
translateY: -200,
duration: 400,
easing: 'easeOutQuad'
});
anime({
targets: '.background',
filter: 'blur(3px)',
opacity: 0.6,
duration: 500
});
anime({
targets: '.hero',
scale: 1.1,
duration: 500
});
anime({
targets: '.element',
keyframes: [
{ translateX: 0, translateY: 0 },
{ translateX: 100, translateY: -50 },
{ translateX: 200, translateY: 0 },
{ translateX: 300, translateY: -30 }
],
duration: 1000
});
anime.timeline()
.add({ targets: '.body', translateX: 200, duration: 500 })
.add({ targets: '.hair', translateX: 200, duration: 500 }, '-=450')
.add({ targets: '.cape', translateX: 200, duration: 600 }, '-=500');
anime({
targets: '.element',
translateX: 300,
duration: 600,
easing: 'easeInOutCubic'
});
// Options: easeInQuad, easeOutQuad, easeInOutQuad
// easeInCubic, easeOutCubic, easeInOutCubic
// spring(mass, stiffness, damping, velocity)
anime({
targets: '.ball',
translateX: 200,
translateY: [
{ value: -100, duration: 500 },
{ value: 0, duration: 500 }
],
easing: 'easeOutQuad',
duration: 1000
});
// Or use SVG path
anime({
targets: '.element',
translateX: anime.path('.motion-path')('x'),
translateY: anime.path('.motion-path')('y'),
duration: 1000
});
const tl = anime.timeline();
tl.add({
targets: '.button',
scale: 1.1,
duration: 200
})
.add({
targets: '.icon',
rotate: 15,
duration: 150
}, '-=150')
.add({
targets: '.particles',
opacity: [0, 1],
delay: anime.stagger(50)
}, '-=100');
// Fast - snappy
anime({ targets: '.fast', translateX: 100, duration: 150 });
// Normal
anime({ targets: '.normal', translateX: 100, duration: 300 });
// Slow - dramatic
anime({ targets: '.slow', translateX: 100, duration: 600 });
// Spring physics
anime({ targets: '.spring', translateX: 100, easing: 'spring(1, 80, 10, 0)' });
anime({
targets: '.element',
scale: 1.5,
rotate: '2turn',
duration: 800,
easing: 'easeOutElastic(1, 0.5)' // overshoot
});
anime({
targets: '.box',
rotateX: 45,
rotateY: 30,
perspective: 1000,
duration: 500
});
anime({
targets: '.card',
scale: 1.02,
boxShadow: '0 20px 40px rgba(0,0,0,0.2)',
duration: 300,
easing: 'easeOutQuad'
});
anime({
targets: '.item',
translateY: [20, 0],
opacity: [0, 1],
delay: anime.stagger(100), // 100ms between each
easing: 'easeOutQuad'
});
anime.timeline() - Sequence animationskeyframes - Multiple posesanime.stagger() - Offset delaysanime.path() - SVG motion pathsspring() + elastic()'-=200' - Relative offset timinganime.set() - Instant property setWeekly Installs
128
Repository
GitHub Stars
20
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli104
opencode103
codex100
github-copilot95
cursor93
kimi-cli80
Vue.js测试最佳实践:Vue 3组件、组合式函数、Pinia与异步测试完整指南
4,000 周安装