mcpField
A
anime-js

anime-js

github.com/dylantarre设计与 UI134645 次安装43 周前更新
代码仓库

关于 anime-js

这份编码参考通过 Anime.js 实现 Disney 的 12 条动画原则，面向使用 JavaScript 制作动画的开发者。它提供动效示例，并展示时间线、关键帧、错开延迟和缓动。

主要功能

  1. 0112 条动画原则的代码示例
  2. 02Anime.js 时间线与关键帧
  3. 03错开延迟与相对时间设置
  4. 04SVG 路径与缓动选项

适用场景

  1. 01为界面动效添加预备动作与跟随效果
  2. 02安排多个动画元素的先后顺序
  3. 03使用 Anime.js 创建曲线或错开运动

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill anime-js

安装后在 Claude Code 中输入/anime-js确认已加载。

详细介绍

Anime.js 动画原理

使用 Anime.js 灵活的动画引擎实现迪士尼动画的全部 12 条原则。

1. 挤压与拉伸

anime({
  targets: '.ball',
  scaleX: [1, 1.2, 1],
  scaleY: [1, 0.8, 1],
  duration: 300,
  easing: 'easeInOutQuad'
});

2. 预备动作

anime.timeline()
  .add({
    targets: '.character',
    translateY: 10,
    scaleY: 0.9,
    duration: 200
  })
  .add({
    targets: '.character',
    translateY: -200,
    duration: 400,
    easing: 'easeOutQuad'
  });

3. 演出布局

anime({
  targets: '.background',
  filter: 'blur(3px)',
  opacity: 0.6,
  duration: 500
});
anime({
  targets: '.hero',
  scale: 1.1,
  duration: 500
});

4. 连续动作 / 关键姿势

anime({
  targets: '.element',
  keyframes: [
    { translateX: 0, translateY: 0 },
    { translateX: 100, translateY: -50 },
    { translateX: 200, translateY: 0 },
    { translateX: 300, translateY: -30 }
  ],
  duration: 1000
});

5. 跟随动作与重叠动作

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');

6. 慢入与慢出

anime({
  targets: '.element',
  translateX: 300,
  duration: 600,
  easing: 'easeInOutCubic'
});
// Options: easeInQuad, easeOutQuad, easeInOutQuad
// easeInCubic, easeOutCubic, easeInOutCubic
// spring(mass, stiffness, damping, velocity)

7. 弧线运动

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
});

8. 次要动作

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');

9. 时间节奏

// 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)' });

10. 夸张

anime({
  targets: '.element',
  scale: 1.5,
  rotate: '2turn',
  duration: 800,
  easing: 'easeOutElastic(1, 0.5)' // overshoot
});

11. 扎实绘制

anime({
  targets: '.box',
  rotateX: 45,
  rotateY: 30,
  perspective: 1000,
  duration: 500
});

12. 吸引力

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.js 的主要功能

  • anime.timeline() - 对动画进行排序
  • keyframes - 多个姿势
  • anime.stagger() - 错开延迟
  • anime.path() - SVG 运动路径
  • 内置缓动函数 + spring() + elastic()
  • '-=200' - 相对偏移时间
  • anime.set() - 即时设置属性

评论

支持 Markdown