anime.js 學習筆記

官網演示/文檔

anime.js 是一個簡便的JS動畫庫，用法簡單並且適用範圍廣，涵蓋CSS，DOM，SVG還有JS的對象，各類帶數值屬性的東西均可以動起來。

實際演示和代碼，官網寫得很詳細清楚了，這裏記錄一下一些經常使用的東西方便翻看，不做具體演示了。

用法：

1，官網下載anime.js文件，直接引入

2，npm install animejs  進行安裝，而後在本身的項目JS中引入

 

開始：

var example = anime({
  targets: el,              //要進行動畫的目標
  translateX: 250      //要進行動畫的屬性
});

 

參數:

targets: 要進行動畫的目標

CSS SELECTOR（css選擇器）	DOM NODE（dom節點）
NODE LIST（節點數組）	JAVASCRIPT OBJECT（js對象）
JAVASCRIPT ARRAY(js數組)

 

 

 

 

 

 

 

---

 

 

要進行動畫的屬性

各類css屬性 (left,top,color,background...)	css3的變形屬性（translate,scale,rotate...）
js對象的數值	dom的各類屬性（input的value值，img的widht,height...）
SVG的各類屬性

 

 

 

 

 

 

 

 

---

 

 

上面就是一個anime動畫最基本的參數,有這兩個就能動起來，其它還有一些參數，往下看：

 

 

 

---

 

參數	值	默認
duratiom:動畫時間	number	1000
delay:延遲時間	number	0
easing:動畫的速度曲線，緩動	特定的字符串 (控制檯日誌anime.easings能夠得到完整的功能列表)	'easeOutElastic'
direction:方向	'normal'（正常）、'reverse'(反方向)、alternate'（回放）	'normal'
loop:循環	number（次數） 、boolean（爲true時表明無限循環）	false
elasticity:彈性	number(越高越強)	400
autoplay:自動播放	boolean	true
round	number（不知道有沒其餘做用，暫時知道的是，能夠做爲數值的間隔值，就是從1遞增到100的動畫，設爲1的話就是每次以1遞增，2就是以2遞增，不設的話會保留不少位小數）	0?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

 有多個動畫屬性時，也能夠各自設置參數:

 

var specificPropertyParameters = anime({
  targets: '#specificPropertyParameters .el',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: 360,
    duration: 1800,
    easing: 'easeInOutSine'
  },
  scale: {
    value: 2,
    duration: 1600,
    delay: 800,
    easing: 'easeInOutQuart'
  },
  delay: 250 // All properties except 'scale' inherit 250ms delay
});

　

---

 

　API：

時間線：timeline

能夠鏈接多個動畫，完結一個動畫以後接着進行下一個動畫

 

offset:時間間隔

number

 

 

 

var basicTimeline = anime.timeline();    //基本的時間線,新建後經過add增長動畫

basicTimeline
  .add({
    targets: '#basicTimeline .square.el',
    translateX: 250,
    easing: 'easeOutExpo'
  })
  .add({
    targets: '#basicTimeline .circle.el',
    translateX: 250,
    easing: 'easeOutExpo'
  })
  .add({
    targets: '#basicTimeline .triangle.el',
    translateX: 250,
    easing: 'easeOutExpo'
  });

var timelineParameters = anime.timeline({        //能夠在新建的時候把多個動畫通用的參數抽離出來，add裏寫動畫的屬性
  direction: 'alternate',
  loop: true
});

timelineParameters
  .add({
    targets: '#timelineParameters .square.el',
    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],
    translateY: [ { value: 30 }, { value: 60 }, { value: 60 } ],
    duration: 3000
  })
  .add({
    targets: '#timelineParameters .circle.el',
    translateX: [ { value: 80 }, { value: 160 }, { value: 250 } ],
    translateY: [ { value: 30 }, { value: -30 }, { value: -30 } ],
    duration: 3000,
    offset: 200
  })
  .add({
    targets: '#timelineParameters .triangle.el',
    translateX: [ { value: 80 }, { value: 250 } ],
    translateY: [ { value: -60 }, { value: -30 }, { value: -30 } ],
    duration: 3000,
    offset: 400
  });

　

var TLParamsInheritance = anime.timeline({             //參數繼承,再同一個目標上創建時間線，連接多段動畫
  targets: '#TLParamsInheritance .el',
  delay: function(el, i) { return i * 200 },
  duration: 500,
  easing: 'easeOutExpo',
  direction: 'alternate',
  loop: true
});

TLParamsInheritance
  .add({
    translateX: 250,
  })
  .add({
    opacity: .5,
    translateX: 250,
    scale: 2,
  })
  .add({
    translateX: 0,
    scale: 1
  });

 

---

 

動畫狀態　

play()	播放動畫
pause()	暫停動畫
restart()	從新開始動畫
reverse()	反向播放動畫
seek()	在指定時間播放或暫停，要傳入時間做爲參數

 

 

 

 

 

 

 

 

 

 

 

 

 

 

P.S.時間線也是能夠進行暫停、播放的

 

---

 

  

回調函數

begin: function(anim) {}	動畫開始時
update: function(anim) {}	數值更新時
run: function(anim) {}	動畫進行時（跟update差很少，但有些動畫有緩動， 雖然數值已經更新完了，但動畫仍是在進行中的）
complete: function(anim) {}	動畫結束時

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

P.S anim 這個參數返回的是當前動畫的實例，裏面的值根據具體場景使用，

例如：

anim.progress  表示動畫的進度

anim.began   判斷動畫是否已經開始

anim.completed   判斷動畫是否已經結束

 

---

 

promise

var finishedLogEl = document.querySelector('#finishedPromise .finished-log');

var finishedPromise = anime({
  targets: '#promises .el',
  translateX: 250,
  delay: 1000
});

var promise = finishedPromise.finished.then(logFinished);

function logFinished() {
  finishedLogEl.value = 'Promise resolved';

  // Rebind the promise, since this demo can be looped.
  setTimeout(function() {
    promise = finishedPromise.finished.then(logFinished);
  });
}

finishedPromise.update = function(anim) {
  if (!anim.completed) {
    finishedLogEl.value = '';
  }
}

　　

---

 

還有一些關於SVG的用法，不太懂就不看了。

 

使用過程當中的一些注意點補充：

1，動畫屬性的值能夠接受特殊單位：

例如 ：left : 200  , left:‘2rem’（通常不許）  , left:function(){ return 200 }  ,   left: ‘+=1’   ...

動畫屬性的值能夠以數組傳入：

 backgroundColor: [                     //在一段動畫之中背景顏色變化了3次
    {value: '#FFF'}, // Or #FFFFFF {value: 'rgb(255, 0, 0)'}, {value: 'hsl(100, 60%, 60%)'} ]

2，這個值得注意一下了，進行動畫的目標元素儘可能不要設置transition 屬性，會對anime動畫有影響。

 

 

 

 

 

好吧，開始作點炫酷的動畫吧！