本期介紹一個前端動畫插件anime.js，anime.js 是一款功能強大的 Javascript 動畫庫插件，可以和 CSS3 屬性，SVG，DOM 元素和 JS 對象一起工作，製作出各種高性能，平滑過渡的動畫效果。
安裝npm install animejs
bower install animejs在頁面中引入 anime.min.js 文件。
<script type="text/javascript" src="js/anime.min.js"></script>
HTML 結構# 初始化插件通過anime() 方法來構造一個對象實例，以json 對象的方式傳入需要的參數：var myAnimation = anime({
targets: ['.blue'],
translateX: '13rem',
rotate: 180,
borderRadius: 8,
duration: 2000,
loop: true
});
配置參數參數使用教程動畫的目標對象（targets）CSS選擇器「不可使用偽元素」
anime({
targets: '.css-selector-demo .el',
translateX: 250
});
DOM元素 /元素序列使用DOM節點或節點的集合作為動畫目標
var elements = document.querySelectorAll('.dom-node-demo .el');
anime({
targets: elements,
translateX: 270
});
JAVASCRIPT對象以JavaScript對象作為動畫目標，這個對象必須含有至少一個數字屬性。
var logEl = document.querySelector('.battery-log');
var battery = {
charged: '0%',
cycles: 120
}
anime({
targets: battery,
charged: '100%',
cycles: 130,
round: 1,
easing: 'linear',
update: function() {
logEl.innerHTML = JSON.stringify(battery);
}
});
數組以數組作為動畫目標。
var el = document.querySelector('.mixed-array-demo .el-01');
anime({
targets: [el, '.mixed-array-demo .el-02', '.mixed-array-demo .el-03'],
translateX: 250
});
可動畫的目標屬性「大多數CSS屬性都會導致布局更改或重新繪製，並會導致動畫不穩定。因此儘可能優先考慮opacity和CSS transforms。」
所有的transforms屬性
包含數值的任何Object屬性都可以設置動畫。
任何包含數值的DOM屬性都可以設置動畫。
與任何其他DOM屬性一樣，包含至少一個數值的所有SVG屬性都可以設置動畫。
動畫基礎參數定義動畫的持續時間（以毫秒為單位）。
定義動畫的延遲（以毫秒為單位）。
在動畫結束時以毫秒為單位添加一些額外時間。
定義動畫的時間曲線。
將值向上捨入為x小數。
使用Object作為值為動畫的每個屬性定義特定參數。未在Object中指定的其他屬性繼承自主動畫。
為動畫的每個目標和屬性設置不同的值。function 接受三個參數:
ARGUMENTSINFOStarget當前動畫目標元素index動畫目標的索引targetsLength總動畫目標數anime({
targets: '.function-based-params-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
delay: function(el, i, l) {
return i * 100;
},
endDelay: function(el, i, l) {
return (l - i) * 100;
}
});
方向和循環定義動畫的方向。
ACCEPTSINFOSnormal正方向動畫reverse反方向動畫alternate往返定義動畫的往複次數。
ACCEPTSINFOSNumber循環次數true無限循環定義動畫是否應自動啟動。
ACCEPTSINFOStrue開啟自動播放false關閉自動播放動畫賦值方式如果原始值具有單位，則它將自動添加到動畫值中。
強制動畫使用某個單位並自動轉換初始目標值。
添加，減去或乘以原始值。
ACCEPTSEFFECTEXAMPLE'+='Add'+=100''-='Substract'-=2turn''*='Multiply'*=10'anime.js 接受並轉換Haxadecimal(十六進位)，RGB，RGBA，HSL和HSLA顏色值。
強制動畫以指定值開始。
為動畫的每個目標和屬性設置不同的值。
ARGUMENTSINFOStarget當前動畫目標元素index動畫目標的索引targetsLength總動畫目標數關鍵幀(KEYFRAMES)動畫關鍵幀是使用keyframes屬性中的數組定義的。
「如果關鍵幀內沒有指定duration（持續時間），則每個關鍵幀的持續時間將等於動畫總持續時間除以關鍵幀數。」
anime({
targets: '.animation-keyframes-demo .el',
keyframes: [
{translateY: -40},
{translateX: 250},
{translateY: 40},
{translateX: 0},
{translateY: 0}
],
duration: 4000,
easing: 'easeOutElastic(1, .8)',
loop: true
});與動畫關鍵幀類似，屬性關鍵幀是使用屬性對象的Array定義的。屬性關鍵幀允許重疊動畫，因為每個屬性都有自己的關鍵幀數組。
動畫控制播放暫停的動畫，如果autoplay 參數設置為false，則啟動動畫。
animation.play();
animation.pause();從動畫的初始值重新開始動畫。
animation.restart();反轉動畫的方向。
animation.reverse();跳轉到特定時間（以毫秒為單位）。
animation.seek(timeStamp);timeline.play();
timeline.pause();
timeline.restart();
timeline.seek(timeStamp);
時間曲線(EASING)不對動畫應用任何緩動時間曲線。對於opacity和colors過渡很有用。
easing: 'linear'easing: 'easeInOutSine'使用您自己的自定義立方Bézier曲線cubicBezier(x1, y1, x2, y2).
easing: 'cubicBezier(.5, .05, .1, .3)'類似於彈簧效果
easing: 'spring(mass, stiffness, damping, velocity)'彈跳效果
easing: 'easeOutElastic(amplitude, period)'easing: 'steps(numberOfSteps)'通過基於function based value返回自定義時間曲線函數。
easing: function() { return function(time) { return time * i} }
ANIME.JS方法從正在運行的動畫或時間軸中刪除目標。targets參數接受與targets 屬性相同的值。
anime.remove(targets)返回元素的原始值。
anime.get(target, propertyName, unit);立即將值設置為指定的目標。
anime.set(targets, {property: value});返回特定範圍內的隨機整數。anime.random(minValue, maxValue);
使用外部requestAnimationFrame循環播放動畫。「不要忘記將autoplay參數設置為false以防止anime.js內置RAF循環啟動。」
animation.tick(time)返回當前正在運行的所有活動anime.js實例的Array。
anime.running「感謝閱讀，詳細文檔請閱讀anime.js官網文檔」