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


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 DOM 操作实现代码
Aug 01 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
Angular ElementRef简介及其使用
Oct 01 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 过滤页面中的BOM(实现代码)
2013/06/29 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP常用的三种设计模式
2017/02/17 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
Jquery 扩展方法
2010/05/06 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
js的回调函数详解
2015/01/05 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JSONP跨域请求
2017/03/02 Javascript
vue实现仿淘宝结账页面实例代码
2017/11/08 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python使用getpass库读取密码的示例
2017/10/10 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python下载库的步骤方法
2019/10/12 Python
Python实现点云投影到平面显示
2020/01/18 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
总结表彰大会主持词
2014/03/26 职场文书
学校对教师的评语
2014/04/28 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
党支部先进事迹材料
2014/12/24 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
《游戏公平》教学反思
2016/02/20 职场文书