小さなプログラムでアニメーションを実装する

今回はミニプログラムにアニメーションアニメーションを実装する方法を紹介します。ミニプログラムにアニメーションアニメーションを実装する際の注意点を以下に示します。

WeChatアプレットはアニメーションアニメーションを実装します

1.アニメーションインスタンスを作成します

wx.createAnimation(OBJECT)

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

に渡されます。 注:
エクスポート メソッドは、各呼び出し後に前のアニメーション操作をクリアします

アニメーション キュー

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

event

を通じてアニメーションをバインドすることで呼び出すことができます。 作成したアニメーションインスタンスはアニメーションメソッドを呼び出すことで記述することができ、呼び出しが完了すると自身に戻り、チェーンコールの書き込みをサポートします。

同じアニメーション インスタンス内で、複数のモーション フォームを定義し、複数のアニメーションを異なるラベルにバインドできます

サンプル コード:

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>

この記事のケースを読んでいると思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Reactサーバーレンダリング

ユーザーの個人情報を取得するWeChatアプレットの開発方法

Vue2.5とElement UIコンポーネントのページング機能の実装

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