微信小プログラムアニメーションの実行過程を詳しく説明します。

前言
公式文書の説明が不明瞭なため、本稿では主にWeChatのアニメーションの実現過程/実現方法を紹介する。
実現プロセス
公式文書と照らし合わせてこの文章を読むことをオススメします。
簡単に言えば、アニメーション全体の実現過程は三つのステップになります。

は、アニメーション・インスタンスanimationを作成する。

は、一例の方法を呼び出してアニメーションを説明する。

は、最後に、アニメーション・インスタンスのexport方式によって、アニメーション・データをコンポーネントに渡すanimationの属性を導出する。

前の二つのステップは一つのアニメを定義して設定して何をしますか？そしてこれを設定した「ルール」を界面のある要素に投げてこのルールに従って実行させます。
もちろん、複数の要素のanimation="{{ani}}"があれば、このアニメーションルールは実行されます。
実現プロセス
上は理論で、続いて実用的な一環に入って、私達は1つの例を通して検証します。

index.wxml

<!--     (    ) -->
<view animation="{{ ani }}" class="content"></view>
<!-- END -->

<!--      -->
<button bindtap="go">   </button>
<!-- END -->

index.js

Page({

 /*
 *     
 */
 data: {},

 /*
 *     
 */
 go: function() {
 
 // 1.      (animation)
 var animation = wx.createAnimation({
  duration: 1500,//      
  timingFunction: 'ease-in',//       
  //          
 })

 // 2.        ()
 /*
 *   (  JQuery)
 *   .     
 *   step()       
 */
 animation.translate(100, 100).rotate(180).rotate(360).step()

 // 3.    
 this.setData({
  ani: animation.export()
 })
 }
})

index.css

.content {/*       */
 width: 200rpx;
 height: 200rpx;
 border: 3px solid red;
}

締め括りをつける
ここでは、WeChatアプレットアニメーションの実行過程/実現過程/実現方法についての詳細な文章を紹介します。これまでの記事を検索したり、以下の関連記事を見たりしてください。これからもよろしくお願いします。