anime.js-强大的Javascript动画库插件

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动画库插件的可用配置参数有：

应用举例

指定动画参数

参数可以使用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时间函数值

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

例如：

anime({
  targets: 'div',
  translateX: '13.5rem',
  scale: [.75, .9],
  delay: function(el, index) {
    return index * 80;
  },
  direction: 'alternate',
  loop: true
});                  
                

有效的动画属性列表

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

单个属性值

定义结束动画的值。

例如：

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

指定目标值

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

例如：

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

动画播放控制

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

例如：

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

myAnimation.play(); // Manually play the animation                  
                

动画运动路径

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

例如：

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。