直播点赞喷射表情效果实现

最近在线看直播年会。有一个点赞的按钮，点击点赞按钮喷射表情，表情在屏幕上向上浮动之后消失。觉得这个效果挺具有代表性，所以想实现一下。

找了一个别人的效果图

就来实现这个效果。

写一个点赞按钮

html 复制代码

  <style>
    .like-box {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: #ddd;
      position: relative;
      top: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      left: 300px;
      cursor: pointer;
    }

    .like-box i {
      font-size: 25px;
    }
  </style>
  <div class="like-box" id="like-box">
    <i class="icon-dianzan iconfont"></i>
  </div>

其中中间的图标用的是阿里巴巴矢量图标库的图标字体。

动态创建表情

动态表情用一个div表示。背景是表情图片。有6个备选表情

div样式

css 复制代码

 .like-box div {
      position: absolute;
      width: 48px;
      height: 48px;
      background-image: url("./public/images/bg1.png");
      background-size: cover;
      z-index: -1;
    }

使用js创建表情图标，并插入到点赞div中

js 复制代码

const likeBox = document.getElementById('like-box') // id为like-box
const createFace = function () {
    const div = document.createElement('div')
    return div
}

likeBox.addEventListener('click', function () {
    const face = createFace()
    likeBox.appendChild(face)
})

实现表情动画效果

从最终效果图中可以看出，最终效果是由多个表情组成，更准确的说是由多个不同运动轨迹表情实现。所以关键是表情的轨迹实现。

而在运动轨迹过程中，有大小缩放效果、有淡出效果。所以至少有三个animation。

实现缩放效果

使用animation实现缩放效果，添加animation样式

js 复制代码

    @keyframes scale {
      0% {
        transform: scale(0.3);
      }

      100% {
        transform: scale(1.2);
      }
    }

当动态创建表情div时，将缩放效果添加到div上，添加后效果

实现淡出效果

使用animation实现淡出效果，添加animation样式

js 复制代码

    @keyframes opacity {
      0% {
        top: 0;
      }

      10% {
        top: -10px;
      }

      75% {
        opacity: 1;
        top: -180px;

      }

      100% {
        top: -200px;
        opacity: 0;
      }
    }

当动态创建表情div时，将淡出效果添加到div上，添加后具体效果

实现不同轨迹效果

单一轨迹

创建单一轨迹样式效果

css 复制代码

 @keyframes swing_1 {
      0% {}

      25% {
        left: 0;
      }

      50% {
        left: 8px;
      }

      75% {
        left: -15px;
      }

      100% {
        left: 15px;
      }
    }

当动态创建表情div时，将单一轨迹样式效果添加到div上，添加后具体效果

多轨迹

多轨迹有点麻烦，但是也不是很麻烦。具体思路是创建多个轨迹样式，然后在动态创建表情时给表情div随机添加各种轨迹样式，添加后具体效果

最终js代码

js 复制代码

const likeBox = document.getElementById('like-box')

const createFace = function () {
    // 随机表情
    const face = Math.floor(Math.random() * 6) + 1;
    // 随机轨迹
    const trajectory = Math.floor(Math.random() * 11) + 1; // bl1~bl11

    const div = document.createElement('div')

    div.className = `face${face} trajectory${trajectory}`;
    return div
}


likeBox.addEventListener('click', function () {
    const face = createFace()
    likeBox.appendChild(face)
})

移除产生的表情div

为了避免一直添加div，乃至最后降低动画性能，需要等animation结束后移除动画div

js 复制代码

const likeBox = document.getElementById('like-box')

const createFace = function () {
    const face = Math.floor(Math.random() * 6) + 1;
    const trajectory = Math.floor(Math.random() * 11) + 1; // bl1~bl11

    const div = document.createElement('div')

    div.className = `face${face} trajectory${trajectory}`;
    // 移除div
    div.addEventListener("animationend", () => {
        if(likeBox.contains(div)){
            likeBox.removeChild(div)
        }
    });
    return div
}

likeBox.addEventListener('click', function () {
    const face = createFace()
    likeBox.appendChild(face)
})

总结

所有的效果实现都通过css的animation实现。实际还可以使用canvas实现。关键是实现的思路。

核心思路：使用css的animation实现，基于对动画效果的拆分；拆出单一效果，之后所有效果同时发挥作用。

最近想到一件事，初高中学到的数学知识应该可以应用在开发中。有些前端效果实际就是数学知识的一种应用。更准确的说是高中数学函数图形以及几何图形那块，这两块都有曲线的函数或者方程表示。

如果要实现的效果是曲线或者轨迹的话，完全可以考虑它的坐标关系是不是数学中学到的。进而知道关系，进而开发出效果。

我一直想把中学和大学的知识应用，我想上面就是应用的一个点。

代码地址：github.com/zhensg123/r...

(本文完)

参考文章

H5 直播的疯狂点赞动画是如何实现的？(附完整源码)