Mojs アニメーション ライブラリの入門: Shapes モジュールを探索する

前のチュートリアルでは、mojs を使用して Web ページ上のさまざまな HTML 要素をアニメーション化しました。このライブラリは主に、正方形や円のように見える div 要素をアニメーション化するために使用します。ただし、Html モジュールを使用して、画像やタイトルなどのさまざまな要素をアニメーション化することができます。 mojs を使用して基本的なシェイプをアニメーション化する場合は、おそらくライブラリの Shape モジュールを使用する必要があります。

Shape モジュールを使用すると、SVG を使用して DOM で基本的な形状を作成できます。作成するシェイプのタイプを指定するだけで、残りは mojs が処理します。このモジュールでは、作成したさまざまな形状をアニメーション化することもできます。

このチュートリアルでは、Shape モジュールの基本と、それを使用してさまざまな形状を作成およびアニメーション化する方法について説明します。

Mojs でシェイプを作成する

さまざまなシェイプを作成するには、mojs Shape オブジェクトをインスタンス化する必要があります。オブジェクトは、作成する形状の色、サイズ、角度などを制御するために使用できるさまざまなパラメータを受け入れます。

デフォルトでは、作成する図形はすべて、ドキュメント本文を親として使用します。 parent 属性を使用して、他の要素を親として指定できます。 className 属性を使用して、作成した任意のシェイプにクラスを割り当てることもできます。このプロパティをスキップすると、ライブラリはデフォルトのクラスを割り当てません。

Mojs には 8 つの異なる形状が組み込まれているため、shape プロパティの値を設定することで直接作成できます。値を circle に設定すると円を作成でき、rect に設定すると四角形を作成でき、polygon に設定すると多角形を作成できます。 shape の値を lines に設定して直線を描くこともできます。 shape 値が cross の場合、ライブラリは 2 本の垂直線を描画します; shape 値が equal の場合。同様に、プロパティ値を zigzag に設定すると、ジグザグ線を作成できます。

Shape オブジェクトには points 属性もあり、形状ごとに異なる意味を持ちます。これにより、polygon 形状の辺の合計数と equal 形状の平行線の合計数が決まります。 points プロパティを使用して、ラインの曲がりの ジグザグ数を設定することもできます。

前に述べたように、mojs は SVG を使用してこれらすべての形状を作成します。これは、Shape オブジェクトには、これらの形状の外観を制御するための SVG 固有のプロパティもいくつかあることを意味します。 fill プロパティを使用して、mojs シェイプの塗りつぶしの色を設定できます。色が指定されていない場合、ライブラリは deepink カラーを使用して形状を塗りつぶします。同様に、Stroke プロパティを使用して、図形のストロークの色を指定できます。ストロークの色が指定されていない場合、mojs はストロークを透明のままにします。 fillOpacity プロパティと StrokeOpacity プロパティを使用して、図形の塗りつぶしとストロークの不透明度を制御できます。 0 から 1 までの任意の値を指定できます。

Mojs では、シェイプの他のストローク関連プロパティを制御することもできます。たとえば、StrokeDasharray プロパティを使用して、ストローク パス内のダッシュとギャップのパターンを指定できます。このプロパティは、文字列と数値を有効な値として受け入れます。デフォルト値はゼロで、ストロークが実線になることを意味します。ストロークの幅は、StrokeWidth プロパティを使用して指定できます。デフォルトでは、すべてのストロークの幅は 2 ピクセルです。 StrokeLinecap プロパティを使用して、さまざまな線の端点の形状を指定できます。 StrokeLinecap の有効な値は、butt、round、および square です。

デフォルトでは、作成した図形は親要素の中央に配置されます。これは、図形の left プロパティと right プロパティが両方とも 50% に設定されているためです。これらのプロパティの値を変更して、要素を別の場所に配置できます。図形の位置を制御するもう 1 つの方法は、x プロパティと y プロパティを使用することです。これらは、形状がそれぞれ水平方向と垂直方向にどの程度移動するかを決定します。

radius プロパティを使用して、形状の半径を指定できます。この値は、特定の形状のサイズを決定するために使用されます。 radiusX と radiusY を使用して、特定の方向の図形のサイズを指定することもできます。図形のサイズを制御するもう 1 つの方法は、scale プロパティを使用することです。 scale のデフォルト値は 1 ですが、任意の他の数値に設定できます。 scaleX プロパティと scaleY プロパティを使用して、特定の方向に形状を拡大縮小することもできます。

デフォルトでは、形状のこれらすべての変換の原点はその中心です。たとえば、angle プロパティの値を指定して図形を回転すると、図形はその中心を中心に回転します。別の点を中心に形状を回転したい場合は、origin プロパティを使用して指定できます。このプロパティは値として文字列を受け入れます。これを '0% 0%' に設定すると、形状が左上隅を中心に回転、拡大縮小、または平行移動されます。同様に、'50% 0%' に設定すると、上端の中心を中心にシェイプが回転、拡大縮小、または平行移動されます。

今説明したこれらのプロパティをすべて使用して、さまざまな形状を作成できます。ここではいくつかの例を示します：＃＃＃ リーリー

上記のコードで作成された形状は、以下の CodePen デモに示されています:

Mojs でシェイプをアニメーション化する

前のセクションで説明したシェイプのほぼすべてのプロパティをアニメーション化できます。たとえば、異なる初期値と最終値を指定することで、ポリゴン内のポイントの数をアニメーション化できます。形状の原点を

'50% 50%' から '75% 75%' などの他の値に変更することもできます。 angle や scale などの他のプロパティは、Html モジュール内と同じように動作します。

さまざまなアニメーションの継続時間、遅延、速度は、それぞれ

duration、lay、speed プロパティを使用して制御できます。また、Repeat 属性も Html モジュールと同じように機能します。アニメーションを 1 回だけ再生したい場合は、0 に設定できます。同様に、アニメーションを 4 回再生するには、これを 3 に設定します。 Html モジュールで有効なすべてのイージング値は、Shape モジュールでも有効です。

これら 2 つのモジュールのアニメーション機能の唯一の違いは、

Shape モジュールのプロパティに対してアニメーション パラメーターを個別に指定できないことです。アニメーション化するすべてのプロパティの継続時間、遅延、繰り返し回数などは同じになります。

これは、円の x 位置、スケール、角度をアニメーション化する例です:

リーリー

さまざまなアニメーションの再生を制御する 1 つの方法は、

.then() メソッドを使用して、最初のアニメーション シーケンスが完全に完了した後にアニメーション化する新しいプロパティ セットを指定することです。 .then() ですべてのアニメーション化されたプロパティの新しい初期値と最終値を指定できます。以下に例を示します: リーリー

＃＃＃最終的な考え＃＃＃

このチュートリアルでは、mojs を使用してさまざまなシェイプを作成する方法と、これらのシェイプのプロパティをアニメーション化する方法を学びました。

Shape

モジュールには、

Html モジュールのアニメーション機能がすべて含まれています。唯一の違いは、プロパティを個別にアニメーション化できないことです。これらはグループとしてのみアニメーション化できます。また、さまざまな方法を使用してアニメーションの再生を制御し、いつでもアニメーションを再生、一時停止、停止、再開できます。これらの方法については、このシリーズの最初のチュートリアルで詳しく説明しました。 このチュートリアルについてご質問がある場合は、お気軽にコメントを残してください。次のチュートリアルでは、mojs の ShapeSwirl

モジュールと

stagger モジュールについて学習します。

以上がMojs アニメーション ライブラリの入門: Shapes モジュールを探索するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。