javascript中的圆形动画，greensock tweenlite

我在画布(html5(中画了一个点。然后我希望这个点在圆形路径中动画化。

我看到一个使用时差来设置相对于时间的 x 和 y 变量的示例。使用的一些变量和公式非常模糊，我已经忘记了我的物理学，d*mn。但是我对圆周运动已经研究了很多，所以我可以理解其中的一些。这是我关于它是如何完成的代码笔。

基本上这是我到目前为止确定的部分：

this.orbit    = 100; // this is the radius of the circular orbit
this.radius   = 5;   // orbiting object's radius
this.velocity = 50;  // yeah velocity but without direction, should be speed (agree?)
var angle = 0; starting angle of the point in the orbit inside the canvas's quadrant,

设置相对于画布坐标的x和y坐标首先通过将宽度和高度除以 2 来获取画布的中心然后加上轨道半径与x和y位置的乘积关于轨道(角度(中的初始位置，并且由于数学三角函数函数使用弧度，我们应该将其乘以PI和180的商。

this.x = _width  / 2 + this.orbit * Math.cos(angle * Math.PI / 180)
this.y = _height / 2 + this.orbit * Math.sin(angle * Math.PI / 180)
// by doing the above, we now get the initial position of x and y in the orbit.

对我来说微不足道的是下一个变量_dx和_dy以及_magnitude.

以下是该点的动画方式：

Point.prototype.update = function(dt) {
     var dps   = this.orbit * 2 * Math.PI / this.velocity;
     var angle = (360 / dps) * dt / 1000 * -1;
     this.vx = this.vx * Math.cos(angle * Math.PI / 180) - this.vy*Math.sin(angle * Math.PI / 180);
    this.vy = this.vx * Math.sin(angle * Math.PI / 180) + this.vy*Math.cos(angle * Math.PI / 180);
     var _magnitude = Math.sqrt( this.vx * this.vx + this.vy * this.vy);
     this.vx = this.vx / _magnitude * this.velocity;
     this.vy = this.vy / _magnitude * this.velocity;
     this.x += this.vx * dt / 1000;
     this.y += this.vy * dt / 1000;
}

下面是脚本的执行：

  function animate () {
      dt = new Date() - ldt;
      if (dt < 500) {
        // context.clearRect(0, 0, canvas.width, canvas.height);
        point.update(dt);
        point.draw(context);
      };
      ldt = new Date();
      setTimeout(function() {
          window.requestAnimationFrame(animate);
      }, 1000 / 30)
  }
  ldt = new Date();
  animate();

对于不清楚的变量，比如_dx _dy _magnitude我无法理解它是如何工作的以及变量的计算方式，vx vy我分别假设了相对于x和y的速度。

我想在动画中使用绿袜补间，它是这样完成的：

  Point.prototype.update = function(p){
       var _to = {
           x: , // change the value of x
           y: , // change the value of y
           ease: Cubic.easeInOut,
           onComplete: function () { this.update(p) }
        }
        TweenLite.to(point, 2, _to)
  }

如您所见，第一个参数是当前对象(点(，然后第二个参数是时间，我假设这是速度，第三个参数是对象属性 x 和 y 的变化。

问题

我制作了代码笔，现在如何使用 gsap 补间像我所做的那样对圆进行动画处理，我想使用补间会使它变得简单一些。