小程序使用动画实现底部弹窗

使用动画实现底部弹窗顺滑弹出、离开效果

先上效果图![在这里插入图片描述](https://img-blog.csdnimg.cn/2021010510005892.gif#pic_center

下面贴上代码

WXML代码

<view class="commodity_screen" bindtap="hideModal" wx:if="{
     
     {showModalStatus}}"></view>
<!--弹出框 -->
<view animation="{
     
     {animationData}}" class="commodity_attr_box" wx:if="{
     
     {showModalStatus}}">
  <view class="dialog_content">
    <view class="detail_title">
      <view class="tv_detail_title">
        颜色
      </view>
      <view class="tv_detail_title">
        尺寸
      </view>
      <view class="tv_detail_title">
        数量
      </view>
    </view>
    
      <view class="inventory_detail">
        <block wx:for="{
     
     {detailList}}" wx:for-item="item">
          <view class="detail_title">
            <view class="tv_detail_content">
              {
   
   {item.colorName}}({
   
   {item.colorCode}})
            </view>
            <view class="tv_detail_content">
              {
   
   {item.sizeName}}({
   
   {item.sizeCode}})
            </view>
            <view class="tv_inventory">
              {
   
   {item.inventory}}
            </view>
          </view>
        </block>
      </view>
   
  </view>
</view>

WXSS代码

.commodity_screen {
    
    
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

/*对话框 */
.commodity_attr_box {
    
    
  height: 600rpx;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}
//这是需设置固定高度下面计算才可生效，并且list才可滚动
.dialog_content {
    
    
  display: flex;
  flex-direction: column;
  height: 600rpx;
}

.detail_title {
    
    
  display: flex;
  height: 80rpx;
  border-bottom: 1rpx solid #eeeeee;
  
}
.tv_inventory{
    
    
  font-size: 28rpx;
  color: red;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv_detail_title {
    
    
  font-size: 30rpx;
  color: #333;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tv_detail_content{
    
    
  font-size: 28rpx;
  color: #AAAAAA;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
//这里使用 函数动态计算白色区域的高度，注意需要设置此view的父布局高度才可生效
.inventory_detail{
    
    
  display: block;
  overflow: scroll;
  width: 100%;
  /* height: 520rpx; */
  height: cal(100%-80rpx);
}

JS代码：

//显示对话框
  showModal: function () {
    
    
    // 显示遮罩层
    var animation = wx.createAnimation({
    
    
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
    
    
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
    
    
      animation.translateY(0).step()
      this.setData({
    
    
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  //隐藏对话框
  hideModal: function () {
    
    
    // 隐藏遮罩层
    var animation = wx.createAnimation({
    
    
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
    
    
      animationData: animation.export(),
    })
    setTimeout(function () {
    
    
      animation.translateY(0).step()
      this.setData({
    
    
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  }

使用上述代码即可实现弹窗动画。
注意：由于Animation小程序文档上写的并不清楚，小程序Animation文档，一开始我以为Animation.translateY(number translation)相对的是屏幕底部的高度，而translation则是从下往上的高度，经过实验，实则不然。
真实坐标及位置如下图：

Animation默认相对自身的位置，先Animation.translateY(300)到底部，再使用Animation.translateY(0)到原始位置，完成弹出动画。隐藏动画同理。
好啦，又get了一个小技能！

2021年的第一篇博客，2021年我要坚持写博客，尽量把平时项目中学到的用到的都记录下来。
另外找了一个视频转gif的免费网站，需要的可以拿去。视频转gif网站