微信小程序：動畫（Animation）

效果圖:

 

 代碼:

//wxml


<view class="container">
  <view class="usermotto" animation="{{ani}}">
    <text class="user-motto">{{motto}}</text>
  </view>
  <button bindtap='start'>動畫</button>
</view>


//wxss


.usermotto {
  margin-top: 100px;
  border: solid;
}




//js

Page({
  data: {
    motto: 'Hello World',
  },
  start () {
    var animation = wx.createAnimation({
      duration: 4000,
      timingFunction: 'ease',
      delay: 1000
    });
    animation.opacity(0.2).translate(100, -100).step()
    this.setData({
      ani: animation.export()
    })
  }
})

參考鏈接: https://cloud.tencent.com/developer/article/1367247