在写小程序的时候，一般会碰到底部弹出动画，如何实现？
- 首先我们写一个点击触发事件
<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)
}
