anime.js是一款功能强大的Javascript动画库插件。anime.js可以和CSS3属性，SVG，DOM元素和JS对象一起工作，制作出各种高性能，平滑过渡的动画效果。

安装

可以通过bower或npm来安装anime.js动画库插件。

npm install animejs 
bower install animejs

使用方法

在页面中引入anime.min.js文件。

<script type="text/javascript" src="js/anime.min.js"></script>
HTML结构

以动画两个div元素为例，HTML结构如下：

<article>
  <div class="blue"></div>
  <div class="green"></div>
</article>
初始化插件

通过anime()方法来构造一个对象实例，以json对象的方式传入需要的参数：

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

配置参数

anime.js动画库插件的可用配置参数有：

参数 默认值 取值
delay 0 number, function (el, index, total)
duration 1000 number, function (el, index, total)
autoplay true boolean
loop false number, boolean
direction 'normal' 'normal', 'reverse', 'alternate'
easing 'easeOutElastic' console log anime.easings to get the complete functions list
elasticity 400 number (higher is stronger)
round false number, boolean
begin undefined function (animation)
update undefined function (animation)
complete undefined function (animation)

应用举例

指定动画参数

参数可以使用json对象的方式传入，可设置的动画参数有：

  • value (必须)
  • delay
  • duration
  • easing

例如：

anime({
  targets: 'div',
  translateX: '13rem',
  rotate: {
    value: 180,
    duration: 1500,
    easing: 'easeInOutQuad'
  },
  scale: {
    value: 2,
    delay: 150,
    duration: 850,
    easing: 'easeInOutExpo',
  },
  direction: 'alternate',
  loop: true
});
多个timing时间函数值

动画延迟和动画的持续时间可以使用函数来各自指定目标元素。函数的参数如下：

参数位置 参数名称 描述
1 target 目标元素
2 index 目标元素的索引（从0开始）
3 length of targets 目标的总数（从0开始计数）

例如：

anime({
  targets: 'div',
  translateX: '13.5rem',
  scale: [.75, .9],
  delay: function(el, index) {
    return index * 80;
  },
  direction: 'alternate',
  loop: true
});
有效的动画属性列表

任何属性只要包含一个以上的数值属性，就可以执行动画效果。

类型 示例
CSS Properties width, borderRadius, 'background-color'
Individual transforms translateX, rotate, scaleY
SVG attributes d, rx, transform
DOM attributes value, volume
Object properties 任何包含一个以上的对象属性
单个属性值

定义结束动画的值。

类型 示例 描述
String '100rem' 推荐使用。强制动画使用指定的值，但是不转换单位。
Number 100 使用可能的默认单位。

例如：

.div {
  width: 20px;
}                  
                
anime({
  targets: 'div',
  translateX: '3rem', // Will translate the div from '0rem' to '3rem'
  width: '100', // Will be converted to '100px' because the width is '20px' in the CSS
});
From To values

定义动画的开始和结束值。

例如：

anime({
  targets: 'div',
  translateX: [50, 250] // Will start at 50px and end at 250px
});
指定目标值

可以通过函数来分别指定各个目标对象的属性值。可用的函数参数如下：

参数位置 参数名称 描述
1 target 目标元素
2 index 目标元素索引（从0开始）

例如：

anime({
  targets: 'div',
  translateX: function(el, index) {
    return anime.random(50, 100); // Will set a random value from 50 to 100 to each divs
  }
});
                
anime({
  targets: 'path',
  strokeDashoffset: function(el) {
    var pathLength = el.getTotalLength();
    return [pathLength, 0]; // Will use the exact path length for each targeted path elements
  }
});
动画播放控制

可以对动画进行播放、暂停、重播等控制。

名称 参数 描述
.play() 动画参数对象 播放动画
.pause() 无 暂停动画播放
.restart() 动画参数对象 重置动画
.seek() 百分比数或对象如：{time: 1250} 跳转到指定动画帧

例如：

var myAnimation = anime({
  targets: 'div',
  translateX: 100,
  autoplay: false
});

myAnimation.play(); // Manually play the animation
动画运动路径

使用anime.path()方法使元素沿SVG路径进行动画。

名称 描述
translateX 路径X轴
translateY 路径Y轴
rotate 指定角度

例如：

var myPath = anime.path('path');

anime({
  targets: 'div',
  translateX: myPath,
  translateY: myPath,
  rotate: myPath
});
辅助方法

anime.list：返回当前所有的活动动画对象。

anime.list;

anime.speed = x：修改所有动的速度（从0-1）。

anime.speed = .5;

anime.easings：返回动画的easing函数列表。

anime.easings;

anime.remove(target)：从动画中移除一个或多个目标元素。

anime.remove('.item-2');

anime.getValue(target, property)：从一个元素中获取当前的可用值。

anime.getValue('div', 'translateX');

anime.random(x,y)：在两个数之间生成一个随机数。

anime.random(10, 40);

anime.js动画库插件的github地址为：https://github.com/juliangarnier/anime。