H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】web高仿樊登H5/微信音乐播放悬浮球效果

这两天完成了一个仿樊登 H5 的音乐播放悬浮球效果,这个效果跟微信音乐播放悬浮球的效果也很相似,今天总结一下实现的思路过程(基于 Vue 实现)。

先来看看樊登 H5 的效果。

fandeng.gif

再来看看我的实现,挺完美的,哈哈。

floatcircle.gif

实现起来也不复杂,主要是一步步想清楚下面的实现步骤:

第一步:小球被限制在固定范围内滑动
第二步:停止滑动时,小球吸边效果
第三步:点击吸边状态下的小球,变换为音频播放控制面板,点击毛玻璃,恢复成小球
第四步:背景毛玻璃效果

一步步来说。

第一步:小球被限制在固定范围内滑动

touchmove可以获得小球的滑动事件,所以可以使用touchmove​来限制小球的滑动范围。

先给小球的 touchmove 传入 handleTouchMove 函数,在 handleTouchMove 中获取到滑动事件 e,使用 e.targetTouches[0]可以获得手指滑动的坐标 clientX 和 clientY,来计算小球 left、top 值,从而来控制小球随手指滑动。

      <div
        class="circle"
        v-if="!showCircleContent"
        @click="handleClickCircle"
        @touchend="handleTouchEnd"
        @touchmove.prevent="handleTouchMove"
      ></div>

当手指或鼠标滑动到超过屏幕的左边界时,就将小球的 left 重置为 0,不让小球超出左边界。当滑动超过右边界时,就将小球的 left 重置为视口的宽度减去小球的宽度,不让小球超出右边界。

顶部和底部边界也一样,当手指或鼠标滑动到超过顶部边界时,将小球的 top 重置为 0,超过底部边界时,将 top 重置为视口的高度减去小球的高度。

当然滑动范围可以自己来控制,详细控制小球滑动的代码如下:

    //限制悬浮球一个范围内滑动
    handleTouchMove(e) {
      this.isAnimated = false;  //手指拖动小球滑动的时候不需要动画,滑动停止的时候添加动画
      this.$refs.circle.style.borderRadius = "50%";
      let offsetX = e.targetTouches[0].clientX - this.circleWidth / 2; //减去this.circleWidth / 2目的是让手指按在悬浮球正中
      let offsetY = e.targetTouches[0].clientY - this.circleHeight / 2; //减去this.circleHeight / 2目的是让手指按在悬浮球正中
      if (offsetX <= 0 + this.placeholderWidth) {
        offsetX = 0 + this.placeholderWidth; //不让悬浮球完全贴边
      } else if (
        offsetX >=
        document.documentElement.clientWidth -
          this.circleWidth -
          this.placeholderWidth //微信悬浮球不是完全贴边,离屏幕边缘有一段距离
      ) {
        offsetX =
          document.documentElement.clientWidth -
          this.circleWidth -
          this.placeholderWidth;
      }

      if (offsetY <= 0 + this.placeholderWidth) {
        offsetY = 0 + this.placeholderWidth;
      } else if (
        offsetY >=
        document.documentElement.clientHeight -
          this.circleHeight -
          this.placeholderWidth
      ) {
        offsetY =
          document.documentElement.clientHeight -
          this.circleHeight -
          this.placeholderWidth;
      }
      this.$refs.circle.style.left = offsetX + "px";
      this.$refs.circle.style.top = offsetY + "px";
    },

第二步:停止滑动,悬浮球吸边效果

滑动小球,当手指松开时,小球需要吸附到屏幕边缘。根据小球中心的 x 坐标判断,如果 x 坐标小于屏幕宽度的一半,就吸附到屏幕左边,如果大于等于屏幕宽的一半则吸附到屏幕右边,实现代码走一波:

    //touchend的时候,悬浮球吸边显示
    handleTouchEnd(e) {
      this.isAnimated = true; //手指拖动小球滑动的时候不需要动画,滑动停止的时候添加动画
      let circleCenterX =
        parseInt(this.$refs.circle.style.left.replace("px", "")) +
        this.circleWidth / 2; //悬浮球中心的x坐标
      let circleCenterY =
        parseInt(this.$refs.circle.style.top.replace("px", "")) +
        this.circleHeight / 2; //悬浮球中心的y坐标

      if (circleCenterX < this.clientWidth / 2) {
        //吸附左侧
        this.$refs.circle.style.left = 0;
        this.$refs.circle.style.borderRadius = "0 50% 50% 0";
      } else {
        //吸附在右侧
        this.$refs.circle.style.left =
          this.clientWidth - this.circleWidth + "px";
        this.$refs.circle.style.borderRadius = "50% 0 0 50%";
      }

      if (circleCenterY >= this.clientHeight - this.placeholderBottom) {
        this.$refs.circle.style.top =
          this.clientHeight - this.placeholderBottom + "px";
      }
    },

第三步:点击吸边小球,变换为音频播放控制面板

当小球吸附到屏幕边缘时,点击小球,小球展开成音频控制面板,点击毛玻璃背景,小球收缩恢复原状。

floatcircle1.gif

在实现时我将小球 circle 跟音频控制面板 content 分开布局,大概是这个样子。

<div
  class="circle-box"
  :class="{
        opened: showCircleContent,
        animation: isAnimated
      }"
  ref="circle"
>
  <div class="content" v-if="showCircleContent">
    <!-- 音频控制面板,​显示歌曲名字、播放时长,同时还能控制播放暂停音频 -->
  </div>
  <div class="circle" v-if="!showCircleContent">
    <!-- 小球悬浮状态 -->
  </div>
</div>

使用 circle-box 包裹悬浮小球 circle 和音频控制面板 content,使用变量 showCircleContent 来判断当前应该显示悬浮球还是音频播放控制面板。

当点击悬浮球时 showCircleContent 为 true,小球伸长变换为音频播放控制面板。

点击毛玻璃背景,设置 showCircleContent 为 false,音频播放控制面板收缩恢复成悬浮小球。

伸缩动画

floatcircle1.gif

小球从悬浮球变为音频控制面板,或者从控制面板变为悬浮球时是有动画的,这个动画应该在 touchend 的时候才添加,在 touchmove 的时候去掉。因为小球滑动时如果有动画的话,会有卡顿的现象。

使用 isAnimated 来控制动画的添加和删除,在 touchend 的时候为 true,在 touchmove 改为 false。

第四步:背景毛玻璃效果

backdrop-filter 属性实现毛玻璃了解一下,filter 只能让当前元素有模糊效果,当前元素之下的元素还是清晰的。而 backdrop-filter 可以让当前元素及以下的元素都模糊,从而实现毛玻璃的效果。

backdrop-filter: blur(10px); //毛玻璃效果,ios有效
-webkit-backdrop-filter: blur(10px);

但是目前 backdrop-filter 的兼容性不是太好,在 IOS 平台能看到毛玻璃效果,Android 平台看不到。

backdrop-filter.png

OK,以上就是实现音乐播放悬浮球的思路总结,其实在实现过程中还有很多细节上的处理,如果想了解更多细节,可以关注我的公众号「程序员张晴天」,并在后台回复「悬浮球」即可获得demo完整源码。

如果对你有帮助的话,点赞、评论、赞赏都是对我的鼓励,也是支持我写下去的动力,谢谢!

本文原创发布于微信公众号「程序员张晴天」,欢迎关注第一时间获取最新分享,一起进步。

扫码_搜索联合传播样式-标准色版 copy.jpg

本文地址:H5W3 » 【前端技术】web高仿樊登H5/微信音乐播放悬浮球效果

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址