倒计时动画通告-CreateJS / EaselJS / TweenJS

Question

我对createJS相当陌生-我想像倒计时计时器动画那样实现：

我偶然发现了这个issue，它有这个fiddle-我想达到这样的效果，但我想创建一个弧形：

我尝试调整代码并更改了点值，但这仅给了我一个菱形，而不是完美的曲线。

我是否需要指出每个值才能形成一个完美的圆圈，如：

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

或者还有其他方法（可能是函数或插件）来执行此操作吗？我在他们的documentation

上找不到任何东西

Answer 1

您可能对使用arc()图形以及EaselJS“命令”图形方法感兴趣：

1）创建完整弧形

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）保存最后的“命令”

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

3）将命令endAngle设置为0。您也可以在arc（）方法中执行此操作

cmd.endAngle = 0;

4）在动画中，随时间增加endAngle。在此示例中，我将100归一化为半径（Math.PI*2）的100％

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

这里是一个小提琴：https://jsfiddle.net/lannymcnie/pgeut9cr/

如果相反，您只想在固定的周期内为圆设置动画，则可以在endAngle值之间进行补间。这是使用TweenJS的示例：https://jsfiddle.net/lannymcnie/pgeut9cr/2/

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

干杯