小程序总结（十四）-关于从底部向上滑出的动画

前沿： 业务代码写完了脑阔疼，来偷个懒更新一片博客，积累一下吧。

HTML代码

<view hidden="{{!show}}" catchtouchmove='{{false}}' class="mCostDetail">
  <view bindtap="closeFun" class='mCostDetail__bg'></view>
  <view class="mCostDetail__box" animation="{{animationData}}">
    <scroll-view scroll-y="{{true}}" style='height: 800rpx;'>
      <!-- 你的展示内容写这里 -->
    </scroll-view>
  </view>
</view>

CSS代码

.mCostDetail{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.mCostDetail__bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.mCostDetail__box{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 857rpx;
background: #fff;
z-index: 100;
}

JS代码

showCostDetailFun() {
        // 显示遮罩层
         var animation = wx.createAnimation({
            duration: 200,
             timingFunction: "linear",
             delay: 0
         })
         animation.translateY(600).step()
        this.setData({
            animationData: animation.export(),
            showCostDetail: true
        })
         setTimeout(function () {
          animation.translateY(0).step()
            this.setData({
              animationData: animation.export()
           })
        }.bind(this), 200)
    },
    hideCostDetailFun() {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
            delay: 0
         })
         animation.translateY(600).step()
         this.setData({
             animationData: animation.export(),
        })
        setTimeout(function () {
            animation.translateY(0).step()
            this.setData({
                // animationData: animation.export(),
                showCostDetail: false
            })
        }.bind(this), 200)
    }

原理
1、使用下面的代码创建一个annimation对象

      var animation = wx.createAnimation({
            duration: 200,
             timingFunction: "linear",
             delay: 0
         })

2、用返回的animation对象根据官方文档的动画API进行你想要的动画效果
animation.translateY(600).step()
3、完成动画操作之后使用animation这个对象的export()方法导出动画数据

        this.setData({
             animationData: animation.export(),
        })

4、将导出的动画数据使用animation="{{animationData}}"的形式绑定到HTML结构上，就可以了。

  <view class="mCostDetail__box" animation="{{animationData}}">
    <scroll-view scroll-y="{{true}}" style='height: 800rpx;'>
      <!-- 你的展示内容写这里 -->
    </scroll-view>
  </view>