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

微信小程序开发专栏介绍如何自定义小程序的动画弹出框/提示框。

在前言小程序中，当用户与界面交互时，有一些用户反馈提示，比如触发一个按钮，从底部弹出一个框，从顶部弹出等等。

现在有一些现成的UI库，已经实现了，但是如果只是为了实现一个底层的弹出框或者自定义的提示框，并没有参考第三方的UI库。

如何手动原生实现，最重要的是如何实现动画。

css3的动画如下:wxml代码

lt视图 gt ltview class = 点击-BTN ；catchtap = onBottomBox gt弹出底部的弹出框

效果示例如下所示。

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

以上是通过css3结合@keyframes动画帧的动画实现的，所以在小程序中也可以通过官方动画API实现。

小程序动画API-实现动画，创建动画实例，调用实例的方法描述动画。最后，动画数据由动画实例的导出方法导出，并传递给组件的animation属性。

效果示例如下所示。

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

下面是示例代码

lt视图 gt ltview class = 点击-BTN ；bindtap = onBottomBox gt弹出底部的弹出框

如下面的代码所示

//pages/customalertbox/customalertbox . jspage({/* *页面初始数据*/data: {isbotom: false，istop: false，动画数据:{}，//定义动画对象}，/* * *生命周期函数--监听页面加载*/onload: function (options) {}，onbottombox(){//创建动画varanimation = wx . Create animation({ duration:2000，计时函数: # 39；安逸 # 39；, });this.animation = animation//先在Y轴上偏移180°，然后用step()完成一个动画。平移y (180)。step()；this . setdata({ animation data:animation . export()，isBottom: true，})；//设置setTimeout改变Y轴偏移量，实现有感觉的滑动，返回初始位置setTimeout(()= >；{ animation.translateY(0)。step()；this . setdata({ animation data:animation . export()，})；}, 200);}，//点击蒙版图层隐藏子弹框on hide box(){ var animation = wx . create animation({ duration:2000，计时功能: # 39；安逸 # 39；, });this.animation = animation//先在Y轴上偏移180°，然后用step()完成一个动画。平移y (180)。step()；this . setdata({ animation data:animation . export()，})；setTimeout(()= gt；{ animation.translateY(0)。step()；this . setdata({ animation data:animation . export()，isBottom: false，})；}, 200);}，onTopBox(){ this . setdata({ isTop:true，})；setTimeout(()= gt；{ this.setData({ isTop: false，})；}, 2000);},});以上是通过微信小程序中的动画API完成的动画，代码比css3多，可以实现更复杂的动画效果。

注意

如果是底部的弹出框，如果在里面拖动时遮罩层的底部会滚动，具体的解决方法也可以是添加catchtouchmove = 在外层。true 是可以解决的。

lt视图 gt ltview class = 点击-BTN ；bindtap = onBottomBox gt弹出底部的弹出框

这是自定义实现小程序的动画项目符号框/提示框的详细信息。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 自定义小程序的动画框/提示框。

本文由主机参考刊发，转载请注明：实现自定义小程序的动画弹出框/提示框。 https://zhujicankao.com/82095.html