引入方式
使用 Anime.js 非常灵活,既可以在简单的 HTML 页面中通过 CDN 引入,也可以通过 NPM 安装并集成到现代前端框架中。
一、通过 CDN 引入
适合快速试验或小型项目:
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
`
引入后,anime 对象可直接使用:
anime({
targets: 'div',
translateX: 250
});
二、使用 NPM 安装
在现代项目中推荐使用:
npm install animejs
或使用 Yarn:
yarn add animejs
然后在 JavaScript 模块中导入:
import anime from 'animejs/lib/anime.es.js';
三、在框架中使用
- Vue/Vite:可在组件内直接引入
anime并使用; - React:可在组件生命周期中控制动画(如
useEffect); - VitePress/文档站点:可通过
<script>标签或异步组件加载。
小贴士
- CDN 更轻便,适合学习和演示;
- NPM 更适合可维护项目;
- 使用 Vite 等现代工具时,推荐使用 ESM 格式的模块路径(
anime.es.js)。
相关内容
- Anime.js 简介 本节介绍 Anime.js 是什么,它是一款轻量级、功能丰富的 JavaScript 动画库,适用于构建现代网页中的各种动效。通过 Anime.js,开发者可以...
- 目标元素 targets 本节介绍 Anime.js 中 targets 的使用方法,包括选择器、DOM 节点、NodeList、数组等不同形式的目标设置方式,并讲解如何同时对多个元素进...
- 常用属性动画 本节介绍 Anime.js 中最常用的动画属性,包括位移、缩放、旋转、透明度、颜色等,帮助开发者快速掌握实际动画制作中的常见属性及应用技巧。
- 基本参数设置 本节介绍 Anime.js 动画的基础参数配置,包括持续时间、延迟、缓动函数、循环、方向等,帮助开发者灵活控制动画表现。
- 事件监听 本节介绍 Anime.js 中动画事件监听机制,包括动画开始、更新、完成和停止等事件的使用方法,帮助开发者灵活响应动画状态变化。
- 使用 timeline 创建序列动画 本节介绍如何使用 Anime.js 的 timeline 功能创建复杂的序列动画,实现多个动画按顺序或重叠执行,灵活控制动画时间轴。