開始制作動(dòng)畫

anime({
targets: 'div',
translateX: [
    { value: 100, duration: 1200 },
    { value: 0, duration: 800 }
],
rotate: '1turn',
backgroundColor: '#FFF',
duration: 2000,
loop: true
});

targets屬性定義了制作動(dòng)畫的元素或js對(duì)象：

• css選擇器 如：'div','#el path';
• DOM元素 如： document.querySelector('.item')
• 節(jié)點(diǎn)列表 如： document.querySelectorAll('.item')
• 對(duì)象
• 數(shù)組 如：['div', '.item', domNode]

動(dòng)畫屬性

1. CSS：

   • opacity 透明度 0~1
   • backgroundColor
   • fontSize
   • borderRadius
   • backgroundColor

2. transforms變換：

   • translateX x軸的值
   • translateY y軸的值
   • retate 旋轉(zhuǎn)
   • scale 大小變換 例：scale:2
   • rotate 旋轉(zhuǎn) 例：rotate:'1turn'（旋轉(zhuǎn)一周）

3. 對(duì)象屬性

   JS:

   var myObject = {
       prop1: 0,
       prop2: '0%'
   }
   var JSobjectProp = anime({
       targets: myObject,
       prop1: 50,
       prop2: '100%',
       easing: 'linear',
       round: 1,
       update: function() {
       var el = document.querySelector('#JSobjectProp span');
       el.innerHTML = JSON.stringify(myObject);
   }
   });
   

   HTML:

   <div id="JSobjectProp">
       <span>{"myProperty":"0"}</span>
   </div>
   

4. DOM屬性

   JS:

   var domAttributes = anime({
       targets: 'input',
       value: 1000, // value變化為1000
       round: 1,
       easing: 'easeInOutExpo'
   });
   

   HTML:

    <input class="text-output" value="0">
   

5. SVG屬性

   <svg width="128" height="128" viewBox="0 0 128 128">
   <polygon points="64 68.73508918222262 8.574 99.9935923731656 63.35810017508558 67.62284396863708 64 3.993592373165592 64.64189982491442 67.62284396863708 119.426 99.9935923731656"></polygon>
   </svg>
   

   anime({
       targets: 'polygon',
       points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
   });
   

屬性參數(shù)

1. duration 持續(xù)時(shí)間

   • 默認(rèn)1000
   • 單位 毫秒
   • 類型number，function(target, index, totalTargets)

2. delay 延遲

   • 默認(rèn)0
   • 單位 毫秒
   • 類型number，function(target, index, totalTargets)

3. easing 動(dòng)畫緩沖（緩動(dòng)函數(shù)）

   • 默認(rèn)'easeOutElastic'
   • 類型 string或自定義Bézier曲線坐標(biāo)（數(shù)組）

詳細(xì)功能見文檔

4. elasticity 彈性

   • 默認(rèn) 500
   • 類型 number，function(target, index, totalTargets)
   • range[0-1000]

5. round 通過舍入值來刪除小數(shù)

   • 默認(rèn) false
   • 類型 number，boolean，function(target, index, totalTargets)
   • 10次冪 例：round:100 兩位小數(shù)

6. loop 是否循環(huán)/循環(huán)次數(shù)

   • 默認(rèn) false
   • number，boolean

7. direction 方向

   • 默認(rèn) 'normal'
   • 類型 'normal', 'reverse' 反向, 'alternate'會(huì)還原

8. autoplay 自動(dòng)播放

   • 默認(rèn) true
   • 類型 boolean

屬性的值

scale: '*=2',  

• 范圍

anime({
  targets: 'div',
  translateX: [100, 200], // Translate X from 100 to 200
  rotate: ['.5turn', '1turn'], // Rotate from 180deg to 360deg
  scale: ['*=2', 1], // Scale from 2 times the original value to 1,
  backgroundColor: ['rgb(255,0,0)', '#FFF'],
  duration: 1500
});

• 基于function的值

anime({
  targets: 'div',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
});

• keyframe 關(guān)鍵幀

translateX: [
    { value: 250, duration: 1000, delay: 500, elasticity: 0 },
    { value: 0, duration: 1000, delay: 500, elasticity: 0 }
  ],

