Search code examples
javascriptcreatejseaseljstweenjs

Countdown animation circular - CreateJS / EaselJS / TweenJS

I am quite new with createJS - I want to achieve like a countdown timer animation:

I stumbled upon this issue which have this fiddle - I want to achive something like this but I want to create an arc shape:

I tried adjusting the code and changed the point values but it only gave me a diamond one instead of a perfect curve.

Do I need to point every values to achieve a perfect circle like:

points = [{x: 50, y: 0}, {x: 51, y: 1}, {x:52, y: 2}, ...etc]

Or is there other way (maybe a function or plugin) that does this stuff? I wasn't able to find anything on their documentation

Solution

  • You might be interested in using an arc() graphic, along with the EaselJS "Command" approach to graphics:

    1) Create a full arc

    var s = new createjs.Shape().set({x:100,y:100});
s.strokeCmd = s.graphics.s("red")
    .ss(10,"round")
    .arc(0,0,80,0,Math.PI*2)

    2) Store off the last "command"

    var cmd = s.command; // This will be the arc command

    3) Set the command endAngle to 0. You can do this in the arc() method too

    cmd.endAngle = 0;

    4) In your animation, increment the endAngle over time. In this example I normalize 100 to mean 100% of the radius (Math.PI*2)

    var index = 0;
function tick(event) {
  index += 1; // Fake Percent
  cmd.endAngle = index/100 * Math.PI*2;
  stage.update(event);
}

    Here is a quick fiddle: https://jsfiddle.net/lannymcnie/pgeut9cr/

    If instead you just want to animate the circle over a fixed period, you can tween the endAngle value. Here is an example using TweenJS: https://jsfiddle.net/lannymcnie/pgeut9cr/2/

    createjs.Tween.get(cmd)
    .to({endAngle:Math.PI*2}, 2000, createjs.Ease.quadInOut);

    Cheers,