（轉）第05節：Fabric.js的動畫設置

時間 2019-11-11

標籤 fabric.js fabric 動畫設置欄目 JavaScript 简体版

原文原文鏈接

凡是出色的Canvas庫都少不了製做動畫的方法，Fabric.js也不例外，它有着編寫簡單且功能強大的動畫助手，這就是animate( )方法。javascript

animate主要使用代碼以下：html

rect.animate('angle',360,{
    onChange:canvas.renderAll.bind(canvas)
})

意思是設置了rect的動畫是旋轉到360度，onChange是動畫的回調函數，能夠綁定事件，那這裏就是當canvas渲染完成時自動發生動畫。java

animate接收三個參數：canvas

第一個參數是動畫的屬性，能夠是任何用set( )方法設定的值；
第二個參數是發生變化的結束值（例如正方形從0度旋轉到360度）；
第三個參數是設置動畫的細節屬性，包括動畫時間，回調函數，緩動效果，等等。函數

咱們如今對動畫有了基本的瞭解，咱們先做一個簡單的例子，讓一個正方形旋轉360度。動畫

HTML：spa

<!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：code

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( )方法還給咱們提供了相對值的辦法：htm

例如，你想讓方形相對於如今的位置向左移動100px，你能夠這樣寫代碼：blog

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
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。