微信小程序 之实现弹出式菜单特效

需求：点击页面上的某一个按钮，弹出可供选择的其他按钮。
页面初始效果：

1. wxml部分代码如下所示：

<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="true"></view>
<view>
	<image src="../../images/tell.png" class="buttom" animation="{{animDelLots}}" bindtap="makeCall"></image>
	<image src="../../images/complaint.png" class="buttom" animation="{{animAdd}}" bindtap="toComplaint"></image>
	<image src="../../images/help.png" class="buttom" wx:if="{{!isShow}}" animation="{{animMain}}" bindtap="showOrHide"></image>
	<image src="../../images/close.png" class="buttom" wx:if="{{isShow}}" animation="{{animMain}}" bindtap="deleteLots"></image>
</view>

2. wxss部分代码如下所示：

/* //悬浮按钮 */
.buttom{
 width: 80rpx;
 height: 80rpx;
 display: flex;
 flex-direction: row;
 position: fixed;
 bottom:180rpx;
 left: 40rpx;
 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;
}

3. js部分代码如下所示：

var systemInfo = wx.getSystemInfoSync();
 data: {
    // 弹出式菜单特效  star
    isShow: false, //是否已经弹出
    animMain: {}, //旋转动画
    animAdd: {}, //item位移,透明度
    animDelLots: {}, //item位移,透明度
    // 弹出式菜单特效  end
},
//点击弹出或者收起
  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(0).step();
    animationDelLots.translate(0, -140 / 750 * systemInfo.windowWidth).rotateZ(0).opacity(1).step();
    animationAdd.translate(0, -280 / 750 * systemInfo.windowWidth).rotateZ(0).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(),
    })
  },

最终效果：

更多效果：https://www.jianshu.com/p/c8c0de1f0da6