使用 FabricJS 為 Polygon 物件新增收縮和展開動畫
- WBOY轉載
- 2023-09-23 22:29:021336瀏覽
我們可以透過建立fabric.Polygon的實例來建立一個Polygon物件。多邊形物件的特徵可以是由一組連接的直線段組成的任何閉合形狀。由於它是 FabricJS 的基本元素之一，我們也可以透過應用角度、不透明度等屬性輕鬆自訂它。為了新增收縮和展開動畫，我們可以使用 scaleX 和 scaleY 屬性與 animate 方法結合使用。
文法
animate(property: String | Object, value: Number | Object): fabric.Object | fabric.AnimationContext | Array.<fabric.AnimationContext>
參數
property - 該屬性接受一個String或Object#值來決定我們想要哪些屬性製作動畫。
value - 此屬性接受 Number 或 Object 值，用於決定要設定動畫的值特性。
選項鍵
scaleX：此屬性接受 Number 值。分配的值決定水平物件比例因子。它的預設值為 1。
scaleY：此屬性接受 Number 值。分配的值決定垂直物件比例因子。它的預設值為 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>
範例 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>
結論
在本教學中，我們使用兩個簡單的範例來示範如何使用 FabricJS 將收縮和展開動畫新增至 Polygon 物件
以上是使用 FabricJS 為 Polygon 物件新增收縮和展開動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除