WeChatアプレットAnimationの画像回転動画例

最近のプログラムでは画像の回転が必要ですが、最初は複数の画像を切り替えることによって回転の効果が得られると考えていましたが、WeChatアプリに動画アプリが付いていることが分かりました。
まずwxmlでイメージを定義します。

<image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>

その中のアニメーションの属性に注意して、イメージはそれからアニメーションを実現します。
私達はjsのdataの中で定義します。

data: {
  animation: ''
},

アニメーションの値を変更します（公式サイトの提供角度範囲は-180~180ですが、角度が大きいほど回転しています。）

   onShow: function() {
    console.log('index---------onShow()')
     this.animation = wx.createAnimation({
     duration: 1400,
     timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
     delay: 0,
     transformOrigin: '50% 50% 0',
     success: function(res) {
      console.log("res")
     }
    })
   },
   rotateAni: function (n) {
    console.log("rotate=="+n)
    this.animation.rotate(180*(n)).step()
    this.setData({
     animation: this.animation.export()
    })
   },

関連コード

var _animation;
var _animationIndex
const _ANIMATION_TIME = 500;
pages {
...
 onShow: function () {
  _animation = wx.createAnimation({
   duration: _ANIMATION_TIME,
   timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
   delay: 0,
   transformOrigin: '50% 50% 0'
})
},

/**
 *   image    ，     120*n 
 */
 rotateAni: function (n) {
  _animation.rotate(120 * (n)).step()
this.setData({
   animation: _animation.export()
})
},

/**
 *     
 */
 startAnimationInterval: function () {
var that = this;
  that.rotateAni(++_loadImagePathIndex); //       
  _animationIntervalId = setInterval(function () {
   that.rotateAni(++_loadImagePathIndex);
}, _ANIMATION_TIME); //    _ANIMATION_TIME      
},

/**
 *     
 */
 stopAnimationInterval: function () {
if (_animationIntervalId> 0) {
   clearInterval(_animationIntervalId);
   _animationIntervalId = 0;
}
},
}

WeChatのAnimationはアニメを一度実現して、set Intervalを通じて絶えず回転する目的を達成できます。使う時、startAnimation IntervalとstopAnimation Intervalを制御すればいいです。
注意:
ここはなぜ直接に_にあげないですか？animation.rotate(120*(n).step()十分大きい値を設定する理由は2つあります。
1、私たちは便利なコントロールの開始と停止が必要です。
2、animationは小さいプログラムが楽屋に入った後、継続的に運行し、携帯のメモリとcpuを占用します。小さいプログラムはWeChatに依存しています。iphoneでWeChatが停止されます。
アニメーションを使用すると、回転速度が速いか逆回転しているかのどちらかが正回転のクリアされている場合がありますが、これはrotateの値設定に問題があります。
1、rotateの値は前回の終了時の値です。
2、グローバル変数を設定したら、Ocreateで初期化してください。でないと、2回目に同じページを開けたら問題があります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。