微信小程序实现炫酷的弹出式菜单特效

<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>

//悬浮按钮
.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;
}

{
 "component": true,
 "usingComponents": {}
}

// 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
 }
})

"usingComponents": {
 "dialog": "/components/Dialog/dialog",
 "menu": "/components/Menu/menu"
 },

<!--_addEvent 和 _deleteLotsEvent分别是弹出菜单里面按钮对应的事件，需要在调用的js中实现 -->
<menu hidden id='menu' bind:addEvent="_addEvent" bind:deleteLotsEvent="_deleteLotsEvent" />

 _addEvent: function(){
 //do something
 },
 _deleteLotsEvent: function(){
 //do something
 }