先发Canvas实现直播点赞气泡效果图：
实现细节：
1.JS：
1){
factor.t=0;
cancelAnimationFrame(timer);
that.startTimer();
}else{
timer =requestAnimationFrame(function(){
that.drawImage([[{x:30,y:400},{x:70,y:300},{x:-50,y:150},{x:30,y:0}],[{x:30,{x:80,{x:0,y:90},y:100},y:0}]])
})
}}
2.原理：
a.通过绘制三条不同的三阶贝塞尔曲线，选取三张图片让其沿着各自的贝塞尔曲线运动，运动轨迹如下图：
b.计算三阶贝塞尔曲线x(t),y(t)的数学表达式。
三阶贝塞尔曲线是通过四个点来形成一条曲线，两个控制点，一个起点一个终点。
利用多项式系数即可得到x(t),y(t)的数学表达式：
这里画了三条贝塞尔曲线，套用公式三次即可，这里没有采用循环，如果贝塞尔曲线条数比较多时，可采用循环调用 ctx.drawImage，其中factor.t为三阶贝塞尔曲线的参数，取值范围[0,1],最后调用ctx.draw(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。
3.Tip：
这里采用的定时器是通过requestAnimationFrame（）函数实现的， 弃用setInterval的原因是实际测试中有卡帧现象并且动画显示有细微的不连续。
项目地址：
github：nofollow" href="https://github.com/jeffer0323/We-Canvas">https://github.com/jeffer0323/We-Canvas
原文链接：https://www.f2er.com/weapp/41705.html