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