关于javascript:小程序实现自定义动画弹框提示框

10次阅读

共计 4142 个字符，预计需要花费 11 分钟才能阅读完成。

在小程序中, 用户与界面进行交互时, 有一些用户反馈提醒, 例如: 触发某个按钮, 从底部弹出框, 从顶部弹出等

现在, 有一些现成的 UI 库, 尽管曾经实现了的, 但若只是为了实现一个底部弹出框或者自定义提示框, 不援用第三方 UI 库

怎么手动原生形式去实现呢, 最次要的是怎么去实现动画

如下是 wxml 代码

<view>
  <view class="click-btn" catchtap="onBottomBox"> 弹出底部弹出框 </view>
  <view class="click-btn" bindtap="onTopBox"> 弹出顶部提示框 </view>
  <view wx:if="{{isBottom}}" class="bottom-box">
    <div class="mask" bindtap="onHideBox"></div>
    <div class="pop"> 底部弹出内容 </div>
  </view>
  <div wx:if="{{isTop}}" class="top-box"> 告诉内容 </div>
</view>

如下是 wxss 代码

/* pages/customalertbox/customalertbox.wxss */
.click-btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.top-box {
  width: 100%;
  height: 30px;
  background: #f56c6c;
  border-radius: 0 0 8px 8px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 28rpx;
  position: absolute;
  top: 0px;
  left: 0;
  animation-duration: 0.5s;
  animation-name: slidetop;
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.pop {
  position: absolute;
  width: 100%;
  height: 180px;
  background: #42b983;
  border-radius: 8px 8px 0 0;
  position: absolute;
  bottom: 0px;
  animation-duration: 0.5s;
  animation-name: slidein;
}

@keyframes slidein {
  from {transform: translateY(70%);
  }
  to {transform: translateY(0);
  }
}

@keyframes slidetop {
  from {transform: translateY(-30px);
  }
  to {transform: translateY(0px);
  }
}

如下是逻辑代码

// pages/customalertbox/customalertbox.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isBottom: false,
    isTop: false,
  },

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function(options) {},

  onBottomBox() {
    this.setData({isBottom: true,});
  },

  onHideBox() {
    this.setData({isBottom: false,});
  },

  onTopBox() {
    this.setData({isTop: true,});

    setTimeout(() => {
      this.setData({isTop: false,});
    }, 2000);
  },
});

在小程序中实现动画, 如上实现的动画, 是通过 css3 中的 @keyframes 实现的, 如下所示

.pop {
  /* ...  */
  animation-duration: 0.5s;
  animation-name: slidein; // 动画的名称
}

@keyframes slidein {
  // 定义动画的名称
  from {transform: translateY(70%); // 平移, 垂直方向上
  }
  to {transform: translateY(0);
  }
}

.top-box {
  /* ... */
  animation-duration: 0.5s;
  animation-name: slidetop;
}

@keyframes slidetop {
  from {transform: translateY(-30px);
  }
  to {transform: translateY(0px);
  }
}

通过 css3 中的 @keyframes 以及变换transform, 垂直方向上平移, 实现动画

示例成果如下所示

以上是通过 css3 的动画 animation 联合 @keyframes 动画帧实现的, 那么在小程序当中, 也能够通过官网的动画 API 实现的

创立一个动画实例 animation, 调用实例的办法来形容动画。最初通过动画实例的 export 办法导出动画数据传递给组件的 animation 属性

示例成果如下所示

如下是实例代码

<view>
  <view class="click-btn" bindtap="onBottomBox"> 弹出底部弹出框 </view>
  <view class="click-btn" bindtap="onTopBox"> 弹出顶部提示框 </view>
  <view
    wx:if="{{isBottom}}"
    style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
  >
    <div class="mask" bindtap="onHideBox"></div>
    <div class="pop" animation="{{animationData}}"> 底部弹出内容 </div>
  </view>
  <div wx:if="{{isTop}}" class="top-box"> 告诉内容 </div>
</view>

次要是给想要增加动画的元素增加了一个 animation 属性, 当初的动画是通过 js 去管制, 而非 css

如下代码所示

// pages/customalertbox/customalertbox.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    isBottom: false,
    isTop: false,
    animationData: {}, // 定义动画对象},

  /**
   * 生命周期函数 -- 监听页面加载
   */
  onLoad: function(options) {},

  onBottomBox() {
    // 创立动画
    var animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease',
    });

    this.animation = animation;
    // 先在 y 轴偏移 180，而后用 step()实现一个动画
    animation.translateY(180).step();
    this.setData({animationData: animation.export(),
      isBottom: true,
    });

    // 设置 setTimeout 来扭转 y 轴偏移量，实现有感觉的滑动, 回到初始地位
    setTimeout(() => {animation.translateY(0).step();
      this.setData({animationData: animation.export(),
      });
    }, 200);
  },

  // 点击遮罩层暗藏弹框
  onHideBox() {
    var animation = wx.createAnimation({
      duration: 2000,
      timingFunction: 'ease',
    });
    this.animation = animation;
    // 先在 y 轴偏移 180，而后用 step()实现一个动画
    animation.translateY(180).step();
    this.setData({animationData: animation.export(),
    });
    setTimeout(() => {animation.translateY(0).step();
      this.setData({animationData: animation.export(),
        isBottom: false,
      });
    }, 200);
  },

  onTopBox() {
    this.setData({isTop: true,});

    setTimeout(() => {
      this.setData({isTop: false,});
    }, 2000);
  },
});

以上就是通过微信小程序中动画 API 实现的实现的动画, 代码要比 css3 要多一些, 能够实现更加简单的动画成果

留神

如果是底部弹出框, 拖动外面时, 若遮罩层底部会跟着滚动, 具体解决办法也能够在外层增加 catchtouchmove="true" 即可解决

<view>
  <view class="click-btn" bindtap="onBottomBox"> 弹出底部弹出框 </view>
  <view
    catchtouchmove="true"
    wx:if="{{isBottom}}"
    style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
  >
    <div class="mask" bindtap="onHideBox"></div>
    <div class="pop" animation="{{animationData}}"> 底部弹出内容 </div>
  </view>
  <div wx:if="{{isTop}}" class="top-box"> 告诉内容 </div>
</view>

在小程序当中实现动画能够用 css3 的 animation 联合 @keyframes 实现, 同样也能够通过小程序动画的 api 去实现