search

博客列表 >3阶（次）贝塞尔曲线的JavaScript(JS)实现

3阶（次）贝塞尔曲线的JavaScript(JS)实现

子龙的博客搬家啦httpswwwcnblogscomZiLongZiLong
子龙的博客搬家啦httpswwwcnblogscomZiLongZiLong原创
2022年02月09日 20:19:053132浏览
php中文网数学符号的显示太差了，推荐看这里

贝塞尔曲线简介：
贝塞尔曲线，是贝塞尔老爷子在使用电子计算机设计汽车零件的时候 进行曲面设计而采用的一种参数化的样条曲线.

一般参数方程：


B(t) = \sum_{i=0}^nC_n^iP_i(1-t)^{n-i}t^i

由公式很容易可以看出n阶贝塞尔曲线需要的点数是n+1个点，该公式为参数方程，并不是一般意义上的y=f(x),而是y = f(t),x = f(t).

贝塞尔曲线就是用来画曲线的，以三阶贝塞尔曲线为例，他有四个控制点，第一个点和最后一个点是这条曲线的起始点和终止点，曲线必定会经过这两个点，而第二个和第三个则是控制曲线形状的，更直接来说通过改变第二个点和第三个 点的位置，曲线的斜率就会受到影响。具体的影响可以直接打开chrome调试面板任意设置一个transition属性 然后观察其timing-function 看到效果。

上边说到了斜率，那其实在一个位移-时间的曲线方程中，斜率则代表了速度，实际在web动画中位移可以换成任何一个属性(详见早年间关于动画的一些论断)。

那其实用js实现一条三阶贝塞尔曲线，无外呼是找一个 时间x -> 其他任意属性y 之间的映射。

这里，x我们是已知的，现在的需求就是解出y，以CSS的transition-timing-function做为一个参考，我们可以把起始点和终止点的坐标设置成(0,0)和(1,1) （实际很多东西都会这么处理，最后的结果做一个线性映射就好），自然两个控制点的范围也应该在0-1之间。

先将贝塞尔曲线展开成一般形式:


B(t) = P_0(1-t)^3 + 3P_1t(1-t)^2 + 3P2t^2(1-t) + P3t^3

起始、终止点带入简化:


B(t) = 3P_1t(1-t)^2 + 3P_2t^2(1-t) + t^3

OK,理论完成可以实践了。

假定，我们得到某一时刻的时刻值 x , 那么通过参数方程B(t) = x , 可求得参数t的值，再将该t带入 y = B (t)，中即可求得我们想要的最终结果y。

所以，归根结底，第一件事情是要解方程，多次函数的求根并不容易，这里具体实现的时候，我们可以参考chromium的贝塞尔曲线实现，来解决这个问题，具体的做法是，首先通过8次牛顿迭代，如果找到了就直接return结果，如果没有，就开始Bisection_method(应该叫对分法)。

牛顿迭代的原理，简而言之就是在一条曲线上任选一点做切线，然后在该切线与x轴的交点上做一条垂直于x轴的直线，假设该直线与曲线相交于另一个点，再在该点做切线。。。 一直重复此过程，切线于x轴的交点会越来越与曲线的根接近。

基本推导:
假设有曲线y = f(x) 该曲线上任取一点x_0,y_0,做该点切线，
则，该点处切线的斜率为f^{(1)}(x_0)；
由曲线方程 y = kx + b 代入以上参数得
b = f(x_0) - f^{(1)}(x_0)x_0
故 切线方程为 g(x) = f(x_0) - f^{(1)}(x_0)(x_0-x);
得到该切线与x轴得交点为x_1 = x_0 - \frac{f(x_0)}{f^{(1)}(x_0)}
这便是一次迭代。x1便是我们得到第一个近似根，在往后得迭代中，假如这个近似跟与实际根的误差在一个我们可接受的范围内，便可以将这个根当作真根。

Bisection_method的基本推导则是假如连续函数y = f(x) 在区间[a,b]上连续，且f(a)与f(b)符号相反，那么函数y在区间[a,b]上至少有一个根。然后二分这个区间进行求值。

代码:

  2. type coordinate = {
  3.     x: number,
  4.     y: number
  5. }
  7. export class cubicBezier{
  8.     p1: coordinate
  9.     p2: coordinate
  10.     precision = 1e-5;
  11.     constructor(x1,y1,x2,y2){
  12.         this.p1 = {
  13.             x:x1,
  14.             y:y1
  15.         };
  16.         this.p2 = {
  17.             x:x2,
  18.             y:y2
  19.         };
  20.     }
  21.     getX(t:number){
  22.         let x1 = this.p1.x,x2=this.p2.x;
  23.         return 3*x1*t*Math.pow(1-t,2) + 3* x2*Math.pow(t,2) * (1-t) + Math.pow(t,3)
  24.     }
  25.     getY(t:number){
  26.         let y1 = this.p1.y,y2=this.p2.y;
  27.         return 3*y1*t*Math.pow(1-t,2) + 3*y2*Math.pow(t,2) * (1-t) + Math.pow(t,3)
  28.     }
  29.     // https://github.com/amfe/amfe-cubicbezier/blob/master/src/index.js
  30.     solveCurveX(x:number){
  31.         var t2 = x;
  32.         var derivative;
  33.         var x2;
  35.         var p1x = this.p1.x, p2x = this.p2.x;
  37.         var ax = 3 * p1x - 3 * p2x + 1;
  38.         var bx = 3 * p2x - 6 * p1x;;
  39.         var cx = 3 * p1x;;
  41.         function sampleCurveDerivativeX(t:number){
  42.             // `ax t^3 + bx t^2 + cx t' expanded using Horner 's rule.
  43.             return (3 * ax * t + 2 * bx) * t + cx;
  44.         }
  45.         // https://trac.webkit.org/browser/trunk/Source/WebCore/platform/animation
  46.         // First try a few iterations of Newton's method -- normally very fast.
  47.         // http://en.wikipedia.org/wiki/Newton's_method
  48.         for (let i = 0; i < 8; i++) {
  49.             // f(t)-x=0
  50.             x2 = this.getX(t2) - x;
  51.             if (Math.abs(x2) < this.precision) {
  52.                 return t2;
  53.             }
  54.             derivative = sampleCurveDerivativeX(t2);
  55.             // == 0, failure
  56.             if (Math.abs(derivative) < this.precision) {
  57.                 break;
  58.             }
  59.             // xn = x(n-1) - f(xn)/ f'(xn)
  60.             // 假设g(x) = f(t) - x 
  61.             // g'(x) = f'(t)
  62.         //所以  f'(t) == g'(t) 
  63.             // derivative == g'(t)
  64.             t2 -= x2 / derivative;
  65.         }
  67.         // Fall back to the bisection method for reliability.
  68.         // bisection
  69.         // http://en.wikipedia.org/wiki/Bisection_method
  70.         var t1 = 1;
  71.         var t0 = 0;
  73.         t2 = x;
  74.         while (t1 > t0) {
  75.             x2 = this.getX(t2) - x;
  76.             if (Math.abs(x2) < this.precision) {
  77.                 return t2;
  78.             }
  79.             if (x2 > 0) {
  80.                 t1 = t2;
  81.             } else {
  82.                 t0 = t2;
  83.             }
  84.             t2 = (t1 + t0) / 2;
  85.         }
  87.         // Failure
  88.         return t2;
  89.     }
  90.     solve(x:number){
  91.         return this.getY( this.solveCurveX(x) )
  92.     }
  93. }
上一条：07-12作业下一条：get 获取数据，以及光标事件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多