微信小程序直播点赞组件及原理浅析

原理：

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(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。

完整源码请查看github：https://github.com/ruanhongbiao/live-like-miniapp-master  欢迎star和提意见！