4

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

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

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

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

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

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

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

“错误错误：未捕获（承诺）：错误：找到合成侦听器@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();

}

4

0 回答 0