1. 首页首页
  2. 科技前沿科技前沿

贝塞尔曲线轨迹运动原理与实战

科技前沿 • • 阅读 19

贝塞尔曲线轨迹运动原理与实战大厂技术 坚持周更 精选好文 本次分享大概分为下面几个方面 背景 贝塞尔曲线讲解 实现和探索过程 背景 近期在 X 业务测评报告页有一个需求 用户可以左右拖动滑块来查看各个等级的信息 在之前的野种中是通过切换图片的方式 会有卡顿的现象 由于 X 业务中等级区分比较少 等级间距更大

大家好，我是讯享网，很高兴认识大家。

大厂技术  坚持周更  精选好文

本次分享大概分为下面几个方面

  • 背景
  • 贝塞尔曲线讲解
  • 实现和探索过程

背景

近期在 X 业务测评报告页有一个需求，用户可以左右拖动滑块来查看各个等级的信息。

0c5800b68c49b5ea7e1b52aea1e3b351.gif
讯享网

在之前的野种中是通过切换图片的方式，会有卡顿的现象。由于 X 业务中等级区分比较少，等级间距更大，所以卡顿感会更大。

046caafe5c46811acb92ff7005524342.gif

所以为了能够体现更丝滑的效果，使用svg画出贝塞尔曲线，动态控制实线和虚线的切换以及空心小球的位置。

svg中的path标签 

<svg>   <path        stroke="red"        fill="none"         d="M 4,130 C 12.85,129.1 45.3,126.7 63,124 C 80.7,121.3 104.3,116.5 122,1                        12 C 139.7,107.5 163.3,100.3 181,94 C 198.7,87.7 222.3,78.001 240,70 C 257.7,61.9 281.3,49.0006 299,40 C 316.7,30.1 349.15,9.0004 358,4"></path> </svg>

讯享网 b6006639b51f2f857fb32466b097eba7.png

M- moveto - 从一点移到另一点.（作为起点）

L- lineto -创建一条线.

H- horizontal lineto - 创建一条水平线.

V- vertical lineto - 创建一条竖线.

C- curveto - 创建(三阶)贝塞尔曲线到.

S- smooth curveto - 创建一条平滑曲线

Q- quadratic Bezier curve - 创建一个二次贝塞尔曲线

T- smooth quadratic Bezier curveto - 创建一个平滑二次贝塞尔曲线.

A- elliptical Arc - 创建一个椭圆弧.

Z- closepath - 关闭路径

上述命令使用大写字母，代表绝对路径，如果使用小写字母，则使用相对路径。

d="M 4,130 C 12.85,129.1 45.3,126.7 63,124".

贝塞尔曲线

贝塞尔曲线，由“线段”和节点组成，节点是可拖动的支点，表示曲线的趋向，“线段”像可伸缩的橡皮筋。它抽象了线段和曲线，通过控制路径上的四个点（起始点、终止点、两个中间点）来编辑图形；其中中间点和端点的连线称为控制线，这是一条虚拟的线段；两端的端点用来改变曲线的曲率；移动中间点来改变曲线运动轨迹。

一阶贝塞尔曲线

公式：B(t) = P1 + (P2 − P1)t = P1(1−t)+ P2t, t∈[0,1]

ce20968f3fcd365b59f22332ebce93e0.gif

二阶贝塞尔曲线

在平面内选3个不同线的点P1、P2、P3并且依次用线段连接，P1，P3为固定点，P2为支点（控制点）

公式：

M = P1(1-t)+P2t

N = P2(1-t)+P3t

B(t) = M(1-t)+Nt

056d12b3341ddbf24b516cdbe85a0be0.gif 56322c62cd9156e028442d1c3b4b4b3d.png

三阶贝塞尔曲线

公式：

X(t) = P(1)(1 - t) + P(2)t

Y(t) = P(2)(1 - t) + P(3)t

Z(t) = P(3)(1 - t) + P(4)t

M(t) = X(1 - t) + Yt

N(t) = Y(1 - t) + Zt

B(t) = M(1 - t) + Nt

，

9a4ec7e685353155dd44e35aa796af63.gif a61288f1904212649545c78c96bf4eb7.png

N阶贝塞尔曲线

在三阶贝塞尔曲线中，如何确定控制点

860e69653ccbeea95794fe7747c40305.jpeg

方向：越是高阶可导函数曲线越是光滑,在只要保证曲线函数试一阶导数连续，换句话说只要保证曲线的切线斜率连续，那么我们很容易确定CP（control point）点的所在直线的斜率。

