角度 - 将时间动画化为变量

Question

我正在用 Angular 4 编写一个车床模拟器。是否可以将动画时间设置为变量？

我有这个组件代码：

@Component({
selector: 'lathe-cell',
templateUrl: './lathe-cell.component.html',
styleUrls: ['./lathe-cell.component.css'],
animations: [
trigger('latheMould', [
state('in', style({opacity: 0})),
state('cuttingStart', style({})),
state('cuttingEnd', style({ backgroundColor: 'green'})),
state('out', style({opacity: 0})),
transition('in => cuttingStart', [
animate(3000, keyframes([
style({ opacity: 1, transform: 'translate(-90px, 43px)', offset: 0 }),
style({ opacity: 1, transform: 'translate(-90px, 0px)', offset: 0.4 }),
style({ opacity: 1, transform: 'translate(0px, 0px)', offset: 1 })
]))
]),
transition('cuttingStart => cuttingEnd', [
animate(5000)
]),
transition('cuttingEnd => out', [
animate(3600, keyframes([
style({ opacity: 1, transform: 'translate(90px, 0px)', offset: 0.5 }),
style({ opacity: 1, transform: 'translate(90px, 80px)', offset: 1 })
]))
])
])
]
})
export class LatheCellComponent implements OnInit {
lathe: Lathe;
state: string = 'in';
logWell: string[] = new Array;
constructor(
private latheService: LatheService,
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.route.params
.switchMap((params: Params) => this.latheService.getLathe(+params['id']))
.subscribe(lathe => this.lathe = lathe);
}
}

在过渡cuttingStart => cuttingEnd中，我想将时间设置为可变lathe.cuttingTime。这可能吗？

为清楚起见，省略了一些代码。

Answer 1

目前这是不可能的。但是，您可以使用动画回调来通知主车床逻辑何时完成(或启动，尽管这类似于将状态设置为动画触发值的时间(：

<div [@latheMould]="state"
(@latheMould.start)="onStart($event)"
(@latheMould.done)="onDone($event)">