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