微信小程序开发常用技巧（7）——实现一个类似于Android toast效果动画

很多时候，我们在小程序中使用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)
  }
})

看懂了吗？快去试试吧。