直播点赞喷射表情效果实现
最近在线看直播年会。有一个点赞的按钮，点击点赞按钮喷射表情，表情在屏幕上向上浮动之后消失。觉得这个效果挺具有代表性，所以想实现一下。
找了一个别人的效果图
就来实现这个效果。
写一个点赞按钮
<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样式
.like-box div {
position: absolute;
width: 48px;
height: 48px;
background-image: url("./public/images/bg1.png");
background-size: cover;
z-index: -1;
}
使用js创建表情图标，并插入到点赞div中
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样式
@keyframes scale {
0% {
transform: scale(0.3);
}
100% {
transform: scale(1.2);
}
}
当动态创建表情div时，将缩放效果添加到div上，添加后效果
实现淡出效果
使用animation实现淡出效果，添加animation样式
@keyframes opacity {
0% {
top: 0;
}
10% {
top: -10px;
}
75% {
opacity: 1;
top: -180px;
}
100% {
top: -200px;
opacity: 0;
}
}
当动态创建表情div时，将淡出效果添加到div上，添加后具体效果
实现不同轨迹效果
单一轨迹
创建单一轨迹样式效果
@keyframes swing_1 {
0% {}
25% {
left: 0;
}
50% {
left: 8px;
}
75% {
left: -15px;
}
100% {
left: 15px;
}
}
当动态创建表情div时，将单一轨迹样式效果添加到div上，添加后具体效果
多轨迹
多轨迹有点麻烦，但是也不是很麻烦。具体思路是创建多个轨迹样式，然后在动态创建表情时给表情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}`;
return div
}
likeBox.addEventListener('click', function () {
const face = createFace()
likeBox.appendChild(face)
})
移除产生的表情div
为了避免一直添加div，乃至最后降低动画性能，需要等animation结束后移除动画div
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实现，基于对动画效果的拆分；拆出单一效果，之后所有效果同时发挥作用。
最近想到一件事，初高中学到的数学知识应该可以应用在开发中。有些前端效果实际就是数学知识的一种应用。更准确的说是高中数学函数图形以及几何图形那块，这两块都有曲线的函数或者方程表示。
如果要实现的效果是曲线或者轨迹的话，完全可以考虑它的坐标关系是不是数学中学到的。进而知道关系，进而开发出效果。
我一直想把中学和大学的知识应用，我想上面就是应用的一个点。
(本文完)