CODEWITHSUNDEEP
javascriptcsshtmlcanvasgsap
Joey Hipolito
Joey Hipolito

Reputation: 3166

Circular animation in javascript, greensock tweenlite

I have a point drawn in an canvas (html5). Then I want this point to animate in a circular path.

I saw an example using time differences to set the x and y variables, in respect to time. Some of the variables and formulas used are quite vague, I have forgotten my physics, d*mn. But I have researched quite a bit on circular motion, so I can understand some of it. Here is my codepen on how it was done.

Basically here are the parts I have identified so far:

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,

set x and y coordinates with respect to the coordinates of the canvas first get the center of the canvas by dividing the width and the height by 2 then adding to the product of the orbit's radius and the position of x and y with respect to the initial position in the orbit(angle), and since Math trigonometric functions uses radians, we should multiply it to the quotient of PI and 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.

What is quite trivial to me are the next variables _dx and _dy and also the _magnitude.

Here is how the point is animated:

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

And here is the execution of the script:

  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();

With the unclear variables, like _dx _dy _magnitude I cannot understand how it works and how the computation of variables, vx vy which I assume the velocity with respect to x and y respectively.

I wanted to use greensock tweenlite for the animation and it is done like so:

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

As you can see the first parameter is the current object (point), then the second parameter is the time, I assume this to be the velocity and the the third parameter is the change in the object's properties, x and y.

Question

I made the codepen, now How do I use gsap tweenlite to animate the circle like what I did, I suppose using tweenlite will make it a little simple.

Upvotes: 4

Views: 3099

Answers (1)

Ihor
Ihor

Reputation: 3809

In your case you are trying to use TweenLite to animate point as the crow flies, and you trigger TweenLite.to() function for each new position of point. This method of using TweenLite.to() function has no sense and performance, because distance between 2 position of point is too short. So, this method will only slow down your animation because instead of just draw point in new position you want to animate it. The best solution in this case is trying to use TweenLite's methods to animate whole circle. Take a look on this article: Tween around circle

Especially on these examples: 1) http://codepen.io/GreenSock/pen/jCdbq (not canvas, but it displays the main idea)

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

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

Upvotes: 3

Related Questions