[TOC] # 插件-ani 动画功能 这个功能,非常强大- -.是基于css3的一套js动画库,可以和CSS3属性，SVG，DOM元素和JS对象一起工作，制作出各种高性能，平滑过渡的动画效果。 ## 使用方法 ### HTML结构 **以动画两个div元素为例，HTML结构如下：** ```html <article>   <div class="blue"></div>   <div class="green"></div> </article> ``` ### 初始化插件 **通过v.ani()方法来构造一个对象实例，以json对象的方式传入需要的参数：** ```html var myAnimation = v.ani({   targets: ['.blue', '.green'],   translateX: '13rem',   rotate: 180,   borderRadius: 8,   duration: 2000,   loop: true }); ``` ## 配置参数 |参数 | 默认值 | 取值| |--|--|--| |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 例如: ```javascript v.ani({   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开始计数）| 例如: ```javascript v.ani({   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|使用可能的默认单位。| 例如: ```javascript v.ani({   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 定义动画的开始和结束值。 ```javascript anime({   targets: 'div',   translateX: [50, 250] // Will start at 50px and end at 250px }); ``` ### 指定目标值 可以通过函数来分别指定各个目标对象的属性值。可用的函数参数如下： |参数位置|参数名称|描述| |--|--|--| |1|target|目标元素| |2|index|目标元素索引（从0开始）| 例如： ```javascript v.ani({ targets: 'div', translateX: function(el, index) { return v.ani.random(50, 100); // Will set a random value from 50 to 100 to each divs } }); ``` ```javascript v.ani({ 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}|跳转到指定动画帧| 例如： ```javascript var myAnimation = v.ani({ targets: 'div', translateX: 100, autoplay: false }); ``` myAnimation.play(); // Manually play the animation ### 动画运动路径 使用`v.ani.path()`方法使元素沿SVG路径进行动画。 |名称|描述| |--|--| |translateX|路径X轴| |translateY|路径Y轴| |rotate|指定角度| 例如： ```javascript var myPath = v.ani.path('path'); v.ani({ targets: 'div', translateX: myPath, translateY: myPath, rotate: myPath }); ``` ### 辅助方法 v.ani.list：返回当前所有的活动动画对象。 ```javascript v.ani.list; ``` v.ani.speed = x：修改所有动的速度（从0-1）。 ```javascript v.ani.speed = .5; ``` v.ani.easings：返回动画的easing函数列表。 ```javascript v.ani.easings ``` v.ani.remove(target)：从动画中移除一个或多个目标元素。 ```javascript v.ani.remove('.item-2'); ``` v.ani.getValue(target, property)：从一个元素中获取当前的可用值。 ```javascript v.ani.getValue('div', 'translateX'); ``` v.ani.random(x,y)：在两个数之间生成一个随机数。 ```javascript v.ani.random(10, 40); ```