倒計時動畫通告-CreateJS / EaselJS / TweenJS

Question

我對createJS相當陌生-我想實現一個倒數計時器動畫：

我偶然發現了這個問題，它有這樣的小提琴 -我想才達到這樣的事情，但我想創建一個弧形：

我嘗試調整代碼並更改了點值，但它只給了我一個菱形，而不是完美的曲線。

我是否需要指出每個值才能實現一個完美的圓，例如：

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

還是有其他方法（可能是函數或插件）來實現此目的？ 我找不到他們文檔中的任何內容

Answer 1

您可能對使用arc()圖形以及EaselJS“ Command”圖形方法感興趣：

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

這是一個快速的小提琴： 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);

干杯，