WeChat アプレットにアニメーションを実装する方法

この記事では主にWeChatアプレットにアニメーションを実装する方法を詳しく紹介しますので、興味のある方は参考にしてください

WeChatアプレットの具体的な内容は以下の通りです

1 .アニメーションを作成します。 instance

wx.createAnimation(OBJECT)

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

アニメーション キュー

アニメーション操作メソッドを呼び出した後、アニメーションのグループの完了を示すために step() を呼び出す必要があります。アニメーションのグループ内で呼び出す アニメーション メソッドの数に関係なく、アニメーションのグループ内のすべてのアニメーションが同時に開始され、アニメーションの 1 つのグループが完了するまで次のアニメーションのグループは続行されません。 step は、wx.createAnimation() と同様の構成パラメータを渡して、現在のグループ アニメーションの構成を指定できます。 アニメーションの実行は、アニメーションをイベントにバインドすることで呼び出すことができます。

作成したアニメーションインスタンスはアニメーションメソッドを呼び出すことで記述することができ、呼び出しが完了すると自身に戻り、チェーンコールの書き込みをサポートします。
同じアニメーション インスタンス内で、複数のモーション フォームを定義し、複数のアニメーションを異なるラベルにバインドできます

サンプル コード:

animation1: {}
animation2: {}

touch: function () {
 let animation1 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation1.translateX(-app.globalData.windowWidth * 0.7).step({ duration: 1000 });
 this.setData({
  animation1: animation1.export()
 });
 let animation2 = wx.createAnimation({
  transformOrigin: "50% 50%",
  duration: 1000,
  timingFunction: "ease",
  delay: 0
 });
 animation2.opacity(0.7).step({ duration: 1000 });
 this.setData({
  animation2: animation2.export()
 });
}

2. アニメーションの実行を呼び出します

2.1 アニメーションをバインドします

対応するラベルにアニメーションインスタンスを作成

サンプルコード

<view animation="{{animation1}}"></view>
<view animation="{{animation2}}"></view>

2.2 アニメーションをトリガー

ページイベントを通じてアニメーション実行を呼び出す

サンプルコード:

<view bindtap="touch"></view>

上記は私がコンパイルしたものです。将来すべての人に役立ちます。

関連記事:

WeChat アプレットを通じてカウントダウン効果を取得するための検証コードを実装する方法

ES6 イテレーターと for.of ループ (詳細なチュートリアル)

vue でスクロールの改善されたプラグインを使用する

以上がWeChat アプレットにアニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。