1. 程式人生 > >小程式動畫的使用

小程式動畫的使用

小程式使用動畫API實現以物體中心原點為中心的旋轉,先看效果圖:


wxml:

<view  animation="{{animationData}}">

    以我為中心旋轉

</view>

js:

Page({

data({

    animationData: {}

})

  onLoad:function() {

  var animation = wx.createAnimation({
    duration: 1000,
    timingFunction: 'linear',
  })
  this.animation = animation


  this.setData({
    animationData: animation.export()
  })
  var n = 0;
  //連續動畫需要新增定時器,所傳引數每次+1就行
  var timer = setInterval(function () {
    n = n + 1;
    this.animation.rotate(180 * n).step()
    this.setData({
      animationData: this.animation.export()
    })
  }.bind(this), 1000)
},

})