如何自定义实现小程序动画弹框/提示框
这篇文章将为大家详细讲解有关如何自定义实现小程序动画弹框/提示框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
网站设计制作过程拒绝使用模板建站;使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统;成都网站建设、做网站收费合理;免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了10余年的成都创新互联网站建设公司。
如何自定义实现小程序动画弹框/提示框
css3 实现动画
如下是wxml
代码
弹出底部弹出框 弹出顶部提示框 底部弹出内容通知内容
/* 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-实例效果可戳链接
如下是实例代码
弹出底部弹出框 弹出顶部提示框 底部弹出内容通知内容
主要是给想要添加动画的元素添加了一个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"
即可解决
弹出底部弹出框 底部弹出内容通知内容
关于“如何自定义实现小程序动画弹框/提示框”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网站标题:如何自定义实现小程序动画弹框/提示框
网站地址:http://scyanting.com/article/jsedio.html