javascript - 倒计时动画循环-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 标准化为半径的 100% (Math.PI*2)

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

这是一个快速 fiddle :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);

干杯，