最终效果如图：

教程

1. 通过设定一个圆形悬浮框在右下角后，绑定一个点击事件，决定菜单栏是呼出还是收拢，通过一个变量isShow来判断另外两个菜单要不要显示出来

WXML:
<image src="/images/openIT.png" class="buttom" animation="{{animMain}}" bindtap="showOrHide"></image>

JS:
data: {
    isShow: false,//是否已经弹出
    animMain: {},//旋转动画
    animAdd: {},//item位移,透明度
    animDelLots: {},//item位移,透明度
    animEnd: {},//item位移,透明度,
    isLogin:false
  },
  
//点击弹出或者收起
    showOrHide: function () {
      if (this.data.isShow) {
        //缩回动画
        this.takeback();
        this.setData({
          isShow: false
        })
      } else {
        //弹出动画
        this.popp();
        this.setData({
          isShow: true
        })
      }
    },
    
    //弹出动画
    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'
      })
      var animationEnd = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-out'
      })
      animationMain.rotateZ(180).step();
      animationDelLots.translate(0, -240 / 750 * systemInfo.windowWidth).opacity(1).step();
      animationAdd.translate(0, -360 / 750 * systemInfo.windowWidth).opacity(1).step();
      animationEnd.translate(0, -120 / 750 * systemInfo.windowWidth).opacity(1).step();
      this.setData({
        animMain: animationMain.export(),
        animDelLots: animationDelLots.export(),
        animAdd: animationAdd.export(),
        animEnd: animationEnd.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'
      })
      var  animationEnd = 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();
      animationEnd.translate(0, 0).rotateZ(0).opacity(0).step();
      this.setData({
        animMain: animationMain.export(),
        animDelLots: animationDelLots.export(),
        animAdd: animationAdd.export(),
        animEnd: animationEnd.export(),
      })
    },
    
    

该JS代码中运用到了animation中的动画，具体使用方式可查看小程序文档进行进一步学习。
文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

剩余的WXML代码：

<!--miniprogram/components/menu/menu.wxml-->
<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<view >
<view animation="{{animEnd}}" class="block">
  <view wx:if="{{isShow}}" class="block-text" style="color:white;">队员招募</view>

  <image src="/images/findMe.png"  class=" small"  bindtap="findTeam"></image>

</view>
<view animation="{{animDelLots}}"  class="block">
  <view wx:if="{{isShow}}" class="block-text" style="color:white;">寻找团队</view>

  <image src="/images/findPer.png" class=" small"  bindtap="findCaptain"></image>

</view>

  <image src="/images/openIT.png" class="buttom" animation="{{animMain}}" bindtap="showOrHide"></image>
</view>