很多時候，我們在小程式中使用wx.showToast()，發現樣式不是很好看，那麼我們能不能做一個跟原生APP類似的toast呢？答案是肯定的。今天就利用微信小程式的動畫wx.createAnimation()實現一個簡單的類似原生APP的toast提示。
先來看看執行效果：

這個圖片丟人了，不好意思，將就看吧。哈哈。大致上還是能看清楚的。
接下來直接上程式碼：

<!--index.wxml-->
<button bindtap="clickButton">點選彈出toast</button>
<view animation="{{animation
 
}}" class="toast">
  {{inputName}}
</view>

/**index.wxss**/
button{
  margin-top: 600rpx;
}

.toast {
  position: fixed;
  top: -50px;
  z-index: 9999;
  background-color: rgba(33, 33, 33, 0.6);
  color: #fff;
  padding: 6px 0;
  font-size: 13px;
  width: 40%;
  border-radius: 5px;
  display: flex
 
;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
}

//index.js
Page({
  data:{
    inputName:'',
    animation: ''
  },
  onLoad: function () {
    var that = this
  },
  clickButton: function(){
    var that = this;
    that.doAnimation("提示資訊");
  },
  onReady: function () {
    //例項化一個動畫
 

    this.animation = wx.createAnimation({
      // 動畫持續時間，單位ms，預設值 400
      duration: 300,
      /**
       *  linear  動畫一直較為均勻
       */
      timingFunction: 'linear',
      // 延遲多長時間開始
      delay: 0,
      transformOrigin: 'left top 0',
      success: function (res) {
        console.log(res)
      }
    })
  },
  doAnimation: function (inputName) {
    var that = this
    that.animation.translateY(80).step()
    that.setData({
      inputName: inputName,
      //輸出動畫
      animation: that.animation.export()
    })
    setTimeout(function () {
      that.animation.translateY(-80).step()
      that.setData({
        //輸出動畫
        animation: that.animation.export()
      })
    }, 1000)
  }
})

看懂了嗎？快去試試吧。