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

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

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

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

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

css3实现的动画如下:wxml代码

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

示例效果如下

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

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

小程序动画API-实现动画，创建动画实例动画，调用实例方法描述动画。最后通过动画实例的导出方法将动画数据的动画属性导出到组件中。

示例效果如下

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

以下是示例代码

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

如下面的代码所示

//pages/customalertbox/customalertbox . jspage(初始数据{/* * * page */data: {isbotom: false，istop: false，animationdata: {}，//定义动画对象}，/* * *生命周期函数--监控页面加载*/onload: function (options) {}，onbottobox(){//创建动画Varanimation = wx。创建动画({时长:2000，计时功能:&；#39;轻松& amp#39;, });this.animation = animation//先在Y轴上偏移180°，然后用step()完成一个动画。平移y (180)。step()；this . setdata({ animation data:animation . export()，isBottom: true，})；//设置setTimeout改变Y轴偏移量，实现可感知滑动，返回初始位置setTimeout(()= & gt；{ animation.translateY(0)。step()；this . setdata({ animation data:animation . export()，})；}, 200);}，//单击蒙版图层隐藏hidebox () {Varanimation = wx上的项目符号框。创建动画({时长:2000，计时功能:&；#39;轻松& amp#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 = & quottrue & quot可以解决

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

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

• 如何在小程序中打开支付功能(如何在小程序中打开支付)
• 微信小程序有几种推送消息的方式(微信小程序发送消息推送)。
• 了解小程序的无痕埋葬点(小程序埋葬点测试)
• 在小程序中优化css树抖动。
• 介绍applet依赖分析的练习(composition介绍applet依赖分析练习)

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