微信小程序实现自定义动画弹框/提示框的方法实例


Posted in Javascript onNovember 06, 2020

前言

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

如今,有一些现成的 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>

如下是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实现的

小程序动画 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去实现

到此这篇关于微信小程序实现自定义动画弹框/提示框的文章就介绍到这了,更多相关微信小程序自定义动画弹框/提示框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

相关文档

小程序动画 API

Javascript 相关文章推荐
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
浅析javascript函数表达式
Feb 10 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 #Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 #Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 #Javascript
vue中的计算属性和侦听属性
Nov 06 #Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 #Javascript
使用Vue实现一个树组件的示例
Nov 06 #Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 #Javascript
You might like
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
PHP count()函数讲解
2019/02/03 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
python docx 中文字体设置的操作方法
2018/05/08 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python之变量类型和if判断方式
2020/05/05 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
信用社实习人员自我鉴定
2013/09/20 职场文书
电子专业推荐信范文
2013/11/18 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
事业单位聘任报告
2015/03/02 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
Python创建SQL数据库流程逐步讲解
2022/09/23 Python