wx动画组件

wxml

<view class="title">动画</view>
<view class="demo-box">
<view class="title">animation的用法</view>
<view class="animation-view" animation="{{animation}}">这是动画组件</view>
<button type="primary" size="mini" bindtap="rotate">旋转</button>
<button type="primary" size="mini" bindtap="scale">缩放</button>
<button type="primary" size="mini" bindtap="translate">偏移</button>
<button type="primary" size="mini" bindtap="skew">倾斜</button>
<button bindtap="sync">同时动画</button>
<button bindtap="queue">依次动画</button>
<button bindtap="reset">还原</button>
</view>

js

Page({
  data: {
  
  },
  rotate:function(){
    this.animation.rotate(45).step()
    this.setData({animation:this.animation.export()})
  },
  scale:function(){
    this.animation.scale(0.5).step()
    this.setData({animation:this.animation.export()})
  },
  translate:function(){
    this.animation.translate(100,50).step()
    this.setData({animation:this.animation.export()})
  },
  skew:function(){
    this.animation.skew(45).step()
    this.setData({animation:this.animation.export()})
  },
  sync:function(){
    this.animation.rotate(45).scale(0.5).translate(100,50).skew(45).step()
    this.setData({animation:this.animation.export()})
  },
  queue:function(){
    this.animation.rotate(45).step().scale(0.5).step().translate(100,50).step().skew(45).step()
    this.setData({animation:this.animation.export()})
  },
  reset:function(){
    this.animation.rotate(0).scale(0).translate(0,0).skew(0).step()
    this.setData({animation:this.animation.export()})
  },
  onReady:function(){
    this.animation=wx.createAnimation({duration:3000})
  },
)}

wxss

.animation-view{
  width: 220rpx;
  height: 220rpx;
  background-color: lightgreen;
  margin: 20rpx;
  line-height: 220rpx;
}
button{
  margin: 10rpx;
}