如何通过组件@Input参数配置Angular动画的动态时长？

要实现动画时长的动态配置，你可以通过以下两种方式解决@Component装饰器无法访问运行时状态的问题：

方案一：使用动画参数绑定（推荐） #

Angular动画支持在过渡配置中使用动态参数，结合模板绑定传递@Input的值：

1. 在组件类中定义@Input参数：

export class SvgCircleComponent {
  @Input() animationDuration = '3s'; // 默认值设为原有的3秒
  // 其他组件逻辑...
}

2. 修改@Component中的动画配置，使用{{参数名}}占位符，并设置默认参数：

@Component({
  // 组件元数据（选择器、模板等）
  animations: [
    trigger('circleProgress', [
      // 你的状态定义...
      transition('*<=>*', animate('{{duration}} linear', {
        params: { duration: '3s' } // 配置默认值，避免未传参时出错
      }))
    ])
  ]
})

3. 在模板中绑定动画时，传递动态参数：

<svg [@circleProgress]="{ value: currentState, params: { duration: animationDuration } }">
  <!-- SVG内容 -->
</svg>

方案二：使用AnimationBuilder手动构建动画 #

如果需要更灵活的控制，可以完全绕过@Component中的动画配置，用AnimationBuilder在运行时动态创建动画：

1. 注入依赖并定义@Input参数：

import { AnimationBuilder, animate, style } from '@angular/animations';
import { ElementRef, Input } from '@angular/core';

export class SvgCircleComponent {
  @Input() set animationDuration(val: string | number) {
    this._duration = typeof val === 'number' ? `${val}ms` : val;
    this.playProgressAnimation();
  }
  private _duration = '3s';

  constructor(private builder: AnimationBuilder, private el: ElementRef) {}

  // 播放动画的方法，可在状态变化时调用
  private playProgressAnimation() {
    // 构建动画序列
    const animation = this.builder.build([
      style({ /* 动画起始样式 */ }),
      animate(this._duration, style({ /* 动画目标样式 */ }))
    ]);
    // 创建动画播放器并执行
    const player = animation.create(this.el.nativeElement.querySelector('circle'));
    player.play();
  }
}

这种方式完全脱离@Component的静态动画配置，所有动画参数都可以基于组件的运行时状态动态调整。

内容的提问来源于stack exchange，提问作者Ole