小程式動畫的使用
阿新 • • 發佈:2019-01-09
小程式使用動畫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)
},
})