anime.js 簡單入門教程

anime.js是一個強大的用來制作動畫的javascript庫，雖然功能沒有GASP（greensock）強大，但勝在它足夠輕便，gzip壓縮完只有9kb左右，麻雀雖小，卻五臟俱全。

下面就來看看如何使用anime.js來編寫動畫效果。

先在github下載好anime.js，然后在頁面引入它。

彈球效果

引入anime.js后，就可以開始來編寫動畫效果。

首先來編寫一個彈球的動畫效果，先來使用anime.js提供的方法來編寫好基本的結構：

var bouncingBall = anime({

  //code here

});

然后在里面使用anime.js提供的對應的方法來實現動畫效果，比如要操縱的dom元素，動畫的時間以及緩動曲線等等。

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});

下面來一一解釋下各個屬性的含義。

targets屬性是用來指定要運動的元素，可以使用類似CSS選擇器來選擇元素，或者是下面幾種方法來選擇元素：

DOM選擇方法document.querySelector('.ball')或者是document.querySelectorAll('.ball')方法;

js數組的方式['.ball']

js對象的方式{elementName: 'ball'}

如果你要操作的元素有多個值或者是要操作多個元素，可以這樣做：

var bouncingBall = anime({
  targets: ['.ball', '.kick'],
  //rest of the code
});

在上面代碼中，第二個屬性是translateY，也就是要操作元素做出變化的屬性，和CSS中操作元素的方法非常相似。作為一個經常和動畫打交道的前端開發人員，對於使用transform屬性來提高動畫的性能想必是非常清楚的，同樣在使用animejs來編寫動畫效果的時候，特別涉及操作元素位置的時候也建議使用transform等屬性來操作來提高動畫性能。

第三個屬性是duration，即動畫的運行時間。如果要延遲執行動畫，可以使用delay這個參數來指定動畫延遲時間。

loop屬性是用來定義動畫是否循環運行。默認值是false，即動畫只運行一次。當然也可以指定具體的數字來定義動畫運行的次數或者是定義為true一只無限循環運行下次。

direction屬性定義是否應該輪流反向播放動畫。有三個值default、alternate和reverse。alternate表示動畫應該輪流反向播放。reverse表示反方向運行。

最后一個屬性是easing，它是用來定義動畫運行速度曲線的，與CSS3中的動畫曲線一樣。

可以使用下面的方法來看看anime中有哪些速度曲線：

console.log(anime.easings);

現在再來完善下彈球的動畫效果。

在上面的代碼中，實現的效果只是球的上下彈起的效果。在真實世界中，當一個球掉在地上的時候，球會受到自身的壓力從而產生一個變形的效果，可以使用transform中的scaleX來達到這個動畫效果。

下面是具體代碼：

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  //new code
  scaleX: {
    value: 1.05,  //代表縮放的值
    duration: 150,  // 運行時間
    delay: 268   //延遲多久執行
  }
});

可以去這里看看最終運行的效果。

demo

使用開發者工具查看可以看到實際的動畫效果就是通過改變元素的CSS屬性來實現的。

同時操作兩個元素來編寫動畫效果

下面通過一個踢球的動畫效果，來看看anime.js是如何來操作兩個元素來實現動畫效果的。

var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  easing: 'easeInCubic',
  complete: function() {
    anime({
      targets: '.ball',
      translateX: '70vw',
      scale: 1.5,
      easing: 'easeOutBounce',
      delay: 150
    });
  }
});

可以看到當踢完球的動作后，球才動起來。這里用的是complete這個回調方法，當上一個動畫完成后再執行下一個動畫。

當然像這樣動畫效果使用CSS實現起來也是非常簡單的，CSS版本

動畫控制

anime.js還提供了諸如play、pause和restart方法來控制動畫的執行、暫停和重新運行動畫。也可以使用seek()方法來跳幀運行動畫。

下面通過按鈕分別來控制踢球和球運動的動畫效果。

//Animating the kick
var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: 'easeInCubic',
  autoplay: false
});

//Animating the ball
var movingBall = anime({
  targets: '.ball',
  translateX: '70vw',
  scale: 1.5,
  easing: 'easeOutBounce',
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Playing the animation 
when clicking the play button */
btnPlay.addEventListener('click', function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});

這里有兩點需要注意的是：

為來在頁面加載完的時候，不運行動畫，需要設置autoplay的值為false；

只需要把對應的動畫方法和play()綁定就可以用按鈕來控制動畫的運行和暫停了。

demo

使用anime.js來操作SVG

最后來看看使用anime.js來操作SVG。

在開始之前，把每一個SVG中的path元素都賦予一個CSS類，這樣方便使用animejs來操作。

比如，要實現一個眼睛的動畫效果：

var movingEyes = anime({
  targets: ['.inner-left-eye', '.inner-right-eye'],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});

上面的代碼通過來改變circle元素cy屬性的值來使貓的眼睛動起來。

在上面的代碼中的delay這個屬性，是使用一個函數來返回值的，這樣可以更靈活的控制動畫的延遲時間。通過元素的索引值來返回不同的延遲的時間。如果元素的索引值是0即左邊的眼睛的延遲時間是300毫秒，如果是2即右邊的眼睛延遲500毫秒來運行動畫。

上面通過兩個簡單的實例介紹了anime.js的一個使用方法，更多的使用方法就要靠你的想象力了。

更多的實例可以去這個集合看看。

在Codrops上也有好多精彩的實例：

Codrops.net demo: Inspiration for Letter Effects

Codrops.net Demo: Background Segment Effect

Codrops.net Demo: Fancy SVG Letter Animation

Codrops.net Demo: Multi-Layout Slideshow

Codrops.net Demo: Item Reveal Animations with SVG

本文主要是結合Animating the DOM with Anime.js這篇文章寫成，有疏漏或者理解不到位的地方，還請多多指教！

原文地址：https://juejin.im/entry/58e9e48d61ff4b006b513f51