本期介绍一个前端动画插件anime.js,anime.js 是一款功能强大的 Javascript 动画库插件,可以和 CSS3 属性,SVG,DOM 元素和 JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。
安装
npm install animejsbower install animejs
在页面中引入 anime.min.js 文件。
<script type="text/javascript" src="js/anime.min.js"></script>
HTML 结构
# 初始化插件 通过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官网文档」