长度: 长度决定了曲线弧度的大小（宽窄），有一种计算方式可以使曲线弧度很自然。

AC的长度 * smoothing, smoothing = 0.15比较光滑

对于第一个点A,和最后一个点D的控制点，可以简单把AB的方向看作是A点的切线方向，长度为AB*smoothing。同理可知道点D附近的控制点

46e014222bd5236323f4f91a0d3ebd5b.png

实现动效的难点

  1. 跟手变化的时候，实线和虚线的切换
  2. 空心小球在曲线上跟手移动
  3. 松手后，小球和曲线的动画

SVG基础

stroke-dasharray 和 stroke-dashoffset

22073874f8aed3d9866430412c636fe2.png
  1. stroke-dasharray:用于创建虚线

    1. 如：stroke-dasharray = '10, 5' 表示：虚线(Dash)长10，间距(Gap)5，然后重复 虚线长10，间距5
    2. 如：stroke-dasharray = '20, 10, 5' 表示：虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
  2. stroke-dashoffset：offset：偏移的意思
    1. 这个属性是相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。需要注意的是，不管偏移的方向是哪边，要记得dasharray 是循环的，也就是 虚线-间隔-虚线-间隔。这个属性要搭配stroke-dasharray才能看得出来效果，非虚线的话，是无法看出偏移的。

如：https://codepen.io/Josh_byte/pen/MWQVWKK[1]

Offset-path和offset-distance css属性

  • 通过css属性offset-path可以指定元素不规则的动画路径
  • offset-distance，是运动的距离，可以是数值或者百分比单位，如果是100%则表示正好把所有的路都跑完了。

如：https://codepen.io/Josh_byte/pen/PoQzjON[2]

参考：https://zhuanlan.zhihu.com/p/[3]

兼容性

4726f495480c2630b91e394074953a6c.png

实现过程

8436687b65c7d0e6b96438eee45b52b9.png

step1 画贝塞尔曲线图

eb2f0078ba76b0206ee8a5d502ea2281.png
image.png
3d00751f66bfac860d26c53e0d091904.png

BC直线的斜率 与x1x2直线的斜率一致

算圆心点坐标&把手坐标

讯享网//动态计算出的圆心坐标 const PointArray = [ [4, 130], [63, 124], [122, 112], [181, 94], [240, 70], [299, 40], [358, 4] ] //算出当前点前一个点和后一个点的角度 const line = (pointA: number[], pointB: number[]) => {     const lengthX = pointB[0] - pointA[0];     const lengthY = pointB[1] - pointA[1];     return {       length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),       angle: Math.atan2(lengthY, lengthX),     };   }; //求每两个圆心坐标之间的两个把手 const controlPoint = (current: number[], previous: number[], next: number[], reverse: boolean) => {     const p = previous || current;     const n = next || current;     const l = this.line(p, n);     const angle = l.angle + (reverse ? Math.PI : 0);     const length = l.length * BezierCurveAndCirclePoint.smoothing;     const x = current[0] + Math.cos(angle) * length;     const y = current[1] + Math.sin(angle) * length;     return [x, y];   };    const getBezierCurvePointArray = () => {     const array: Point[][] = [];     pointArray.forEach((item, i) => {       if (i === 0) {         return;       }       const cps = this.controlPoint(this.pointArray[i - 1], this.pointArray[i - 2], item, false);       const cpe = this.controlPoint(item, this.pointArray[i - 1], this.pointArray[i + 1], true);       array.push([         {           x: pointArray[i - 1][0],           y: pointArray[i - 1][1],         },         {           x: cps[0],           y: cps[1],         },         {           x: cpe[0],           y: cpe[1],         },         {           x: item[0],           y: item[1],         },       ]);     });     return array; };

绘制三条三阶贝塞尔曲线

b555a71589af6edbba73a4c41df9b6ed.png

观察发现

绿色实线变绿色虚线的过程可以看成，绿色实线往左偏移的过程（stroke-dashoffset)

灰色实线变绿色虚线的过程，可以看成，灰色实线往右偏移的过程。

绿色虚线，在最底层，没有变化。变化的是绿色和灰色实线

案例 https://codepen.io/Josh_byte/pen/bGLvKYM[4]

step2 求曲线弧长

如何判断stroke-dashoffset的距离？跟手移动2px，绿色实线或灰色实线移动多少？

