教程 animejs tutorial

引入方式

使用 Anime.js 非常灵活,既可以在简单的 HTML 页面中通过 CDN 引入,也可以通过 NPM 安装并集成到现代前端框架中。

一、通过 CDN 引入

适合快速试验或小型项目:

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

`

引入后,anime 对象可直接使用:

js
anime({
  targets: 'div',
  translateX: 250
});

二、使用 NPM 安装

在现代项目中推荐使用:

bash
npm install animejs

或使用 Yarn:

bash
yarn add animejs

然后在 JavaScript 模块中导入:

js
import anime from 'animejs/lib/anime.es.js';

三、在框架中使用

  • Vue/Vite:可在组件内直接引入 anime 并使用;
  • React:可在组件生命周期中控制动画(如 useEffect);
  • VitePress/文档站点:可通过 <script> 标签或异步组件加载。

小贴士

  • CDN 更轻便,适合学习和演示;
  • NPM 更适合可维护项目;
  • 使用 Vite 等现代工具时,推荐使用 ESM 格式的模块路径(anime.es.js)。