角动画的动态变化时间

Question

我试图创建一个圆形的动画，它会分两步增长，然后缩小。

我希望允许用户更改每个步骤所需的时间。我使用Angular和新的AnimationBuilder类来尝试分配新的动画时间..但是没有vail。似乎动画触发器的第一个定义不会改变。

我尝试使用动画构建器重新创建动画触发器并将其指定给圆圈..但它似乎无法正常工作

您可以在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函数自行设置动画并相应地修改圆圈。