
我们可以通过创建fabric.Polygon的实例来创建一个Polygon对象。多边形对象的特征可以是由一组连接的直线段组成的任何闭合形状。由于它是 FabricJS 的基本元素之一,我们还可以通过应用角度、不透明度等属性轻松自定义它。为了添加收缩和展开动画,我们可以使用 scaleX 和 scaleY 属性与 animate 方法结合使用。
语法
animate(property: String | Object, value: Number | Object): fabric.Object | fabric.AnimationContext | Array.
参数
property - 该属性接受一个String或Object值来确定我们想要哪些属性制作动画。
value - 此属性接受 Number 或 Object 值,用于确定要设置动画的值特性。
选项键
scaleX:此属性接受 Number 值。分配的值决定水平对象比例因子。它的默认值为 1。
scaleY:此属性接受 Number 值。分配的值决定垂直对象比例因子。它的默认值为 1。
示例1:为多边形添加收缩动画
让我们看一个代码示例,看看如何使用 animate 方法添加收缩动画。我们向scaleX和scaleY属性传递一个值0.5,这使得多边形从水平和垂直方向都是原始大小的一半。
Adding shrink animation to the polygon
You can see that shrink animation has been added to the polygon
示例 2:向多边形添加展开动画
在此示例中,我们将了解如何使用 animate 方法添加 expand 动画。由于我们向scaleX和scaleY属性传递的值为1.5,因此多边形对象将在水平和垂直方向上缩放1.5倍。
Adding expand animation to the polygon
You can see that expand animation has been added to the polygon
结论
在本教程中,我们使用两个简单的示例来演示如何使用 FabricJS 将收缩和展开动画添加到 Polygon 对象










