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

この記事では主に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>

関連する推奨事項:

Css アニメーションの使用方法のチュートリアル

CSS3アニメーションプロパティを使ってカルーセル効果を実現する方法を詳しく解説

CSS3アニメーション特殊効果プラグインを上手に使う方法を紹介

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