微信小程序开发常用技巧（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)
  }
})

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！