微信小程序直播点赞组件及原理浅析-微信直播小程序组件开发-微信小程序组件开发-即速应用

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

浏览量：2499 时间：2020-04-06 来源：ruanhongbiao

原理：1.
a.通过绘制三条不同的三阶贝塞尔曲线，选取三张图片让其沿着各自的贝塞尔曲线运动，运动轨迹如下图：
2.
b.计算三阶贝塞尔曲线x(t),y(t)的数学表达式。三阶贝塞尔曲线是通过四个点来形成一条曲线，两个控制点，一个起点一个终点。利用多项式系数即可得到x,y的数学表达式：
constp0data[0];//三阶贝塞尔曲线起点坐标值constp1data[1];//三阶贝塞尔曲线第一个控制点坐标值constp2data[2];//三阶贝塞尔曲线第二个控制点坐标值constp3data[3];//三阶贝塞尔曲线终点坐标值consttfactor.t;/*计算多项式系数*/constcx13*(p1.x-p0.x);constbx13*(p2.x-p1.x)-cx1;constax1p3.x-p0.x-cx1-bx1;constcy13*(p1.y-p0.y);constby13*(p2.y-p1.y)-cy1;constay1p3.y-p0.y-cy1-by1;/*计算xtyt的值*/constxax1*(t*t*t)+bx1*(t*t)+cx1*t+p0.x;constyay1*(t*t*t)+by1*(t*t)+cy1*t+p0.y;return{x,y};3.
这里画了三条贝塞尔曲线，套用公式三次即可，这里没有采用循环，如果贝塞尔曲线条数比较多时，可采用循环调用ctx.drawImage，其中factor.t为三阶贝塞尔曲线的参数，取值范围[0,1],最后调用ctx.draw(),并且设置定时器即可实现图片沿着贝塞尔曲线运动。
4.
完整源码请查看github：https://github.com/ruanhongbiao/live-like-miniapp-master欢迎star和提意见！