timeline

通過創(chuàng)建時(shí)間軸按順序播放動(dòng)畫

timeline接收相同參數(shù)制作動(dòng)畫：

var myTimeline = anime.timeline({
  direction: 'alternate',
  loop: 3,
  autoplay: false
});

使用.add()給timeline添加動(dòng)畫：

myTimeline
  .add({
    targets: '.square',
    translateX: 250
    })
  .add({
    targets: '.circle',
    translateX: 250
    })

• offset

1. 定義時(shí)間軸上動(dòng)畫的開始時(shí)間。

.add({
    targets: '.circle',
    translateX: 250,
    offset: '-=600' // 在前一個(gè)動(dòng)畫結(jié)束前600ms開始
  })

2. 使用數(shù)字在時(shí)間軸上定義絕對(duì)開始時(shí)間。

.add({
    targets: '.square',
    translateX: 250,
    offset: 1000 // Starts at 1000ms
  })

播放控制

var playPauseAnim = anime({
  targets: 'div',
  translateX: 250,
  direction: 'alternate',
  loop: true,
  autoplay: false // prevent the instance from playing
});
 
playPauseAnim.play(); //  播放
playPauseAnim.pause(); //  暫停
playPauseAnim.restart() // 重新播放
playPauseAnim.reverse() // 反向播放
playPauseAnim.seek(500) // 將動(dòng)畫當(dāng)前時(shí)間設(shè)置為500ms

callback回調(diào)

• 在實(shí)例播放時(shí)，每個(gè)幀都會(huì)調(diào)用update()。

    update: function(anim) {
        console.log(anim.currentTime + 'ms'); // return value in ms.
        console.log(anim.progress + '%'); // return value in %
    }

• begin() 只會(huì)調(diào)用一次在延遲結(jié)束后

    begin: function(anim) {
        console.log(anim.began); // true after 1000ms
    }

• 在實(shí)例播放時(shí)，每個(gè)幀都會(huì)調(diào)用run()。

    run: function(anim) {
        console.log(anim.currentTime);
    }

• complete() 在實(shí)例結(jié)束后只會(huì)調(diào)用一次

    complete: function(anim) {
        console.log(anim.completed);
    }

SVG

• 運(yùn)動(dòng)路徑

  沿著svg路徑旋轉(zhuǎn)和轉(zhuǎn)換DOM元素

// 創(chuàng)建一個(gè)路徑`object`
var path = anime.path('#motionPath path');
 
var motionPath = anime({
  targets: '#motionPath .el',
  translateX: path('x'), // 沿著路徑對(duì)象的x值
  translateY: path('y'), // 沿著路徑對(duì)象的y值
  rotate: path('angle')  // 沿著路徑對(duì)象的角度值
});

• 變形

  為兩個(gè)svg形狀設(shè)置動(dòng)畫

<svg class="shape" width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"></polygon>
</svg>

var svgAttributes = anime({
  targets: '.shape polygon',
  points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});

• 畫線

  根據(jù)svg形狀線條繪制動(dòng)畫

anime({
  targets: '.shape path',
  strokeDashoffset: [anime.setDashoffset, 0]
});

Helpers

• anime.speed=x

  改變所有動(dòng)畫的速度，取值0~1

  例：anime.speed=.5

• anime.running

  返回所有活動(dòng)Anime實(shí)例的數(shù)組

• anime.remove(target)

  從動(dòng)畫中刪除一個(gè)或多個(gè)元素

  例：anime.remove('.item2')

• anime.getValue

  從元素中獲取當(dāng)前有效值

  例：anime.getValue('div','reanslateX')

• anime.path(pathEl)

  為運(yùn)動(dòng)路徑動(dòng)畫創(chuàng)建路徑功能，接收DOM元素或CSS選擇器

• anime.setDashoffset(pathEl)

  返回總路徑的長(zhǎng)度

  例：

  anime({
  targets: '.shape path',
  strokeDashoffset: [anime.pathDashoffset, 0]
  });
  

• anime.easings

  返回所有已設(shè)置easing function數(shù)組

• anime.random

  返回兩個(gè)數(shù)字之間的一個(gè)隨機(jī)數(shù)

  例：anime.random(1,5)