Anime.js是什么？探索这款动画库的功能与应用

Anime.js 是一个轻量级的 JavaScript 动画库，专注于为 Web 开发者提供简单直观的动画解决方案，它支持对 CSS 属性、SVG、DOM 和 JavaScript 对象进行动画操作，并提供了友好且强大的 API，Anime.js 以其出色的性能和易用性而受到广泛欢迎，即便是初学者也能轻松上手。

Anime.js 的源代码仓库结构如下：

| 目录 | 说明 |

| --| --|

| `dist/` | 发布到生产环境的压缩和未压缩版本。 |

| `src/` | 项目的主要源代码，包括核心功能实现。 |

| `test/` | 测试相关的文件，用于确保项目的质量。 |

| `examples/` | 示例和演示代码，帮助开发者理解如何使用 Anime.js。 |

| `docs/` | 文档资料，包括 API 参考和教程。 |

| `package.json` | npm 包的配置文件，包含了依赖项和脚本。 |

Anime.js 使用 `package.json` 文件来管理项目元数据、依赖和开发脚本，该文件通常包含以下关键部分：

`name`: 项目名称。

`version`: 当前版本号，遵循语义化版本规则。

`description`: 简短的项目描述。

`main`: 入口文件，通常是打包后的库文件路径。

`scripts`: 自定义的 npm 脚本，如 build, test 和 lint。

`dependencies` 和 `devDependencies`: 项目的依赖库，分别表示生产环境和开发环境所需。

```json

"name": "anime",

"version": "3.x.x",

"description": "A powerful yet lightweight JavaScript animation library.",

"main": "dist/anime.min.js",

"scripts": {

"build": "rollup -c",

"test": "karma start"

},

"dependencies": {},

"devDependencies": {

"rollup": "^x.x.x",

"karma": "^x.x.x"

}

```

这里的 `build` 脚本使用 Rollup 进行代码打包，而 `test` 脚本运行 Karma 配置的单元测试。

Anime.js 的主要入口文件是 `src/anime.js`，这个文件定义了 `anime()` 函数，它是整个库的核心，当在浏览器中引入 Anime.js 或通过模块加载器时，此函数将暴露给全局作用域或导出以供其他模块使用，在浏览器环境中，你可以这样导入并使用 Anime.js:

```html

```

在这个例子中，`anime()` 函数接收一个配置对象，用于指定动画的效果、目标元素和其他参数。

Anime.js 支持多种方式绑定动画目标：

1. **CSS选择器**：通过CSS选择器获取目标元素，`targets: '.item'`。

2. **DOM元素/元素序列**：使用DOM节点或节点的集合作为动画目标，`targets: document.querySelectorAll('.item')`。

3. **数组**：以数组作为动画目标，`targets: ['.item1', '.item2']`。

4. **JavaScript对象属性**：包含数值的任何Object属性都可以设置动画，`targets: myObject`。

5. **DOM属性**：任何包含数值的DOM属性都可以设置动画，`targets: document.querySelector('input[type="range"]')`。

6. **SVG属性**：与任何其他DOM属性一样，包含至少一个数值的所有SVG属性都可以设置动画，`targets: ['.svg-attributes-demo polygon', 'feTurbulence', 'feDisplacementMap']`。

Anime.js 支持多种可动画的目标属性：

**CSS属性**：大多数CSS属性都会导致布局更改或重绘，因此尽可能优先考虑opacity和CSS transforms，常见的会引起重绘的属性包括width、height、top、left、right、bottom等。

**CSS3 TRANSFORMS属性**：针对CSS的transforms属性动画，`translateX`, `scale`, `rotate`等。

**JavaScript对象属性**：包含数值的任何Object属性都可以设置动画。

**DOM属性**：任何包含数值的DOM属性都可以设置动画。

**SVG属性**：与任何其他DOM属性一样，包含至少一个数值的所有SVG属性都可以设置动画。

Anime.js 提供了丰富的动画基础参数：

**duration**：持续时间，默认1000毫秒。

**delay**：延迟，默认0毫秒。

**endDelay**：末端延时，默认0毫秒。

**easing**：时间曲线，默认值 `easeOutElastic(1, .5)`，可选值包括linear（匀速）、cubicBezier、spring（弹簧）、bounce（弹跳）、steps（台阶）等。

**round**：四舍五入，设置为1时没有小数点。

**specialEasings**：特殊的缓动函数，可以自定义缓动函数。

**direction**：方向，可以是normal（正常）、reverse（反向）或alternate（回放）。

**loop**：循环，可以设置次数或设置为true表示无限循环。

**autoplay**：自动播放，布尔值。

**offset**：时间间隔。

Anime.js 还支持多个动画属性各自设置参数，

```javascript

var specificPropertyParameters = anime({

targets: '#specificPropertyParameters .el',

translateX: {

value: 250,

duration: 800

},

rotate: {

value: 360,

duration: 1800,

easing: 'easeInOutSine'

},

scale: {

value: 2,

duration: 1600,

delay: 800,

easing: 'easeInOutQuart'

},

delay: 250 // All properties except 'scale' inherit 250ms delay

});

```

Anime.js 允许连接多个动画，完结一个动画之后接着进行下一个动画：

```javascript

var basicTimeline = anime.timeline(); //基本的时间线,新建后通过add增加动画

basicTimeline

.add({

targets: '#basicTimeline .square.el',

translateX: 250,

easing: 'easeOutExpo'

})

.add({

targets: '#basicTimeline .circle.el',

translateX: 250,

easing: 'easeOutExpo'

})

.add({

targets: '#basicTimeline .triangle.el',

translateX: 250,

easing: 'easeOutExpo'

});

```

Anime.js 提供了参数继承功能，在同一个目标上建立时间线，链接多段动画：

```javascript

var timelineParameters = anime.timeline({ //可以在新建的时候把多个动画通用的参数抽离出来，add里写动画的属性

direction: 'alternate',

loop: true

});

timelineParameters

.add({

targets: '#timelineParameters .square.el',

translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],

translateY: [ { value: 30 }, { value: 60 }, { value: 60 } ],

duration: 3000

})

.add({

targets: '#timelineParameters .circle.el',

translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],

translateY: [ { value: 30 }, { value: -30 }, { value: -30 } ],

duration: 3000,

offset: 200

})

.add({

targets: '#timelineParameters .triangle.el',

translateX: [ { value: 80 }, { value: 250 } ],

translateY: [ { value: -60 }, { value: -30 }, { value: -30 } ],

duration: 3000,

offset: 400

});

```

Anime.js 还支持回调函数，允许你在动画完成时执行回调函数：

```javascript

anime({

targets: '#box',

translateX: 250,

easing: 'easeInOutQuad',

duration: 1000,

complete: function(anim) {

console.log('动画完成！');

},

begin: function(anim) {

console.log('开始动画')

},

update: function(anim) {

console.log('更新是，实时监测动画状态')

}

});

```

Anime.js 是一款功能强大且易于使用的动画库，适用于各种Web开发需求，无论是初学者还是有经验的开发者，都能快速上手并创建出令人惊叹的动画效果，通过本文的介绍，相信你对 Anime.js 有了初步的了解，并在项目中尝试使用这一优秀的工具。

各位小伙伴们，我刚刚为大家分享了有关“anime .js”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！