本期介绍一个前端动画插件anime.js，anime.js 是一款功能强大的 Javascript 动画库插件，可以和 CSS3 属性，SVG，DOM 元素和 JS 对象一起工作，制作出各种高性能，平滑过渡的动画效果。
安装
npm install animejs
bower install animejs
在页面中引入 anime.min.js 文件。
<script type="text/javascript" src="js/anime.min.js"></script>
HTML 结构
<article>
<div class="blue"></div>
</article>
初始化插件
通过anime() 方法来构造一个对象实例，以json 对象的方式传入需要的参数：
var myAnimation = anime({
targets: ['.blue'],
translateX: '13rem',
rotate: 180,
borderRadius: 8,
duration: 2000,
loop: true
});
配置参数
参数使用教程
动画的目标对象（targets）
CSS选择器
不可使用伪元素
anime({
targets: '.css-selector-demo .el',
translateX: 250
});
DOM元素 /元素序列
使用DOM节点或节点的集合作为动画目标
var elements = document.querySelectorAll('.dom-node-demo .el');
anime({
targets: elements,
translateX: 270
});
JAVASCRIPT对象
以JavaScript对象作为动画目标，这个对象必须含有至少一个数字属性。
var logEl = document.querySelector('.battery-log');
var battery = {
charged: '0%',
cycles: 120
}
anime({
targets: battery,
charged: '100%',
cycles: 130,
round: 1,
easing: 'linear',
update: function() {
logEl.innerHTML = JSON.stringify(battery);
}
});
数组
以数组作为动画目标。
var el = document.querySelector('.mixed-array-demo .el-01');
anime({
targets: [el, '.mixed-array-demo .el-02', '.mixed-array-demo .el-03'],
translateX: 250
});
可动画的目标属性
- 对目标的CSS属性进行动画。
大多数CSS属性都会导致布局更改或重新绘制，并会导致动画不稳定。 因此尽可能优先考虑opacity和CSS transforms。
- 对CSS的transforms属性动画。
所有的transforms属性
- JAVASCRIPT对象属性
包含数值的任何Object属性都可以设置动画。
- DOM 属性
任何包含数值的DOM属性都可以设置动画。
- SVG 属性
与任何其他DOM属性一样，包含至少一个数值的所有SVG属性都可以设置动画。
动画基础参数
- DURAION（持续时间）
定义动画的持续时间（以毫秒为单位）。
- DELAY（延迟）
定义动画的延迟（以毫秒为单位）。
- ENDDELAY（末端延迟）
在动画结束时以毫秒为单位添加一些额外时间。
- EASING（时间曲线）
定义动画的时间曲线。
- ROUND（数字格式）
将值向上舍入为x小数。
- 特殊属性
使用Object作为值为动画的每个属性定义特定参数。
未在Object中指定的其他属性继承自主动画。
- FUNCTION 参数
为动画的每个目标和属性设置不同的值。
function 接受三个参数:
| ARGUMENTS | INFOS |
|---|---|
| target | 当前动画目标元素 |
| index | 动画目标的索引 |
| targetsLength | 总动画目标数 |
anime({
targets: '.function-based-params-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
delay: function(el, i, l) {
return i * 100;
},
endDelay: function(el, i, l) {
return (l - i) * 100;
}
});
方向和循环
- DIRECTION（方向）
定义动画的方向。
| ACCEPTS | INFOS |
|---|---|
| normal | 正方向动画 |
| reverse | 反方向动画 |
| alternate | 往返 |
- LOOP（循环）
定义动画的往复次数。
| ACCEPTS | INFOS |
|---|---|
| Number | 循环次数 |
| true | 无限循环 |
- AUTOPLAY（自动播放）
定义动画是否应自动启动。
| ACCEPTS | INFOS |
|---|---|
| true | 开启自动播放 |
| false | 关闭自动播放 |
动画赋值方式
- 无单位数值
如果原始值具有单位，则它将自动添加到动画值中。
- 有单位数值
强制动画使用某个单位并自动转换初始目标值。
- 相对数值
添加，减去或乘以原始值。
| ACCEPTS | EFFECT | EXAMPLE |
|---|---|---|
| '+=' | Add | '+=100' |
| '-=' | Substract | '-=2turn' |
| '*=' | Multiply | '*=10' |
- 颜色
anime.js 接受并转换Haxadecimal(十六进制)，RGB，RGBA，HSL和HSLA颜色值。
- 设定动画初始值
强制动画以指定值开始。
- 函数返回数值
为动画的每个目标和属性设置不同的值。
| ARGUMENTS | INFOS |
|---|---|
| target | 当前动画目标元素 |
| index | 动画目标的索引 |
| targetsLength | 总动画目标数 |
关键帧(KEYFRAMES)
- 动画关键帧
动画关键帧是使用keyframes属性中的数组定义的。
如果关键帧内没有指定duration（持续时间），则每个关键帧的持续时间将等于动画总持续时间除以关键帧数。
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
});
- 属性关键帧
与动画关键帧类似，属性关键帧是使用属性对象的Array定义的。 属性关键帧允许重叠动画，因为每个属性都有自己的关键帧数组。
动画控制
- PLAY / PAUSE（暂停/播放）
播放暂停的动画，如果autoplay 参数设置为false，则启动动画。
animation.play();
animation.pause();
- RESTART（重新开始）
从动画的初始值重新开始动画。
animation.restart();
- REVERSE（反转方向）
反转动画的方向。
animation.reverse();
- SEEK（瞬移）
跳转到特定时间（以毫秒为单位）。
animation.seek(timeStamp);
- 时间轴控制
时间轴控制与动画控制的方法一样。
timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);
时间曲线(EASING)
- 匀速
不对动画应用任何缓动时间曲线。
对于opacity和colors过渡很有用。
easing: 'linear'
- 不匀速
easing: 'easeInOutSine'
- 三次贝塞尔
使用您自己的自定义立方Bézier曲线cubicBezier(x1, y1, x2, y2).
easing: 'cubicBezier(.5, .05, .1, .3)'
- 弹簧（SPRING）
类似于弹簧效果
easing: 'spring(mass, stiffness, damping, velocity)'
- 弹跳
弹跳效果
easing: 'easeOutElastic(amplitude, period)'
- 台阶式
定义动画到达其结束值所需的跳转次数。
easing: 'steps(numberOfSteps)'
- 自定义
通过基于function based value返回自定义时间曲线函数。
easing: function() { return function(time) { return time * i} }
ANIME.JS方法
- 删除目标
从正在运行的动画或时间轴中删除目标。
targets参数接受与targets 属性相同的值。
anime.remove(targets)
- 获取值
返回元素的原始值。
anime.get(target, propertyName, unit);
- 设定值
立即将值设置为指定的目标。
anime.set(targets, {property: value});
- 随机数
返回特定范围内的随机整数。
anime.random(minValue, maxValue);
- TICK
使用外部requestAnimationFrame循环播放动画。
不要忘记将autoplay参数设置为false以防止anime.js内置RAF循环启动。
animation.tick(time)
- 运行的对象
返回当前正在运行的所有活动anime.js实例的Array。
anime.running
感谢阅读，详细文档请阅读anime.js官网文档
