animejs基本使用

文章

• • • 安裝
    • 引入
    • 使用
    • options動畫參數
    • 更多

安裝

npm install animejs 
           

引入

使用

例: 對一個

id為 example 的 dom

高度進行從0 到 100的動畫

anime({
        targets: '#example',
        height: [0, 100],
        duration: 300,
        easing: "easeInOutQuad"
      });
           

options動畫參數

名稱	預設值	說明
targets	null	作用動畫的目标。可以是任意的選擇器例： targets:'.example' 或 targets:'#example1' ，也可以是數組字元多個對象 [‘.example','#example1']
duration	1000	動畫完成所需時間
delay	延時，經過多長時間才開始動畫
easing	easeOutElastic	時間曲線，即一個動畫以什麼樣的速率去完成、勻速、非勻速，彈跳甚至自定義等等。具體效果：傳送門或傳送門
loop	false	是否重複動畫
css屬性	-	各類css屬性 如：backgroundColor，height，widht、top等等
CSS的transforms屬性動畫	translateX 、translateY、translateZ、rotate 、rotateX、scale等等。。

…

更多

更多用法 到animejs[中文]、animejs英文