javascript - JS-将2D向量变成曲线？

我在画布上有两个点（x / y），可以使用requestanimationframe或setinterval在它们之间沿直线移动图像。

但是，取而代之的是，我想以某种方式将对象以曲线动画的形式移动，具体取决于速度x / y尤其是s的矢量组合（步长）
我创建了这个JSBin：

http://jsbin.com/furomu/edit?html,js,console,output-（单击init）。

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

  //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);
      }

最佳答案

有关此主题的一些有用信息here

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



对于单个控制点，可以使用以下公式来实现：
[x,y]=(1–t)²P0+2(1–t)tP1+t2²P2

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

关于javascript - JS-将2D向量变成曲线？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38976882/