小程序二次贝塞尔曲线实现购物车商品曲线的飞行效果

前段时间在业余时间看了一篇关于贝塞尔曲线算法的文章，尝试在小程序中实现小程序的贝塞尔曲线算法及其效果。

主要技术要点如下：1 .小程序和数据绑定的wxss布局2。js二次贝塞尔曲线算法

核心算法用app.js编写

Bezier :函数(点，次){//0，以三个控制点为例，D点设置在点A，B，C，AB上，E点设置在BC上，F点设置在E，DE的连线上，那么最终的Bezier曲线就是点F. //1的坐标轨迹。计算相邻控制点之间的距离。//2.根据完成时间，计算每次执行时AB方向的d和BC方向的e的移动距离。//3.每增加100ms的时间，d和e就会向指定的方向位移，而d e中f的位移可以通过AD/AB=DF/DE得到。//4.根据DE的正弦和余弦值以及DE的值计算f的坐标。//相邻控制AB点之间的距离var bezier _ points=[]；var points _ D=[]；var points _ E=[]；const DIST _ AB=math . sqrt(math . pow(点[1]['x'] -点[0]['x']，2) Math.pow(点[1]['y'] -点[0]['y']，2))；//相邻控制点BC之间的距离const dist _ BC=math . sqrt(math . pow(点[2][' x ']-点[1] ['x']，2) math.pow(点[2][' y ']-点[1])//D AB方向每次移动的距离const每_ move _ ad=dist _ AB/次；//E BC方向每次移动的距离const每_ move _ be=dist _ BC/次；//点AB的正切const tan _ AB=(点[1][' y ']-点[0] ['y'])/(点[1][' x ']-点[0][' x '])；//点BC的正切const tan _ BC=(点[2][' y ']-点[1] ['y'])/(点[2][' x ']-点[1][' x '])；//AB点的弧度值const radius _ AB=math . atan(tan _ AB)；//BC点的弧度值const radius _ BC=math . atan(tan _ BC)；//每次执行(var I=1；i=次数；I)距离{//AD var dist _ AD=EACH _ MOVE _ AD * I；be var dist _ BE=EACH _ MOVE _ BE * i的距离；//D点的坐标var point _ D={ }；point _ D[' x ']=dist _ AD * math . cos(RADIUS _ AB)点[0][' x ']；点_ D[' y ']=dist _ AD * math . sin(RADIUS _ AB)点[0][' y ']；points_D.push(点_ D)；//E点的坐标var point _ E={ }；点_ E[' x ']=dist _ BE * math . cos(RADIUS _ BC)点[1][' x ']；点_ E[' y ']=dist _ BE * math . sin(RADIUS _ BC)点[1][' y ']；点推(点推)；//此时线段DE var tan _ de的正切值=(point _ e[' y ']-point _ d[' y '])/(point _ e[' x ']-point _ d[' x '])；tan _ de var半径_DE=Math.atan(tan_DE)的弧度值；//市县距离DE vardist _ DE=math . sqrt(math . pow((point _ e[' x ']-point _ d[' x '])，2)math . pow((point _ e[' y ']-point _ d[' y '))//此时DF的距离为vardist _ DF=(dist _ ad/dist _ ab)* dist _ DE；//此时测向点var point _ F的坐标={ }；点_ F[' x ']=dist _ DF * math . cos(radius _ DE)点_ D[' x ']；点_ F[' y ']=dist _ DF * math . sin(radius _ DE)点_ D[' y ']；bezier_points.push(点_ F)；}返回{ '贝塞尔_点' :贝塞尔_点}；}注释很详细，算法的原理其实很简单。源代码也发出去了，github地址：https://github.com/xiongchenf/flybus.git

调用方法和用法不会占用空间，都是基本的东西。效果图如下：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。