微信小程序悬浮菜单

wxml：

<!-- 悬浮菜单 -->
  <view class='menus' wx:if='{{!bcgImgAreaShow}}'>
    <image src="../../images/share-icon.png" animation="{{animationOne}}" class="menu"></image>
    <button plain='true' open-type='share' animation="{{animationOne}}" class='menu share'></button>
    <image src="../../images/service-icon.png" animation="{{animationTwo}}" class="menu" catchtap="menuToSetting"></image>
    <image src="../../images/advice-icon.png" animation="{{animationThree}}" class="menu" catchtap="menuToCitychoose"></image>
    <image src="../../images/about-icon.png" animation="{{animationFour}}" class="menu" catchtap="menuToAbout"></image>
    <image src="../../images/menu-icon.png" animation="{{animationMain}}" class="menu main" catchtap="menuMain"></image>
  </view>

js:

// 悬浮菜单
  menuHide() {
    if (this.data.hasPopped) {
      this.takeback()
      this.setData({
        hasPopped: false,
      })
    }
  },
  menuMain() {
    if (!this.data.hasPopped) {
      this.popp()
      this.setData({
        hasPopped: true,
      })
    } else {
      this.takeback()
      this.setData({
        hasPopped: false,
      })
    }
  },
  // 反馈
  menuToCitychoose() {
    this.menuMain()
    wx.navigateTo({
      url: '/pages/advice/advice',
    })
  },
  // 客服
  menuToSetting() {
    this.menuMain()
    wx.navigateTo({
      url: '/pages/service/service',
    })
  },
  // 关于
  menuToAbout() {
    this.menuMain()
    wx.navigateTo({
      url: '/pages/service/service',
    })
  },
  popp() {
    let animationMain = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationOne = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationTwo = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationThree = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationFour = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    animationMain.rotateZ(180).step()
    animationOne.translate(0, -60).rotateZ(360).opacity(1).step()
    animationTwo.translate(-Math.sqrt(3600 - 400), -30).rotateZ(360).opacity(1).step()
    animationThree.translate(-Math.sqrt(3600 - 400), 30).rotateZ(360).opacity(1).step()
    animationFour.translate(0, 60).rotateZ(360).opacity(1).step()
    this.setData({
      animationMain: animationMain.export(),
      animationOne: animationOne.export(),
      animationTwo: animationTwo.export(),
      animationThree: animationThree.export(),
      animationFour: animationFour.export(),
    })
  },
  takeback() {
    let animationMain = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationOne = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationTwo = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationThree = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    let animationFour = wx.createAnimation({
      duration: 200,
      timingFunction: 'ease-out'
    })
    animationMain.rotateZ(0).step();
    animationOne.translate(0, 0).rotateZ(0).opacity(0).step()
    animationTwo.translate(0, 0).rotateZ(0).opacity(0).step()
    animationThree.translate(0, 0).rotateZ(0).opacity(0).step()
    animationFour.translate(0, 0).rotateZ(0).opacity(0).step()
    this.setData({
      animationMain: animationMain.export(),
      animationOne: animationOne.export(),
      animationTwo: animationTwo.export(),
      animationThree: animationThree.export(),
      animationFour: animationFour.export(),
    })
  },