WeChatアプレット開発用のアニメーション実装

1.アニメーションインスタンスの作成

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アプレット開発用のアニメーション実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。