微信小程序悬浮功能小按钮

如上图所示，废话不多说，直接上代码
一、WXML

<view class="menu-box">
  <view class="navbar {{ play?'active':'' }}">
    <view class="btn" bindtap="changePlay">
      <view class="line" animation="{{ !play?line1CloseAn:line1OpenAn }}"></view>
      <view class="line" animation="{{ !play?line2CloseAn:line2OpenAn }}"></view>
      <view class="title" animation="{{ !play?titleCloseAn:titleOpenAn }}">
        菜单
      </view>
    </view>
  </view>
  <view class="menu">
    <view animation="{{ !play?btn4Close:btn4Open }}">
      <text>我的</text>
    </view>
    <view animation="{{ !play?btn3Close:btn3Open }}">
      <text>购物</text>
    </view>
    <view animation="{{ !play?btn2Close:btn2Open }}">
      <text>个人</text>
    </view>
    <view animation="{{ !play?btn1Close:btn1Open }}">
      <text>哈哈</text>
    </view>
  </view>
</view>

二、WXSS中

.menu-box {
    position: fixed;
    bottom: 40vw;
    right: 30rpx;
    width: 100rpx;
    padding-bottom: 100rpx;
}
.menu-box .navbar {
    z-index: 1000;
    position: absolute;
    bottom: 0rpx;
    width: 100rpx;
    height: 100rpx;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0rpx;
    border-radius: 50%;
}
.menu-box .navbar>.btn {
    padding: 25rpx;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.menu-box .navbar>.btn>.line {
    height: 6rpx;
    background-color: white;
    margin: 0px 2rpx 6rpx 2rpx;
    border-radius: 6rpx;
}
.menu-box .navbar>.btn>.title {
    font-size: 20rpx;
}
.menu-box .active {
    background-color: pink;
}
.menu-box .menu{
    /* width: 100rpx; */
    height: 100rpx;
    /* overflow: hidden; */
    position: relative;
    /* margin: 0 auto; */
    bottom: -100rpx;
}
.menu-box .menu>view {
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20rpx;
    border-radius: 50%;
    height: 100rpx;
    line-height: 100rpx;
    position: absolute;
    width: 100rpx;
    height: 100rpx;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    font-size: 0rpx;
    color: red;
}
.menu-box .menu>view text{
    display: inline-block;
    position: absolute;
    text-align: center;
    width:100%;
    height: 100%;
    color: white;
    z-index: 10000;
    font-size: 25rpx;
}

三js中

Component({
  data: {
    play: false
  },
  properties: {},
  methods: {
    changePlay(){
      let flag = !this.data.play;
      this.setData({
        play:flag
      });
      //start title
      let titleOpenAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '50% 50% 0'
      });
      titleOpenAn.opacity(0).step();
      this.setData({
        titleOpenAn:titleOpenAn.export()
      });
      let titleCloseAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '50% 50% 0'
      });
      titleCloseAn.opacity(1).step();
      this.setData({
        titleCloseAn:titleCloseAn.export()
      });
      //end title
      // start 第一条line
      let line1OpenAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '50% 50% 0'
      });
      line1OpenAn.translateY(12).rotate(45).scale(1.4, 1).step();
      this.setData({
        line1OpenAn:line1OpenAn.export()
      });
      let line1CloseAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '12rpx 50%'
      });
      line1CloseAn.translateY(0).rotate(0).scale(1, 1).step();
      this.setData({
        line1CloseAn:line1CloseAn.export()
      });
      //end 第一条line

      // start 第二条line
      let line2OpenAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100% 0'
      });
      line2OpenAn.translateY(-6.5).translateX(-1).rotate(-45).scale(1.4, 1).step();
      this.setData({
        line2OpenAn:line2OpenAn.export()
      });

      let line2CloseAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      line2CloseAn.translateY(0).rotate(0).scale(1, 1).step();
      this.setData({
        line2CloseAn:line2CloseAn.export()
      });
      //end 第二条line

      //start 第一个按钮
      let btn1Open = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100% 0'
      });
      btn1Open.translateX(-60).opacity(1).step();
      this.setData({
        btn1Open:btn1Open.export()
      });

      let btn1Close = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      btn1Close.translateX(0).opacity(0).step();
      this.setData({
        btn1Close:btn1Close.export()
      });
      //end 第一个按钮
      //start 第二个按钮
      let btn2Open = wx.createAnimation({
        duration: 500,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100% 0'
      });
      btn2Open.translateX(-120).opacity(1).step();
      this.setData({
        btn2Open:btn2Open.export()
      });

      let btn2Close = wx.createAnimation({
        duration: 500,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      btn2Close.translateX(0).opacity(0).step();
      this.setData({
        btn2Close:btn2Close.export()
      });
      //end 第二个按钮
      //start 第三个按钮
      let btn3Open = wx.createAnimation({
        duration: 700,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100% 0'
      });
      btn3Open.translateX(-180).opacity(1).step();
      this.setData({
        btn3Open:btn3Open.export()
      });

      let btn3Close = wx.createAnimation({
        duration: 700,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      btn3Close.translateX(0).opacity(0).step();
      this.setData({
        btn3Close:btn3Close.export()
      });
      //end 第三个按钮
      //start 第四个按钮
      let btn4Open = wx.createAnimation({
        duration: 700,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100% 0'
      });
      btn4Open.translateX(-240).opacity(1).step();
      this.setData({
        btn4Open:btn4Open.export()
      });

      let btn4Close = wx.createAnimation({
        duration: 700,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      btn4Close.translateX(0).opacity(0).step();
      this.setData({
        btn4Close:btn4Close.export()
      });
      //end 第四个按钮
    }
  }
})

注：想要html版本的，可以评论区留言