直播电商源码的点赞功能大家都知道，我们也注意到点赞动画会按照一定的轨迹运动，直播电商源码是怎么实现这个点赞特效的呢？
原理：
a.通过绘制三条不同的三阶贝塞尔曲线，选取三张图片让其沿着各自的贝塞尔曲线运动，运动轨迹如下图：
b.计算三阶贝塞尔曲线x(t),y(t)的数学表达式。
三阶贝塞尔曲线是通过四个点来形成一条曲线，两个控制点，一个起点一个终点。
利用多项式系数即可得到x,y的数学表达式：
const p0 = data[0]; // 三阶贝塞尔曲线起点坐标值
const p1 = data[1]; // 三阶贝塞尔曲线第一个控制点坐标值
const p2 = data[2]; // 三阶贝塞尔曲线第二个控制点坐标值
const p3 = data[3]; // 三阶贝塞尔曲线终点坐标值
const t = factor.t;
/*计算多项式系数*/
const cx1 = 3 * (p1.x - p0.x);
const bx1 = 3 * (p2.x - p1.x) - cx1;
const ax1 = p3.x - p0.x - cx1 - bx1;
const cy1 = 3 * (p1.y - p0.y);
const by1 = 3 * (p2.y - p1.y) - cy1;
const ay1 = p3.y - p0.y - cy1 - by1;
/*计算xt yt的值 */
const x = ax1 * (t * t * t) + bx1 * (t * t) + cx1 * t + p0.x;
const y = ay1 * (t * t * t) + by1 * (t * t) + cy1 * t + p0.y;
return {
x,
y
};
这里画了三条贝塞尔曲线，直播电商源码套用公式三次即可，这里没有采用循环，如果贝塞尔曲线条数比较多时，可采用循环调用 ctx.drawImage，其中factor.t为三阶贝塞尔曲线的参数，取值范围[0,1], 最后调用ctx.draw(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。
————————————————
声明：本文由云豹科技转发自ruanhongbiao博客，如有侵权请联系作者删除
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70002045/viewspace-2789509/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
教你如何实现直播源代码的搜索功能
下一篇：
实现在线直播源码一个简单的个人信息页面
请登录后发表评论
登录
全部评论
