anime.js 快速入门：怎么引入库并编写第一个 DOM 动画

编写网页动画时，原生 CSS 过渡容易受限于多状态组合，而原生 JavaScript 手写定时器又相对繁琐。anime.js 是一个轻量级（约 14KB gzipped）的 JavaScript 动画引擎，它通过统一的对象化参数直接操作 DOM 样式、CSS Transform 及 SVG 属性。本文将详细说明如何在前端项目中引入 anime.js，并通过一个标准盒子位移旋转的实例，展示从 DOM 结构定义、参数挂载到运行调试的完整闭环。

一、准备工作：怎么把 anime.js 引入到项目中

在编写具体的动画逻辑前，浏览器环境必须能够访问到 anime 构造函数。目前前端开发主要有两种主流场景：一种是无需打包工具的简单静态网页，另一种是基于 Vite、Webpack 等构建工具的工程化项目。

1. 方式 A：通过公共 CDN 引入（最适合快速上手）

如果你想在几分钟内验证动画效果，直接在 HTML 文件的 <head> 或 <body> 底部添加 <script> 标签是最快的方式。你可以选择常用的稳定 CDN 节点，例如 cdnjs 或 unpkg：

<!-- 通过 cdnjs 引入 anime.js 核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>

引入后，浏览器全局对象中就会注入 window.anime 函数。在后续的 <script> 标签中，你可以直接调用 anime({...})。

2. 方式 B：现代包管理工具引入（npm / pnpm / yarn）

在现代化前端工程中，推荐使用包管理器安装，便于版本统一与长期维护：

# 在项目终端根目录执行安装
npm install animejs

安装完成后，在具体的 JavaScript 或框架组件文件头部，通过 ES Module 语法导入：

// 导入标准 ES 模块
import anime from 'animejs/lib/anime.es.js';

// 若采用原生 <script type="module">，也可通过 esm.sh 直接加载：
// import anime from 'https://esm.sh/animejs@3.2.2';

二、编写第一个 DOM 动画：完整操作步骤

构建一个动画通常遵循四步流程：搭建 DOM 结构、设置基础 CSS、编写 anime 配置对象、刷新浏览器验证执行。

步骤 1：新建 index.html 文件并放入基础结构

在电脑上新建一个测试文件夹，并在其中创建一个名为 index.html 的文件。编写基本的 HTML5 模板，并在页面中放入一个具有标识类名 .box 的元素：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>My First anime.js Animation</title>
  <style>
    body {
      margin: 0;
      padding: 40px;
      background-color: #FAFAF7;
      font-family: sans-serif;
    }
    .track {
      width: 100%;
      height: 120px;
      border-bottom: 2px dashed #D5DEE5;
      position: relative;
    }
    .box {
      width: 64px;
      height: 64px;
      background-color: #6487A5;
      border-radius: 8px;
    }
  </style>
</head>
<body>

  <div class="track">
    <div class="box"></div>
  </div>

  <!-- 引入 anime.js 核心脚本 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
  <script>
    // 动画配置脚本将写在这里
  </script>
</body>
</html>

步骤 2：编写核心动画逻辑

在底部的 <script> 标签内，调用 anime() 函数并传入一个配置对象。我们将让 .box 沿 X 轴向右平移 250 像素，同时完成 180 度顺时针旋转，并在 1.2 秒内以平滑缓动完成：

anime({
  targets: '.box',        // 动画目标：CSS 选择器
  translateX: 250,        // 水平向右平移 250 像素（默认单位 px）
  rotate: '180deg',       // 顺时针旋转 180 度
  backgroundColor: '#C28B68', // 背景颜色从柔蓝平滑过渡为陶橙色
  borderRadius: ['8px', '50%'], // 形状从圆角矩形变成正圆形
  duration: 1200,         // 动画持续时间（毫秒）
  easing: 'easeInOutQuad',// 缓动曲线：二次方进出平滑
  direction: 'alternate', // 播放方向：往返交替
  loop: true              // 是否无限循环
});

步骤 3：验证执行结果

用任何浏览器直接双击打开 index.html。此时无需安装本地 Web 服务器即可看到：

• 原本位于左侧的蓝色方块平稳向右滑动；
• 在滑动的过程中，方块由方变圆，颜色渐变转为陶橙色，伴随 180 度旋转；
• 到达 250px 终点后，由于指定了 direction: 'alternate'，方块会自动沿原路径平滑返回初始状态并持续循环。

三、深入理解：anime.js 配置对象的内部原理

为什么 anime({ ... }) 可以直接改变各种不同类型的属性？理解配置对象的分类逻辑，能够帮助读者随心所欲组合出各种精细动效。

为什么推荐优先使用 CSS Transform 属性？

在 anime.js 中，你可以改变 left、top，也可以改变 translateX、translateY。在实际业务中，强烈建议优先使用 translateX/Y。

因为修改 top/left 会触发浏览器排版引擎的重排（Reflow）与重绘（Repaint），在低配置设备上容易出现掉帧；而 transform 与 opacity 属于复合层属性（Composite Layers），浏览器可以直接利用 GPU 加速计算，即使是在动画高频刷新时也能保持 60fps 的流畅体验。

四、进阶扩展：为动画绑定交互控制

在真实业务界面中，动画往往不是页面一打开就自己播放，而是跟随用户点击、滚动或数据加载触发。anime.js 返回一个动画实例对象，通过该对象可以方便地控制播放生命周期。

// 1. 设置 autoplay 为 false，创建暂停状态的动画实例
const myAnimation = anime({
  targets: '.box',
  translateX: 300,
  duration: 1500,
  easing: 'easeOutElastic(1, .6)',
  autoplay: false // 阻止初始化时自动执行
});

// 2. 绑定页面按钮事件
const playBtn = document.querySelector('#play-button');
const pauseBtn = document.querySelector('#pause-button');
const restartBtn = document.querySelector('#restart-button');

playBtn.addEventListener('click', () => myAnimation.play());
pauseBtn.addEventListener('click', () => myAnimation.pause());
restartBtn.addEventListener('click', () => myAnimation.restart());

通过 myAnimation.play()、myAnimation.pause() 和 myAnimation.restart()，即可用极少的胶水代码实现完整的 UI 交互响应控制。

五、常见问题排查与避坑指南

初学者在初次编写 DOM 动画时，如果页面元素没有如期动起来，通常可以按照以下核对表快速定位原因：

核心检查清单

1. DOM 加载时机：如果将自定义 <script> 写在 <head> 中，务必使用 window.addEventListener('DOMContentLoaded', () => { ... }) 包裹，否则 document.querySelector 会因为找不到节点而静默失效。
2. CSS 行内样式覆盖问题：如果在已有样式表中使用了带有 !important 的定位属性，可能会阻碍 JavaScript 对行内样式的动态重写。
3. 数值与单位规范：纯数值默认采用 px 作为长度单位（如 translateX: 250）。若使用相对单位或角度，必须以字符串形式明确书写，如 translateX: '50vw' 或 rotate: '1turn'。

六、全文总结

为网页添加动画并非只有繁重的第三方框架一条路。通过 anime.js，开发者只需完成两件事：第一步，通过 CDN 链接或 npm 将类库引入上下文；第二步，调用 anime({ targets, ...properties, ...parameters }) 声明目标与运动预期。

借助其对 CSS Transform 自动内联优化的机制，配合预置的贝塞尔缓动算法，可以以极简、可读性极强的 JavaScript 代码，快速打造富有表现力的网页交互动效。