Anime.js

特点

• 轻量级：库非常小巧，加载速度快。
• 强大的 API：提供了丰富的动画控制选项，如延迟、时长、回调等。
• 跨平台支持：支持 CSS、SVG、DOM 和 JavaScript 对象。
• 内置函数：内置了许多常用的动画函数，如缓动函数、时间线、关键帧等。
• 可扩展性：通过插件和自定义函数，可以扩展 Anime.js 的功能。

使用场景

• 网页动画：为网页元素添加动画效果，如按钮点击、滚动动画等。
• SVG 动画：对 SVG 元素进行复杂的动画处理。
• 交互式动画：创建复杂的用户交互动画，如游戏和互动媒体项目。
• 数据可视化：为图表和数据可视化添加动态效果。

安装方式

通过 npm 安装：

npm install animejs --save

或直接在 HTML 中引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

使用示例

// 简单的动画示例
anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

常用 API 介绍

• targets：指定要动画的目标，可以是 CSS 选择器、DOM 节点、NodeList 或 JavaScript 对象。
• translateX / translateY：水平/垂直移动元素。
• rotate：旋转元素，可以指定角度。
• scale：缩放元素，可以指定比例。
• duration：动画的持续时间。
• easing：缓动函数，控制动画的速度曲线。
• delay：延迟动画的开始时间。
• loop：设置动画循环次数。
• direction：设置动画方向（正常、反向、交替）。
• autoplay：自动播放动画（默认 true）。
• begin / complete：动画开始和完成时的回调函数。

高级用法

• 关键帧动画：通过关键帧控制动画的每一步。

anime({
  targets: '.element',
  keyframes: [
    {translateY: -40},
    {translateX: 250},
    {translateY: 40},
    {translateX: 0}
  ],
  duration: 4000,
  easing: 'easeOutElastic(1, .8)'
});

• 时间线控制：使用时间线来协调多个动画。

let timeline = anime.timeline({
  easing: 'easeOutExpo',
  duration: 750
});

timeline
.add({
  targets: '.element1',
  translateX: 250
})
.add({
  targets: '.element2',
  translateX: 250,
  offset: '-=500' // 将开始时间提前 500ms
});

官方资料

• 官方网站
• GitHub
• 文档
• 示例