插件-ani 动画功能 · 多谷微信平台开发指南

[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); ```