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


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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
JavaScript中的正则表达式简明总结
Apr 04 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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,js双版本
2012/09/25 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
Extjs学习笔记之七 布局
2010/01/08 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Python持续监听文件变化代码实例
2020/07/22 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
七年级数学教学反思
2014/01/22 职场文书
幼儿教师求职信
2014/05/24 职场文书
大四学生个人总结
2015/02/15 职场文书
会计专业求职信范文
2015/03/19 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
2019思想汇报范文
2019/05/21 职场文书