ホームページ >WeChat アプレット >ミニプログラム開発 >WeChatアプレットにアニメーションアニメーションを実装

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

小云云オリジナル: 2018-05-19 17:09:063658ブラウズ

この記事では主に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アプレットにアニメーションアニメーションを実装

関連記事