小程序動畫最簡單的實踐！

話不多說直接上代碼

<!--pages/message/message.wxml-->
<view animation="{{in}}" class="init">pages/message/message.wxml</view>

<button bindtap="rorate">轉吧</button>

css代碼如下

/* pages/message/message.wxss */
.init{
  opacity: 0
}

很簡單的兩行代碼 重點是animation綁定了屬性in，接下來我們就要對屬性in進行操作，它應當是一個wx.animation的對象。

js代碼如下，更加簡單

rorate:function(){
let animation = wx.createAnimation({
  //持續時間800ms
  duration: 800,
  timingFunction: 'ease',
})

使用wx提供的api新建一個animation對象 
    animation.opacity(1).step()
    this.setData({
      in:animation.export()
    })
  },

在css中，本來的樣式是0，使用wx.creatAnimation使樣式變成opacity(1)，然後將animation對象執行export()方法後，表示將之前的動畫全部清空返回給data中的屬性in。

沒了