小程序动画如何实现

在写小程序的时候，一般会碰到底部弹出动画，如何实现？

• 首先我们写一个点击触发事件
  <view class='text' bindtap='clickPup'>点击触发底部动画弹窗</view>
• 然后我们写一个底部弹窗的内容

<view class='choose' wx:if="{{animation_box}}" animation='{{animationData}}'>
  这里面是内容
</view>

• 进入js写点击事件
  创建一个动画实例wx.createAnimation(Object object)，最后通过Animation.export()导出动画数据传递给组件
  注意：export方法每次调用会清掉之前的动画操作

data: {
    animation_box:false,
    animationData:{}
  }

clickPup:function(){
   // 用that取代this，防止不必要的情况发生
    var that = this;
// 创建一个动画实例
    var animation  = wx.createAnimation({
      // 动画持续时间
        duration:500,
        // 定义动画效果，当前是匀速
        timingFunction:'linear'
    })
     // 将该变量赋值给当前动画
    that.animation = animation
    // 先在y轴偏移，然后用step()完成一个动画
    animation.translateY(200).step()
    // 用setData改变当前动画
    that.setData({
      // 通过export()方法导出数据
      animationData: animation.export(),
      // 改变view里面的Wx：if
      animation_box:true
    })
    // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
    setTimeout(function(){
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export()
      })
    },200)
}

• 下面是点击遮罩层，隐藏动画

hideModal:function(e){
    var that = this;
    var animation = wx.createAnimation({
      duration:1000,
      timingFunction:'linear'
    })
    that.animation = animation
    animation.translateY(200).step()
    that.setData({
      animationData:animation.export()
      
    })
    setTimeout(function () {
      animation.translateY(0).step()
      that.setData({
        animationData: animation.export(),
        animation_box: false
      })
    }, 200)
  }