今天給大家帶來一個微信小程序的彈出是菜單效果，老規矩先上效果圖。(錄制的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.jsvar 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 }})