自定义实现小程序的动画弹框/提示框

微信小程序开发栏目介绍如何自定义实现小程序动画弹框/提示框。

自定义实现小程序的动画弹框/提示框

前言

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

如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库

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

css3 实现动画

如下是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>
/* 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);
  },
});
.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,垂直方向上平移,实现动画

示例效果如下所示

掘金不支持gif-实例效果可戳链接

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

小程序动画 API-实现动画

创建一个动画实例 animation,调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性

示例效果如下所示

掘金不支持gif-实例效果可戳链接

如下是实例代码

<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去实现

相关免费学习

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] 2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励! 3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负! 4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 自定义实现小程序的动画弹框/提示框 https://www.liyege.cn/zdysxxcxddhdktsk.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章