功能强大的 Javascript 动画库插件

1,675 阅读5分钟

本期介绍一个前端动画插件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});

可动画的目标属性

  1. 对目标的CSS属性进行动画。

「大多数CSS属性都会导致布局更改或重新绘制,并会导致动画不稳定。 因此尽可能优先考虑opacity和CSS transforms。」

  1. 对CSS的transforms属性动画。

所有的transforms属性

  1. JAVASCRIPT对象属性

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

  1. DOM 属性

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

  1. SVG 属性

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

动画基础参数

  1. DURAION(持续时间)

定义动画的持续时间(以毫秒为单位)。

  1. DELAY(延迟)

定义动画的延迟(以毫秒为单位)。

  1. ENDDELAY(末端延迟)

在动画结束时以毫秒为单位添加一些额外时间。

  1. EASING(时间曲线)

定义动画的时间曲线。

  1. ROUND(数字格式)

将值向上舍入为x小数。

  1. 特殊属性

使用Object作为值为动画的每个属性定义特定参数。 未在Object中指定的其他属性继承自主动画。

  1. 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;  }});

方向和循环

  1. DIRECTION(方向)

定义动画的方向。

ACCEPTS

INFOS

normal

正方向动画

reverse

反方向动画

alternate

往返

  1. LOOP(循环)

定义动画的往复次数。

ACCEPTS

INFOS

Number

循环次数

true

无限循环

  1. AUTOPLAY(自动播放)

定义动画是否应自动启动。

ACCEPTS

INFOS

true

开启自动播放

false

关闭自动播放

动画赋值方式

  1. 无单位数值

如果原始值具有单位,则它将自动添加到动画值中。

  1. 有单位数值

强制动画使用某个单位并自动转换初始目标值。

  1. 相对数值

添加,减去或乘以原始值。

ACCEPTS

EFFECT

EXAMPLE

'+='

Add

'+=100'

'-='

Substract

'-=2turn'

'*='

Multiply

'*=10'

  1. 颜色

anime.js 接受并转换Haxadecimal(十六进制),RGB,RGBA,HSL和HSLA颜色值。

  1. 设定动画初始值

强制动画以指定值开始。

  1. 函数返回数值

为动画的每个目标和属性设置不同的值。

ARGUMENTS

INFOS

target

当前动画目标元素

index

动画目标的索引

targetsLength

总动画目标数

关键帧(KEYFRAMES)

  1. 动画关键帧

动画关键帧是使用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});
  1. 属性关键帧

与动画关键帧类似,属性关键帧是使用属性对象的Array定义的。 属性关键帧允许重叠动画,因为每个属性都有自己的关键帧数组。

动画控制

  1. PLAY / PAUSE(暂停/播放)

播放暂停的动画,如果autoplay 参数设置为false,则启动动画。

animation.play();animation.pause();
  1. RESTART(重新开始)

从动画的初始值重新开始动画。

animation.restart();
  1. REVERSE(反转方向)

反转动画的方向。

animation.reverse();
  1. SEEK(瞬移)

跳转到特定时间(以毫秒为单位)。

animation.seek(timeStamp);
  1. 时间轴控制 时间轴控制与动画控制的方法一样。

    timeline.play();timeline.pause();timeline.restart();timeline.seek(timeStamp);

时间曲线(EASING)

  1. 匀速

不对动画应用任何缓动时间曲线。 对于opacity和colors过渡很有用。

easing: 'linear'
  1. 不匀速

    easing: 'easeInOutSine'

  2. 三次贝塞尔

使用您自己的自定义立方Bézier曲线cubicBezier(x1, y1, x2, y2).

easing: 'cubicBezier(.5, .05, .1, .3)'
  1. 弹簧(SPRING)

类似于弹簧效果

easing: 'spring(mass, stiffness, damping, velocity)'
  1. 弹跳

弹跳效果

easing: 'easeOutElastic(amplitude, period)'
  1. 台阶式 定义动画到达其结束值所需的跳转次数。

    easing: 'steps(numberOfSteps)'

  2. 自定义

通过基于function based value返回自定义时间曲线函数。

easing: function() { return function(time) { return time * i} }

ANIME.JS方法

  1. 删除目标

从正在运行的动画或时间轴中删除目标。 targets参数接受与targets 属性相同的值。

anime.remove(targets)
  1. 获取值

返回元素的原始值。

anime.get(target, propertyName, unit);
  1. 设定值

立即将值设置为指定的目标。

anime.set(targets, {property: value});
  1. 随机数

返回特定范围内的随机整数。 anime.random(minValue, maxValue);

  1. TICK

使用外部requestAnimationFrame循环播放动画。 「不要忘记将autoplay参数设置为false以防止anime.js内置RAF循环启动。」

animation.tick(time)
  1. 运行的对象

返回当前正在运行的所有活动anime.js实例的Array。

anime.running

「感谢阅读,详细文档请阅读anime.js官网文档