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


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 相关文章推荐
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
js比较日期大小的方法
May 12 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
微信小程序实现上传图片功能
May 28 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
简述pm2常用命令集合及配置文件说明
May 30 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
Python程序语言快速上手教程
2012/07/18 Python
连接Python程序与MySQL的教程
2015/04/29 Python
Python OS模块常用函数说明
2015/05/23 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
Python argparse模块应用实例解析
2019/11/15 Python
wxPython实现画图板
2020/08/27 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
广告学专业毕业生自荐信
2014/05/28 职场文书
大学校园招聘会感想
2015/08/10 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android