FabricJS を使用して Polygon オブジェクトに縮小および拡張アニメーションを追加する

fabric.Polygon のインスタンスを作成することで、Polygon オブジェクトを作成できます。ポリゴン オブジェクトは、接続された直線セグメントのセットで構成される閉じた形状として特徴付けることができます。これは FabricJS の基本要素の 1 つであるため、角度や不透明度などのプロパティを適用することで簡単にカスタマイズすることもできます。縮小アニメーションと展開アニメーションを追加するには、scaleX プロパティと scaleY プロパティを animate メソッドと組み合わせて使用​​します。

＃＃＃文法＃＃＃ リーリー

パラメータ

• property - このプロパティは、String または Object 値を受け入れて、アニメーション化するプロパティを決定します。

• value - このプロパティは、アニメーション化する value プロパティを決定する Number または Object 値を受け入れます。

オプションキー

• scaleXX: このプロパティは Number 値を受け入れます。割り当てられた値によって、オブジェクトの水平スケール係数が決まります。デフォルト値は 1 です。

• scaleY: このプロパティは Number 値を受け入れます。割り当てられた値によって、垂直方向のオブジェクトのスケール係数が決まります。デフォルト値は 1 です。

例 1: ポリゴンに縮小アニメーションを追加する

animate メソッドを使用して縮小アニメーションを追加する方法をコード例で見てみましょう。値 0.5 をscaleX プロパティとscaleY プロパティに渡します。これにより、ポリゴンは水平方向と垂直方向の両方で元のサイズの半分になります。

リーリー

例 2: ポリゴンに展開アニメーションを追加する

この例では、

animate

メソッドを使用して expand アニメーションを追加する方法を説明します。 scaleX プロパティとscaleY プロパティに 1.5 の値を渡したので、ポリゴン オブジェクトは水平方向と垂直方向に 1.5 倍に拡大縮小されます。 リーリー ＃＃＃結論は＃＃＃ このチュートリアルでは、2 つの簡単な例を使用して、FabricJS を使用してポリゴン オブジェクトに縮小および展開アニメーションを追加する方法を示します。

以上がFabricJS を使用して Polygon オブジェクトに縮小および拡張アニメーションを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。