stroke-dasharray的初始值设置为多少？

如何求三阶贝塞尔曲线函数的坐标

fecef71ed641642de73d68fc36f20e52.png 34917f5b2cc45d0f468ab17b843796b4.png

P0 是起始点坐标

P1,P2是控制点

P3是终点坐标

t是百分比（在曲线位置的百分比）

const calculateCirclePoint = (t: number, PointArray: Point[]) => {     const p0 = PointArray[0];     const p1 = PointArray[1];     const p2 = PointArray[2];     const p3 = PointArray[3];     const temp = 1 - t;     const x =       p0.x * temp * temp * temp +       3 * p1.x * t * temp * temp +       3 * p2.x * t * t * temp +       p3.x * t * t * t;     const y =       p0.y * temp * temp * temp +       3 * p1.y * t * temp * temp +       3 * p2.y * t * t * temp +       p3.y * t * t * t;     return {       x,       y,     };   }; //举个例子，第一段曲线 const curvePoint =  [{x: 122, y: 112}, //起始点 {x: 139.7, y: 107.5}, //把手一 {x: 163.3, y: 100.3}, //把手二 {x: 181, y: 94}]。//终点 calculateCirclePoint(0.5,curvePoint)

如何求弧长

80d7bb12440ac29ae23ec9cbe1261ec6.png

采样大概估算弧长，一段曲线中等间距采点60个，每两个点计算的间距求和

讯享网const cubicBezierLength = (PointArray: Point[], sampleCount?: number) => {     const ptCount = sampleCount || 40;     let totDist = 0;     let lastX = PointArray[0].x;     let lastY = PointArray[0].y;     let dx;     let dy;     for (let i = 1; i < ptCount; i++) {       const pt = this.calculateCirclePoint(i / ptCount, PointArray);       dx = pt.x - lastX;       dy = pt.y - lastY;       totDist += Math.sqrt(dx * dx + dy * dy);       lastX = pt.x;       lastY = pt.y;     }     dx = PointArray[3].x - lastX;     dy = PointArray[3].y - lastY;     totDist += Math.sqrt(dx * dx + dy * dy);     return Math.floor(totDist);   };

完成以上两步，就可以实现曲线跟手移动的变化还有松手时候的动效了。

step3 实现空心小球跟手移动

由于offset-path属性在ios上不支持，只能实时求空心小球的实时坐标

30e13d8437e5ebe7e0dfb97084547f6d.png

step4 实现空心小球松手后的吸附动效

SVG SMIL animation

  1. <animateMotion/>
<circle     opacity={circleAnimationPointOpacity ? '1' : '0'}     r="3"     fill="#ffffff"     strokeWidth="2"     stroke="#43E077"     >             <animateMotion               ref={circleAnimationRef}               path={cirlceAnimationPath} //运动路径                dur="200ms"   //持续时间               keySplines="0.25 0.1 0.25 1" //动画时间曲线               fill="freeze".    //结束后在原位置               begin="indefinit".   //无限等待 开始用circleAnimationRef.current.beginElement()               repeatCount="1".  //执行一次             />  </circle>

案列 https://codepen.io/Josh_byte/pen/oNEYpjO[5]

  1. 有两个空心绿色小球，一个小球是跟手移动的空心小球，还有一个是实现松手后动画的空心小球。

参考资料

[1]

https://codepen.io/Josh_byte/pen/MWQVWKK: https://codepen.io/Josh_byte/pen/MWQVWKK

[2]

https://codepen.io/Josh_byte/pen/PoQzjON: https://codepen.io/Josh_byte/pen/PoQzjON

[3]

https://zhuanlan.zhihu.com/p/: https://zhuanlan.zhihu.com/p/

[4]

https://codepen.io/Josh_byte/pen/bGLvKYM: https://codepen.io/Josh_byte/pen/bGLvKYM

[5]

https://codepen.io/Josh_byte/pen/oNEYpjO: https://codepen.io/Josh_byte/pen/oNEYpjO

- END -

❤️ 谢谢支持

以上便是本次分享的全部内容，希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~。

欢迎关注公众号 趣谈前端 收货大厂一手好文章~

67d132b5d53cd7b0f90008895e3aadd7.gif

从零设计可视化大屏搭建引擎

基于Koa + React + TS从零开发全栈文档编辑器(进阶实战

点个在看你最好看

小讯
上一篇 2025-03-12 16:47
下一篇 2025-02-06 20:02

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/18762.html