小程序菜单按钮向左弹出动画的实现
2019-12-09 本文已影响0人
程序员三千_
需求：实现一个点击菜单悬浮按钮，向左弹出子菜单的动画
最终效果展示：
开始状态.png
弹出状态.png
需求分析：这里一共有6个动画效果，其中包括：主菜单按钮、4个子菜单按钮（动画效果类似）、和背景动画效果。
主菜单按钮动画：实现.rotateZ从 Z 轴顺时针旋转一个角度动画
4个子菜单按钮动画：实现translate平移动画
背景图动画：实现translate平移动画、并且动态设置背景宽度
分析完了，下面是具体代码：
js代码：
// components/Menu/menu.js
var systemInfo = wx.getSystemInfoSync();
Component({
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
this.setData({
systemInfo: systemInfo
})
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
isShow: false,//是否已经弹出
animMain: {},//旋转动画
animImg: {},//原始影像动画
animMedicalhistory: {},// 病历文书动画
animInspection:{},//检验报告动画
animcheck:{},//检查报告动画
animItem:{},//图标背景动画
animTime: 300,//动画持续时间，单位 ms
timingFunction_start: 'ease-out',//动画的效果
timingFunction_end: 'ease-out'//动画的效果
},
/**
* 组件的方法列表
*/
methods: {
//点击弹出或者收起
showOrHide: function () {
if (this.data.isShow) {
//缩回动画
this.takeback();
this.setData({
isShow: false,
})
} else {
//弹出动画
this.popp();
this.setData({
isShow: true,
})
}
},
img: function () {
this.triggerEvent("img")
this.showOrHide()
},
medicalhistory: function () {
this.triggerEvent("medicalhistory")
this.showOrHide()
},
inspection: function () {
this.triggerEvent("inspection")
this.showOrHide()
},
check: function () {
this.triggerEvent("check")
this.showOrHide()
},
//弹出动画
popp: function () {
//main按钮顺时针旋转
var animationMain = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_start
})
var animationMedicalhistory = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_start
})
var animationImg = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_start
})
var animationInspection = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_start
})
var animationCheck = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_start
})
var animationItem= wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_start
})
animationMain.rotateZ(180).step();
animationCheck.translate(-systemInfo.windowWidth /2, 0).step();
animationInspection.translate(-systemInfo.windowWidth / 2.5, 0).step();
animationMedicalhistory.translate(-systemInfo.windowWidth/3.5, 0).step();
animationImg.translate(-systemInfo.windowWidth/6, 0).step();
animationItem.translate(-systemInfo.windowWidth / 7, 0).width(systemInfo.windowWidth / 2).step();
this.setData({
animMain: animationMain.export(),
animMedicalhistory: animationMedicalhistory.export(),
animImg: animationImg.export(),
animInspection: animationInspection.export(),
animCheck: animationCheck.export(),
animItem: animationItem.export(),
})
},
//收回动画
takeback: function () {
//main按钮逆时针旋转
var animationMain = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_end
})
var animationMedicalhistory = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_end
})
var animationImg = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_end
})
var animationInspection = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_end
})
var animationCheck = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_end
})
var animationItem = wx.createAnimation({
duration: this.data.animTime,
timingFunction: this.data.timingFunction_end
})
animationMain.rotateZ(0).step();
animationCheck.translate(0, 0).rotateZ(0).step();
animationInspection.translate(0, 0).rotateZ(0).step();
animationMedicalhistory.translate(0, 0).rotateZ(0).step();
animationImg.translate(0, 0).rotateZ(0).step();
animationItem.translate(0, 0).width(-systemInfo.windowWidth).step();
this.setData({
animMain: animationMain.export(),
animMedicalhistory: animationMedicalhistory.export(),
animImg: animationImg.export(),
animInspection: animationInspection.export(),
animCheck: animationCheck.export(),
animItem: animationItem.export(),
})
}
},
//解决滚动穿透问题
myCatchTouch: function () {
return
}
})
wxml代码：
<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<view>
<view class="item-class" animation="{{animItem}}"></view>
<image src="../../images/icon/imgdetails_icon_check@2x.png" class="buttom" animation="{{animCheck}}" bindtap="check"></image>
<image src="../../images/icon/imgdetails_icon_inspection@2x.png" class="buttom" animation="{{animInspection}}" bindtap="inspection"></image>
<image src="../../images/icon/imgdetails_icon_medicalhistory@2x.png" class="buttom" animation="{{animMedicalhistory}}" bindtap="medicalhistory"></image>
<image src="../../images/icon/imgdetails_icon_img@2x.png" class="buttom" animation="{{animImg}}" bindtap="img"></image>
<image src="../../images/icon/imgdetails_icon_menu@2x.png" class="main-buttom" animation="{{animMain}}" bindtap="showOrHide"></image>
</view>
wxss代码：
/* components/menu/index.wxss */
.main-buttom{
width: 100rpx;
height: 100rpx;
display: flex;
flex-direction: row;
position: fixed;
bottom:220rpx;
right: 60rpx;
z-index: 1001;
}
.buttom{
width: 50rpx;
height: 50rpx;
display: flex;
flex-direction: row;
position: fixed;
bottom:244rpx;
right: 80rpx;
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;
overflow: hidden;
}
.drawer_box {
overflow: hidden;
position: fixed;
z-index: 1001;
}
.item-class {
position: fixed;
bottom: 225rpx;
right: 60rpx;
background: white;
border: 1px solid white;
border-radius: 40rpx;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
height: 85rpx;
}
page页面调用：
<menu hidden id='menu'
bind:img="onImg"
bind:medicalhistory="onMedicalhistory"
bind:inspection="onInspection"
bind:check="onCheck" />
