Question

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

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

的工作代码

我还在＆＃34; animate（）＆＃34;中有change the speed 的部分工作代码定义，因此需要使用AnimationBuilder。我没能把他们聚在一起。更多详情如下：

使用静态定义的动画并使用[@ animation.done] =＆＃34;＆＃34;它传递一个$ event变量，可以用来改变状态。我用它来检查是否重复动画。

使用AnimationPlayer.onDone（）时不接受任何参数，也不能访问组件变量。

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

＆＃34;错误错误：未捕获（承诺）：错误：找到合成监听器@ moveBall.done＆＃34; - 我的问题：使用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();

}

使用AnimationBuilder，AnimationPlayer Angular4时触发器和状态是否可用？

0 个答案: