仿抖音点赞效果----LovePraise

　　原理很简单，通过手指触摸屏幕的xy轴来做心形图片的动画，所以无论点到哪里，心形动画就会出现在哪里

　　小伙们，咱们又见面了。不知道小伙伴们是否还记得小编也发布过相关H5和CSS3使用技巧相关文章，一起来回顾回顾：

　　为了烘托直播间的氛围，直播相对于普通视频或者文本内容，点赞通常有两个特殊需求：

　　那么如何实现这些要求呢？下面介绍两种实现方式来实现(底部附完整 demo)：

　　首先看下 animation 合并写法，具体含义就不解释了，如果需要可以自行了解。

　　看一下 HTML 结构。外层一个结构固定整个显示动画区域的位置。这里在一个宽 100px ,高 200px 的 div 区域。

　　这里设置运行时间 4s ;采用线性运动 linear，如果有需求当然也可以使用其他曲线，比如 ease;每个点赞动画只运行 1 次;动画是只需要向前 forwards。

　　渐隐效果，使用 opacity 即可。这里我们固定在最后 1/4 开始渐隐。修改 bubble_y:

　　这里从 0.3 倍原图放大到 1 倍。这里注意运行时间，比如上面设置，从动画开始到结束总共是 4s，那么这个放大时间就可以按需设置了，比如 0.5s。

　　我们先定义帧动画：bubble_1 来执行偏移。图片开始放大阶段，这里没有设置偏移，保持中间原点不变。

　　大家可以想到了，这是定义的一个经典的左右摆动轨迹，“向左向右向左向右” 曲线摆动效果。

　　这里预设了一种运行曲线轨迹，左右摆动的样式，我们在再预设更多种曲线，达到随机轨迹的目的。

　　比如 bubble_1 的左右偏移动画轨迹，我们可以修改偏移值，来达到不同的曲线: JS 操作随机增加节点样式

　　如果是批量更新到节点上，不设置延时的话，那就会扎堆出现。随机“ bl ”样式，就随机了延时，然后批量出现，都会自动错峰显示。我们还需要增加当前用户手动点赞的动画，这个不需要延时。

　　另外，有可能同时别人下发了点赞 40 个，业务需求通常是希望这 40 个点赞气泡都能依次出现，制造持续的点赞氛围，否则下发量大又会扎堆显示了。

　　那么我们还需要分批打散点赞数量，比如一次点赞的时间（$bubble_time）是 4s, 那么 4s 内，希望同时出现多少个点赞呢？比如是 10个，那么 40 个点赞，需要分批 4 次渲染。

　　这个很容易理解，直接在 canvas 上绘制动画就行，如果不了解 canvas 的，可以后续学习下。

　　定义一个点赞类，ThumbsUpAni，构造函数就是读取 canvas,保存宽高值。

　　将需要随机渲染的点赞图片，先预加载，获得图片的宽高，如果有下载失败的，则不显示该随机图片即可。没啥说的，简单易懂。

　　实时渲染图片，使其变成一个连贯的动画，很重要的是：生成曲线轨迹。这个曲线轨迹需要是平滑的均匀曲线。假如生成的曲线轨迹不平滑的话，那看到的效果就会太突兀，比如上一个是 10 px，下一个就是 -10px，那显然，动画就是忽左忽右左右闪烁了。

　　理想的轨迹是上一个位置是 10px,接下来是 9px，然后一直平滑到 -10px，这样的坐标点就是连贯的，看起来动画就是平滑运行。

　　如果要做到平滑曲线，其实可以使用我们再熟悉不过的正弦( Math.sin )函数来实现均匀曲线。

　　这是 Math.sin(0) 到 Math.sin(9) 的曲线图走势图，它是一个平滑的从正数到负数，然后再从负数到正数的曲线图，完全符合我们的需求，于是我们再需要生成一个随机比率值，让摆动幅度随机起来。

　　这里设置角度系数 angle 最大为 10 ，从底部到顶部运行两个波峰。

　　当然如果运行距离再长一些，我们可以增大 angle 值，比如变成 3 个波峰(如果时间短，出现三个波峰，就会运行过快，有闪烁现象)。如下图:

　　当运行时间 diffTime 小于设置的 scaleTime 的时候，按比例随着时间增大，scale 变大。超过设置的时间阈值，则返回最终大小。

　　创建完绘制对象之后，就可以实时绘制了，根据上述获取到的“偏移值”，“放大”和“淡出”值，然后实时绘制点赞图片的位置即可。

　　每个执行周期，都需要重新绘制 canvas 上的所有的动画图片位置，最终形成所有的点赞图片都在运动的效果。

　　开启实时绘制扫描器，将创建的渲染对象放入 renderList 数组，数组不为空，说明 canvas 上还有动画，就需要不停的去执行 scan，直到 canvas 上没有动画结束为止。

　　每点赞一次或者每接收到别人点赞一次，则调用一次 start 方法来生成渲染实例，放进渲染实例数组。如果当前扫描器未开启，则需要启动扫描器，这里使用了 scanning 变量，防止开启多个扫描器。

　　当接收到大量的点赞数据，且连续多次点赞（直播间人气很旺的时候）。那么点赞数据的渲染就需要特别注意了，否则页面就是一坨一坨的点赞动画。且衔接不紧密。

　　定时器的延时时间 time 根据开启定时器的时候，需要渲染多少点赞动画来决定的，比如需要渲染 100 个点赞动画，我们将 100 个点赞动画分布在 5s 内渲染完。

　　我们来看下两者的数据对比。以下为未开启硬件加速的对比，采用不间断疯狂渲染点赞动画的数据对比：

作者：admin

抖音运营 站点 QQ交谈