（轉）第05節：Fabric.js的動畫設置
阿新 • • 發佈：2017-07-24
結束 左移 函數 制作 pan 三個參數 綁定 逆時針 包括
凡是出色的Canvas庫都少不了制作動畫的方法，Fabric.js也不例外，它有著編寫簡單且功能強大的動畫助手，這就是animate( )方法。
animate主要使用代碼如下：
rect.animate(‘angle‘,360,{
onChange:canvas.renderAll.bind(canvas)
})
意思是設置了rect的動畫是旋轉到360度，onChange是動畫的回調函數，可以綁定事件，那這裏就是當canvas渲染完成時自動發生動畫。
animate接收三個參數：
第一個參數是動畫的屬性，可以是任何用set( )方法設定的值；
第二個參數是發生變化的結束值（例如正方形從0度旋轉到360度）；
第三個參數是設置動畫的細節屬性，包括動畫時間，回調函數，緩動效果，等等。
我們現在對動畫有了基本的了解，我們先作一個簡單的例子，讓一個正方形旋轉360度。
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fabric.js動畫方法</title> <script type="text/javascript" src="../fabric.js"></script> </head> <body> <canvas width="800" height="800" id="canvas"></canvas> <script type="text/javascript" src="./script.js"></script> </body> </html>
JS：
var canvas = new fabric.Canvas(‘canvas‘); var rect = new fabric.Rect({ top:100, left:100, height:100, width:100, fill:‘red‘, }); rect.set(‘angle‘,0);//設置正方形的初始角度是0度 //下邊設置了動畫屬性，讓角度旋轉到360度 rect.animate(‘angle‘,360,{ onChange:canvas.renderAll.bind(canvas) }) canvas.add(rect);
animate( )方法還給我們提供了相對值的辦法：
例如，你想讓方形相對於現在的位置向左移動100px，你可以這樣寫代碼：
t.animate(‘left‘, ‘+=100‘, { onChange: canvas.renderAll.bind(canvas) });
當然，方形相對於現在的角度逆時針旋轉5度，你可以這樣寫代碼：
rect.animate(‘angle‘, ‘-=5‘, { onChange: canvas.renderAll.bind(canvas) });
您還可以設置動畫的持續時間和緩動效果，這些需要在animate( )方法的第三個參數中設置。例如：
rect.animate(‘left‘, 500, { onChange: canvas.renderAll.bind(canvas), duration: 1000, easing: fabric.util.ease.easeOutBounce });
（轉）第05節：Fabric.js的動畫設置