需求：實(shí)現(xiàn)一個(gè)點(diǎn)擊菜單懸浮按鈕氨距，向左彈出子菜單的動(dòng)畫
最終效果展示：
開始狀態(tài).png
彈出狀態(tài).png
需求分析：這里一共有6個(gè)動(dòng)畫效果无埃，其中包括：主菜單按鈕、4個(gè)子菜單按鈕（動(dòng)畫效果類似）铣焊、和背景動(dòng)畫效果。
主菜單按鈕動(dòng)畫：實(shí)現(xiàn).rotateZ從 Z 軸順時(shí)針旋轉(zhuǎn)一個(gè)角度動(dòng)畫
4個(gè)子菜單按鈕動(dòng)畫：實(shí)現(xiàn)translate平移動(dòng)畫
背景圖動(dòng)畫：實(shí)現(xiàn)translate平移動(dòng)畫罕伯、并且動(dòng)態(tài)設(shè)置背景寬度
分析完了曲伊，下面是具體代碼：
js代碼：
// components/Menu/menu.js
var systemInfo = wx.getSystemInfoSync();
Component({
lifetimes: {
attached: function () {
// 在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹時(shí)執(zhí)行
this.setData({
systemInfo: systemInfo
})
},
detached: function () {
// 在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
},
},
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
isShow: false,//是否已經(jīng)彈出
animMain: {},//旋轉(zhuǎn)動(dòng)畫
animImg: {},//原始影像動(dòng)畫
animMedicalhistory: {},// 病歷文書動(dòng)畫
animInspection:{},//檢驗(yàn)報(bào)告動(dòng)畫
animcheck:{},//檢查報(bào)告動(dòng)畫
animItem:{},//圖標(biāo)背景動(dòng)畫
animTime: 300,//動(dòng)畫持續(xù)時(shí)間，單位 ms
timingFunction_start: 'ease-out',//動(dòng)畫的效果
timingFunction_end: 'ease-out'//動(dòng)畫的效果
},
/**
* 組件的方法列表
*/
methods: {
//點(diǎn)擊彈出或者收起
showOrHide: function () {
if (this.data.isShow) {
//縮回動(dòng)畫
this.takeback();
this.setData({
isShow: false,
})
} else {
//彈出動(dòng)畫
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()
},
//彈出動(dòng)畫
popp: function () {
//main按鈕順時(shí)針旋轉(zhuǎn)
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(),
})
},
//收回動(dòng)畫
takeback: function () {
//main按鈕逆時(shí)針旋轉(zhuǎn)
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(),
})
}
},
//解決滾動(dòng)穿透問題
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頁(yè)面調(diào)用：
<menu hidden id='menu'
bind:img="onImg"
bind:medicalhistory="onMedicalhistory"
bind:inspection="onInspection"
bind:check="onCheck" />
