javascript - JS - 将二维向量变成曲线？

Question

我在 Canvas 上有两个点 (x/y)，可以使用 requestanimationframe 或 setinterval 在它们之间直线移动图像。

然而，相反，我想以某种方式？!，在曲线动画中移动对象，这取决于速度 x/y 的矢量组合，尤其是 s(步长) 我创建了这个 JSBin:

http://jsbin.com/furomu/edit?html,js,console,output -(点击初始化)。

是否有可能以某种方式将这个“矢量”变成某种曲线以绘制平滑的运动？ 如果不是，我还需要什么其他值才能将其变成曲线运动？

  //start at 50,50
  //move to 150,125
 // Vector is 100/75 or v +1/+0.75 at 100 steps


function Move(ox, oy, x, y){
  this.ox = ox;
  this.oy = oy;
  this.x = x
  this.y = y
  this.p;
  this.v = {x: x - ox, y: y - oy};

  this.setup = function(){

    var p = {};
    var v = this.v;

    if (this.x > this.y){
      p.s = v.y;
      p.y = 1;
      p.x = v.x/v.y;
    }
    else {
      p.s = v.x;
      p.x = 1;
      p.y = v.y/v.x;
    }

    this.p = p;
  }

  this.setup();
}


function Ship(x, y){
  this.x = x;
  this.y = y;

  this.moves = [];

  this.draw = function(){
    this.drawSelf();
    this.drawTarget();
  }

  this.create = function(){
    var move = new Move(this.x, this.y, 150, 125);
    this.moves.push(move);
  }

  this.update = function(){
    var m = this.moves[0];
   var self = this;

   anim = setInterval(function(){          
      ctx.clearRect(0, 0, res, res);
      self.x += m.p.x;
      self.y += m.p.y;
      m.p.s--;

     self.draw();

      if (m.p.s == 0){
        clearInterval(anim);
      }
    }, 30);
  }

   this.create();
    this.draw();
    this.update();
}

function init(){
  var ship = new Ship(50, 50);
      }

Answer 1

关于这个话题有一些有用的信息here

基本上，您需要一个或多个控制点来将您的矢量“弯曲”成一条曲线。

这可以通过以下针对单个控制点的公式来实现: [x,y]=(1–t)²P0+2(1–t)tP1+t2²P2

当t=0时，右侧等于第一个控制点——线段的起点。当t=1时，我们得到点P1，即第二个控制点和线段的终点。