WeChatミニプログラムアニメーションAPIの詳細説明とコード共有例

この記事では主に WeChat ミニ プログラム アニメーション API の詳細な説明とコード例を紹介します。必要な友達はそれを参照してください

アニメーション ここではアニメーションについて簡単に紹介します。ミニ プログラムでは、いくつかの 属性 と注意事項を説明します。アニメーションを作成する前に、アイデアを整理し、アニメーションを段階的に分解してから結合する必要があります。ここでは紹介のみを行います。

wx.createAnimation(object)

公式の紹介を参照

1. アニメーションインスタンスアニメーションを作成します。インスタンスのメソッドを呼び出してアニメーションを記述します。最後に、アニメーション データはアニメーション インスタンスのエクスポート メソッドを通じてエクスポートされ、コンポーネントのアニメーション プロパティに渡されます。

2. アニメーション操作メソッドを呼び出した後、アニメーションのグループの完了を示すために、アニメーションのグループ内のすべてのアニメーション メソッドを呼び出すことができます。同時に、アニメーションのグループが完了した後、初めて次のアニメーションのセットが続行されます。 step は、wx.createAnimation() と同じ構成パラメータを渡して、アニメーションの現在のグループの属性を指定できます

たとえば、最初のコードはアニメーションに対応しています: this.animation.export( )
2つ目 例えば、スケーリングアニメーション、つまりscale、scaleX、scaleY...のセットは、スケーリングアニメーショングループのアニメーションメソッドです。 スケーリングアニメーショングループと回転アニメーショングループは、step( ) と順番に実行されます。コードで試してみてください!エフェクトを逆に見ると理解しやすくなります

主な属性:

ここでのメインツリーは、アニメーション効果を設定するtimingFunctionとtransformOrigin

timingFunctionです

1. linearデフォルトは線形です アニメーションは常に比較的均一です

2. イーズ 最初は遅く、途中で加速し、最後に遅くなります

3. イーズイン 初めはゆっくりです

4. イーズインアウト最初と最後でゆっくりと

5. ease-out 最後でゆっくりと

6. step-start アニメーションは最初に 100% にジャンプし、アニメーション時間が一瞬で終了します

7. step-endアニメーション時間が一瞬で終了するまで0%スタイルを維持します
   

transformOriginの設定アニメーションの基点はデフォルトで%50 %50 0

左、中央右は横方向の値、対応するパーセンテージ値は left=0%; right=100% です。 100%

アニメーショングループとアニメーションメソッドスタイル:

回転:

スケール:

オフセット:

傾き:

行列変換:

単一アニメーションのグループ効果をデモンストレーションします

w ** * 回転 */

rotate: function() {

//2 つのアニメーション グループは step() で終わる必要があります
/**

* アニメーションシーケンス 時計回りに 150 度回転 > x、y 2 倍拡大 > x、y 10px 移動 >*/

this.animation.rotate(150)。 step().scale(2) .step().translate(10).step().skew(10).step().opacity(0.5).width(10).step({ducation: 8000}) this.setData({ ) // アニメーションを出力します

anime: this.animation.export()

})
}

読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトのサポートに感謝します。

以上がWeChatミニプログラムアニメーションAPIの詳細説明とコード共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。