角度動畫的動態變化時機

Question

我正試圖創建一個圓圈的動畫，這個圓圈在兩個步驟中生長，然後收縮。

我想允許用戶更改每一步所需的時間。我正在使用Angular和新的AnimationBuilder類來嘗試並分配新的動畫時間..但沒有vail。看起來，動畫觸發器的第一個定義不會改變。

我試圖重新創建動畫建設者動畫觸發，並將其分配給circle..but它似乎並沒有工作

您可以檢查this plunker代碼的工作示例

const myAnimation = this.animBuilder.build(
    [ 
    transition('inactive => firstStep', animate(this.timingBounds.lower)), 
    transition('firstStep => secondStep', animate(this.timingBounds.upper - 
     this.timingBounds.lower)), 
    transition('secondStep => inactive', animate(this.timingTotal - 
     this.timingBounds.upper)) 
    ] 
); 

this.currentAnimationPlayer = myAnimation.create(this.circle.nativeElement); 

我在做一件非常錯誤的事情嗎？你們認爲這甚至有可能嗎？

謝謝！

Answer 1

最後，我所做的是放棄動畫系統，並通過使用requestAnimationFrame函數並相應地修改圓來爲其自己製作動畫。