javascript - javascript中的圆形动画，greensock tweenlite

Question

我在 Canvas (html5) 中绘制了一个点。然后我希望这个点在圆形路径中设置动画。

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

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

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,

设置相对于 Canvas 坐标的x和y坐标首先通过将宽度和高度除以 2 得到 Canvas 的中心然后加上轨道半径与 x 和 y 位置的乘积关于轨道中的初始位置( Angular )，并且由于数学三 Angular 函数函数使用弧度，我们应该将它乘以 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。

我想为动画使用 greensock tweenlite，它是这样完成的:

  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 的变化。

问题

我制作了 codepen，现在如何使用 gsap tweenlite 像我所做的那样为圆圈制作动画，我想使用 tweenlite 会使它变得有点简单。

Answer 1

在您的情况下，您正尝试使用 TweenLite 在乌鸦飞翔时为点设置动画，并为点的每个新位置触发 TweenLite.to() 函数。这种使用 TweenLite.to() 函数的方法没有任何意义和性能，因为点的 2 个位置之间的距离太短了。因此，此方法只会减慢您的动画速度，因为您不只是在新位置绘制点，而是要为其设置动画。在这种情况下最好的解决方案是尝试使用 TweenLite 的方法来制作整个圆圈的动画。看看这篇文章:Tween around circle

尤其是这些例子:1) http://codepen.io/GreenSock/pen/jCdbq (不是 Canvas ，但它显示了主要思想)

TweenMax.to("#logo", 4, {rotation:360, transformOrigin:"40px -100px", repeat:10, ease:Linear.easeNone});

2) 和 http://codepen.io/rhernando/pen/kjmDo