我們可以通過創(chuàng)建fabric.Polygon的實(shí)例來創(chuàng)建一個Polygon對象。多邊形對象的特征可以是由一組連接的直線段組成的任何閉合形狀。由于它是 FabricJS 的基本元素之一，我們還可以通過應(yīng)用角度、不透明度等屬性輕松自定義它。為了添加收縮和展開動畫，我們可以使用 scaleX 和 scaleY 屬性與 animate 方法結(jié)合使用。
語法
animate(property: String | Object, value: Number | Object): fabric.Object | fabric.AnimationContext | Array.<fabric.AnimationContext>
登錄后復(fù)制
參數(shù)
property – 該屬性接受一個String或Object值來確定我們想要哪些屬性制作動畫。
value – 此屬性接受 Number 或 Object 值，用于確定要設(shè)置動畫的值特性。
選項鍵
scaleX：此屬性接受 Number 值。分配的值決定水平對象比例因子。它的默認(rèn)值為 1。
scaleY：此屬性接受 Number 值。分配的值決定垂直對象比例因子。它的默認(rèn)值為 1。
示例1：為多邊形添加收縮動畫
讓我們看一個代碼示例，看看如何使用 animate 方法添加收縮動畫。我們向scaleX和scaleY屬性傳遞一個值0.5，這使得多邊形從水平和垂直方向都是原始大小的一半。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Adding shrink animation to the polygon</h2>
<p>You can see that shrink animation has been added to the polygon</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon object
var polygon = new fabric.Polygon(
[
{ x: 60, y: 0 },
{ x: 60, y: 60 },
{ x: 0, y: 60 },
{ x: 0, y: 0 },
],
{
fill: "#ffe4e1",
stroke: "green",
strokeWidth: 5,
top: 90,
left: 100,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the animate method and passing scaleX property
polygon.animate("scaleX", "0.5", {
onChange: canvas.renderAll.bind(canvas),
easing: fabric.util.ease.easeInCubic,
duration: 1000,
});
// Using the animate method and passing scaleY property
polygon.animate("scaleY", "0.5", {
onChange: canvas.renderAll.bind(canvas),
easing: fabric.util.ease.easeInCubic,
duration: 1000,
});
</script>
</body>
</html>
登錄后復(fù)制
示例 2：向多邊形添加展開動畫
在此示例中，我們將了解如何使用 animate 方法添加 expand 動畫。由于我們向scaleX和scaleY屬性傳遞的值為1.5，因此多邊形對象將在水平和垂直方向上縮放1.5倍。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>Adding expand animation to the polygon</h2>
<p>You can see that expand animation has been added to the polygon</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a polygon object
var polygon = new fabric.Polygon(
[
{ x: 60, y: 0 },
{ x: 60, y: 60 },
{ x: 0, y: 60 },
{ x: 0, y: 0 },
],
{
fill: "#ffe4e1",
stroke: "green",
strokeWidth: 5,
top: 90,
left: 100,
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using the animate method and passing scaleX property
polygon.animate("scaleX", "1.5", {
onChange: canvas.renderAll.bind(canvas),
easing: fabric.util.ease.easeInCubic,
duration: 1000,
});
// Using the animate method and passing scaleY property
polygon.animate("scaleY", "1.5", {
onChange: canvas.renderAll.bind(canvas),
easing: fabric.util.ease.easeInCubic,
duration: 1000,
});
</script>
</body>
</html>
登錄后復(fù)制
結(jié)論
在本教程中，我們使用兩個簡單的示例來演示如何使用 FabricJS 將收縮和展開動畫添加到 Polygon 對象
以上就是使用 FabricJS 向 Polygon 對象添加收縮和展開動畫的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
