为何说Anime.js是名副其实前端动画库天花板？

大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Anime.js

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Anime.js (/ˈæn.ə.meɪ/) 是一个轻量级 JavaScript 动画库，具有简单但功能强大的 API，适用于： CSS 、SVG、DOM 属性和 JavaScript 对象，目前已经发布到 Anime.js V4 版本。

Anime.js 具有以下突出优势：

内置交错系统（Staggering System）使复杂的跟随和重叠动画变得简单，可以用于计时和属性，比如：forward、from center、easing、reversed、ripple 等等支持在单个 HTML 元素上同时以不同的时间对多个 CSS 转换属性进行动画处理，比如：translateX、translateY、rotate、scale 等支持使用完整的内置回调和控制功能同步播放、暂停、控制、反转和触发事件，比如：delay、end-delay、change 等适用于任何 Web，比如：CSS、SVG、DOM 属性和 JavaScript 对象，且使用单个统一的 API 为所有内容制作动画浏览器支持非常广泛，比如：Chrome 24+、Safari 8+、IE / Edge 11+、Firefox 32+、Opera 15 + 等等。

目前 Anime.js 在 Github 通过 MIT 协议开源，有大约 50k 的 star、3.6k 的 fork、妥妥的前端顶级开源项目。

如何使用 Anime.js

首先安装相应依赖：

$ npm install animejs --save

然后支持下面方式引入，比如 ESM：

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

或者使用 CommonJS：

const anime = require('animejs');

当然也支持 CDN 引入：

Anime.js 的使用也是非常简单，比如下面是 Anime.js 的 Hello World 示例：

anime({ targets: 'div', translateX: 250, rotate: '1turn', backgroundColor: '#FFF', duration: 800});

如果要使用关键帧动画，Anime.js 代码也非常简洁，只需要使用 keyframes 属性中的数组定义，比如下面的示例：

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

而时间轴动画可让开发者将多个动画同步在一起。默认情况下，添加到时间线的每个动画都会在上一个动画结束后开始。比如下面的示例：

// 使用默认参数创建时间线 timelinevar tl = anime.timeline({ easing: 'easeOutExpo', duration: 750});// 添加子元素tl.add({ targets: '.basic-timeline-demo .el.square', translateX: 250,}).add({ targets: '.basic-timeline-demo .el.circle', translateX: 250,}).add({ targets: '.basic-timeline-demo .el.triangle', translateX: 250,});

关于Anime.js 的更多用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/juliangarnier/anime

https://animejs.com/documentation/#timelineBasics

https://www.youtube.com/watch?app=desktop&v=uRDLFXxihgc

https://www.youtube.com/watch?app=desktop&v=NMdWtw_DtrA