用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/dylantarre/animation-principles --skill anime-js命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
Use when creating commercial animations, advertising motion, brand identity animation, logo reveals, or marketing video content.
正在显示 SKILL.md
基于 SOC 职业分类
| name | anime-js |
| description | Use when implementing Disney's 12 animation principles with Anime.js library |
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 set