標籤：寫代碼 meta 正方形 blog class ati 細節 bounce code
凡是出色的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的動畫設定
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
