Question

我在Angular 4中编写了一个车床模拟器。是否可以设置变量的动画时间？

我已经获得了这个组件代码：

grpcoins = game.add.group();
grpcoins.enableBody = true;
grpcoins.physicsBodyType = Phaser.Physics.ARCADE;
//..

function  createcoin() {
    var c = game.add.sprite(50,700, 'coin');
    grpcoins.add(c);
}

function update() {
   //..
   game.physics.arcade.overlap(player, grpcoins, killcoin, null, this);
   //..
}

function killcoin(pl, cn) {
    cn.kill();
}

在转换@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。这可能吗？

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

Answer 1

目前无法做到这一点。但是，您可以使用动画回调来在动画完成（或启动时）通知您的主车床逻辑，尽管这类似于将状态设置为动画触发值的时间：

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

角度 - 动画时间为变量

1 个答案: