微信小程序炫酷的弹出式菜单特效
今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图。(录制的gif动画有点卡,实际真机或是模拟器上很顺畅)
先简单说下思路:
1、首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能
2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩,这个遮罩在我前面自定义modal弹框时有用到
3、分别对按钮做旋转和移动动画和透明度,造成动画差异就是位移的动画距离不同
4、收起的时候回到原来位置并且让透明度变成0就ok了
思路说完了,下面开始上实现代码,这里同样也是封装成了组件,方便调用。
首先是wxml实现
<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<view ><image src="../../img/add.png" class="buttom" animation="{{animDelLots}}" bindtap="deleteLots"></image><image src="../../img/add.png" class="buttom" animation="{{animAdd}}" bindtap="add"></image><image src="../../img/add.png" class="buttom" animation="{{animMain}}" bindtap="showOrHide"></image>
</view>
然后是wxss
//悬浮按钮
.buttom{width: 100rpx;height: 100rpx;display: flex;flex-direction: row;position: fixed;bottom:60rpx;right: 60rpx;z-index: 1001;
}
.drawer_screen {width: 100%;height: 100%;position: fixed;top: 0;left: 0;right:0;bottom:0;z-index: 1000;background: #000;opacity: 0.5;overflow: hidden;
}
.drawer_box {overflow: hidden;position: fixed;z-index: 1001;
}
json文件
{"component": true,"usingComponents": {}
}
最后是js逻辑实现
// components/Menu/menu.js
var systemInfo = wx.getSystemInfoSync();
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {isShow: false,//是否已经弹出animMain: {},//旋转动画animAdd: {},//item位移,透明度animDelLots: {},//item位移,透明度},/*** 组件的方法列表*/methods: {//点击弹出或者收起showOrHide: function () {if (this.data.isShow) {//缩回动画this.takeback();this.setData({isShow: false})} else {//弹出动画this.popp();this.setData({isShow: true})}},add: function () {this.triggerEvent("addEvent")this.showOrHide()},deleteLots: function () {this.triggerEvent("deleteLotsEvent")this.showOrHide()},//弹出动画popp: function () {//main按钮顺时针旋转var animationMain = wx.createAnimation({duration: 500,timingFunction: 'ease-out'})var animationDelLots = wx.createAnimation({duration: 500,timingFunction: 'ease-out'})var animationAdd = wx.createAnimation({duration: 500,timingFunction: 'ease-out'})animationMain.rotateZ(180).step();animationDelLots.translate(0, -200 / 750 * systemInfo.windowWidth).rotateZ(180).opacity(1).step();animationAdd.translate(0, -320 / 750 * systemInfo.windowWidth).rotateZ(180).opacity(1).step();this.setData({animMain: animationMain.export(),animDelLots: animationDelLots.export(),animAdd: animationAdd.export(),})},//收回动画takeback: function () {//main按钮逆时针旋转var animationMain = wx.createAnimation({duration: 500,timingFunction: 'ease-out'})var animationDelLots = wx.createAnimation({duration: 500,timingFunction: 'ease-out'})var animationAdd = wx.createAnimation({duration: 500,timingFunction: 'ease-out'})animationMain.rotateZ(0).step();animationDelLots.translate(0, 0).rotateZ(0).opacity(0).step();animationAdd.translate(0, 0).rotateZ(0).opacity(0).step();this.setData({animMain: animationMain.export(),animDelLots: animationDelLots.export(),animAdd: animationAdd.export(),})}},//解决滚动穿透问题myCatchTouch: function () {return}
})
在要调用的页面json文件引用menu组件(我这里引用了两个组件,还有一个是前面封装的dialog组件)
"usingComponents": {"dialog": "/components/Dialog/dialog","menu": "/components/Menu/menu"},
然后在调用的wxml中使用
<!--_addEvent 和 _deleteLotsEvent分别是弹出菜单里面按钮对应的事件,需要在调用的js中实现 -->
<menu hidden id='menu' bind:addEvent="_addEvent" bind:deleteLotsEvent="_deleteLotsEvent" />
调用menu组件的js中实现菜单中item的点击事件
_addEvent: function(){//do something},_deleteLotsEvent: function(){//do something}
整体代码实现就这么多,代码比较简单,如果有不清楚的童鞋,请留言,我将为你们解答。
感谢你这么帅,这么多金,还读到了现在,谢谢!
微信小程序炫酷的弹出式菜单特效相关推荐
- 微信小程序-炫酷手持滚动弹幕生成小工具
微信小程序-炫酷手持滚动弹幕生成小工具 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...
- 微信小程序各种酷炫动画
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/anda0109/article/de ...
- 小程序 炫酷的海报进入首页
直接上代码把,直接复制粘贴可用 WXML <!-- 海报 --> <view class='{{hvuiagui}}' style='height:100%; overflow:hi ...
- android源码大全 IOS游戏源代码打包下载 小游戏|视频教程 微信小程序源码带后台全套|公众号平台
不断更新中,下面是2017-12-22更新部分 IOS_源码及视频一小部分: 开发环境:Xcode 基于cocos2d的tweejump跳跃游戏ios经典游戏源码.rar https://pan.b ...
- 微信小程序相关项目实例集合
大家下午好,上午逛博客的时候发现了一片有关于小程序的项目实例合集,我大致看了一下挺好的,特此拿过来希望可以帮到小伙伴们. 如下: wx-gesture-lock 微信小程序的手势密码 WXCustom ...
- [荐] 微信小程序模板源码合集
关注公众号 风色年代(itfantasycc) 200G 小程序资料合集送上~ wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组 ...
- 微信小程序的一些新手示例(¥62)
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 目前为止最全的微信小程序项目实例 --- demo锦集
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 微信小程序源码案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
最新文章
- Lession 15 Good news
- erlang 怎么获得socket中的属性_技术干货,python中的异步网络框架socketserver
- 脚本调试工具 Microsoft Script Debugger
- elk的一些零碎知识
- SELECT ... FOR UPDATE_手动加行级排他锁_行级写锁_行级独占锁
- python tkinter pack 同一行_用python tkinter中的一行连接2个复选按钮
- 信息学奥赛一本通(1186:出现次数超过一半的数)
- java自动封箱_java自动封箱是什么意思
- c语言程序设计自学网进阶,谭浩强老师C语言教程程序设计
- win7查看计算机硬盘序列号,win7系统通过cmd查看硬盘序列号的操作方法
- mysql分页中offset作用_mysql中分页查询(LIMIT和OFFSET关键字讲解)一语道破天机
- 免费天气预报API接口
- 阴天快乐 -- 陈奕迅(eason)
- acl审计软件_审计软件有哪些-审计软件的总结分析
- 如何高效的学习高等数学
- 运筹学基础【四】 之 库存管理
- 计算机学报——主题“区块链”,检索到25篇
- linux批量重命名后缀名,Linux 批量重命名文件的方法
- Typora的光标状态切换
- [白话解析] 深入浅出边缘计算