快捷導(dǎo)航

微信小程序 Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)示例

更新時(shí)間：2018年08月22日 11:13:24 作者：極樂(lè)叔

這篇文章主要介紹了微信小程序 Animation實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近小程序中有一個(gè)圖片旋轉(zhuǎn)的需求，最初是想著通過(guò)切換多張圖片達(dá)到旋轉(zhuǎn)的效果，后來(lái)發(fā)現(xiàn)微信小程序帶有動(dòng)畫(huà)api，然后就改由image+Animation來(lái)實(shí)現(xiàn)。

首先在wxml中定義image

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

注意其中的animation屬性，image就由它來(lái)實(shí)現(xiàn)動(dòng)畫(huà)。

而{{animation}}我們?cè)趈s的data中定義

data: {
  animation: ''
},

改變animation的值（官網(wǎng)提供角度范圍是-180~180，但是我發(fā)現(xiàn)角度越大會(huì)一直旋轉(zhuǎn)）

   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()
    })
   },

相關(guān)代碼

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'
})
},

/**
 * 實(shí)現(xiàn)image旋轉(zhuǎn)動(dòng)畫(huà)，每次旋轉(zhuǎn) 120*n度
 */
 rotateAni: function (n) {
  _animation.rotate(120 * (n)).step()
this.setData({
   animation: _animation.export()
})
},

/**
 * 開(kāi)始旋轉(zhuǎn)
 */
 startAnimationInterval: function () {
var that = this;
  that.rotateAni(++_loadImagePathIndex); // 進(jìn)行一次旋轉(zhuǎn)
  _animationIntervalId = setInterval(function () {
   that.rotateAni(++_loadImagePathIndex);
}, _ANIMATION_TIME); // 沒(méi)間隔_ANIMATION_TIME進(jìn)行一次旋轉(zhuǎn)
},

/**
 * 停止旋轉(zhuǎn)
 */
 stopAnimationInterval: function () {
if (_animationIntervalId> 0) {
   clearInterval(_animationIntervalId);
   _animationIntervalId = 0;
}
},
}

微信自帶的Animation可以實(shí)現(xiàn)一次動(dòng)畫(huà)，然后可以通過(guò)setInterval來(lái)達(dá)到不斷旋轉(zhuǎn)的目的，在使用時(shí)，控制startAnimationInterval和stopAnimationInterval即可。

注意：

這里為什么不直接給_animation.rotate(120 * (n)).step()設(shè)置一個(gè)足夠大的值，原因有兩點(diǎn)：

1、我們需要便利的控制開(kāi)始和停止，

2、animation在小程序進(jìn)入后臺(tái)后，會(huì)持續(xù)運(yùn)行，占用手機(jī)內(nèi)存和cpu，而小程序依賴于微信，在iphone上會(huì)導(dǎo)致微信被終止運(yùn)行

在使用animation時(shí)，會(huì)發(fā)現(xiàn)有時(shí)候出現(xiàn)旋轉(zhuǎn)速度很快或者反向旋轉(zhuǎn)再正向旋轉(zhuǎn)的清空，這都是由于rotate的值設(shè)置有問(wèn)題。

1、rotate的值應(yīng)該是上一次結(jié)束時(shí)的值，
2、如果設(shè)置了全局變量，記得在oncreate時(shí)初始化，不然第二次打開(kāi)同一頁(yè)面會(huì)有問(wèn)題。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: