微信小程序直播点赞功能及其工作原理分析

工作原理分析：

在微信小程序直播中实现点赞效果，主要依赖于三阶贝塞尔曲线来定义图标移动的路径。具体步骤如下：

1. 首先，绘制三条独立的三阶贝塞尔曲线，每条曲线将引导一个点赞图标按照特定的轨迹移动。这不仅增加了视觉上的吸引力，也提升了用户体验。

2. 接着，需要计算每个三阶贝塞尔曲线的数学表达式，即x(t)和y(t)，以确定图标在不同时间点的位置。三阶贝塞尔曲线由四个点定义：起点、终点和两个控制点。根据这些点，可以推导出x和y坐标的多项式表达式：

const startPoint = data[0]; // 起点坐标
const controlPoint1 = data[1]; // 第一控制点坐标
const controlPoint2 = data[2]; // 第二控制点坐标
const endPoint = data[3]; // 终点坐标
const timeFactor = factor.t; // 时间参数，范围从0到1
// 计算多项式系数
const xCoeff1 = 3 * (controlPoint1.x - startPoint.x);
const xCoeff2 = 3 * (controlPoint2.x - controlPoint1.x) - xCoeff1;
const xCoeff3 = endPoint.x - startPoint.x - xCoeff1 - xCoeff2;
const yCoeff1 = 3 * (controlPoint1.y - startPoint.y);
const yCoeff2 = 3 * (controlPoint2.y - controlPoint1.y) - yCoeff1;
const yCoeff3 = endPoint.y - startPoint.y - yCoeff1 - yCoeff2;
// 计算当前时间点下的x和y坐标
const xPosition = xCoeff3 * Math.pow(timeFactor, 3) + xCoeff2 * Math.pow(timeFactor, 2) + xCoeff1 * timeFactor + startPoint.x;
const yPosition = yCoeff3 * Math.pow(timeFactor, 3) + yCoeff2 * Math.pow(timeFactor, 2) + yCoeff1 * timeFactor + startPoint.y;
return {x: xPosition, y: yPosition};

3. 为了简化代码并提高效率，当需要处理多条贝塞尔曲线时，可以通过循环调用ctx.drawImage方法，而不是为每条曲线单独编写代码。此外，通过设置定时器，可以确保图标按照预定的时间间隔沿曲线移动，从而实现平滑的动画效果。

4. 完整的项目代码可以在GitHub上找到：https://github.com/ruanhongbiao/live-like-miniapp-master，欢迎各位开发者提出宝贵的意见和建议。