使用AnimationBuilder、AnimationPlayer Angular4时触发器和状态可用吗？

Question

感谢您阅读我的问题（这是我的第一个问题）。

我的最终目标是有一个用于启动和停止动画的按钮和一个用于调整速度的滑块（现在是一个文本框）。

我有用于启动和停止动画的工作代码

我还有部分工作代码来更改“animate()”定义中的速度，因此需要使用 AnimationBuilder。我没能把他们聚集在一起。更多详情如下：

当使用静态定义的动画并使用 [@animation.done]="" 时，它会传递一个可用于更改状态的 $event 变量。我用它来检查是否重复动画。

使用 AnimationPlayer.onDone() 时，不带任何参数，也似乎无法访问组件变量。

我需要使用 AnimationBuilder，以便可以以编程方式调整动画选项，但是我无法通过将表达式值添加到我在动画工厂中使用的模板 HTML 来触发状态更改。当我尝试向 HTML 添加表达式值并将其提供给 AnimationFactory 时，我得到：

“错误错误：未捕获（承诺）：错误：找到合成侦听器@moveBall.done” - 我的问题：使用AnimationBuilder、AnimationPlayer 时是否不允许状态和触发器？

我的代码如下所示：

moveBall.component.html：

<div  class="innerwrapper">
   <span class="move" #theBall [@moveBall]="state2" (@moveBall.done)="checkRepeat($event)"></span>
</div>

moveBall.component.ts：

createMoveBall() {

const factory = this._builder.build([
  trigger( 'moveBall', [
  state( 'start', style({
    'margin-left': '0',
  })),
  state ( 'stop', style( {
    'margin-left': '0',
  })),
  transition('start <=> stop',
    animate( '3000ms ease-in', keyframes([
        style({margin: '0 0', offset: 0}),
        style( {margin: '0 calc(100% - 80px)', offset: 0.5}),
        style( {margin: '0 0', offset: 1.0}),
      ]
    )))
])
]);

console.log(JSON.stringify(this.theBall));

this.player = factory.create(this.theBall.nativeElement, {});
console.log();

this.player.play();

}