将动画输入参数绑定到Angular 4.2.0中的组件属性

Question

我想将动画输入参数绑定到组件属性。有没有办法使用角度 4.2.0 的新动画功能？

例如，我希望用户设置对象的坐标，并且对象应该相应地移动：

我的 app.component.ts ：

import { Component } from '@angular/core';
import { trigger,state,style,animate,transition,animation,useAnimation} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [trigger('move', [
    transition('start <=> finish', 
    useAnimation(animation([
      animate(1000, style({top: '{{x}}px',left:'{{y}}px'}))
    ], { params: { x: 100, y: 100 }})))
  ])]
})
export class AppComponent {
  moveAnimation = { value: 'start', x: 10, y: 10 };
  move() {
    this.moveAnimation.value = this.moveAnimation.value == 'finish' ? 'start' : 'finish';
  }
}

app.component.html ：

X:<input type="number" [(ngModel)]="moveAnimation.x"><br/>
Y:<input type="number" [(ngModel)]="moveAnimation.y"><br/>
<button (click)="move()">Move</button><br/>
<div class="container">
  <div class="box" [@move]="moveAnimation"></div>
</div>

app.component.css

.container {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.box {
  background-color: pink;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  top: 50px;
  left: 50px;
}

Answer 1

我会说实话，我不确定Angular Animations库是否对你来说是最好的。您想要使用它（带参数）的方式似乎仍然是option issue。而不是使用动画库为什么只用一些CSS完成相同的工作？我已经包含了一个你可以测试的Plunker演示。

<强>组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  moveBox = { x: 10, y: 10 };
  moveInputs = { x: 10, y: 10 };
  move() {
    this.moveBox.x = this.moveInputs.x;
    this.moveBox.y = this.moveInputs.y;
  }
}

<强> HTML

X:<input type="number" [(ngModel)]="moveInputs.x"><br/>
Y:<input type="number" [(ngModel)]="moveInputs.y"><br/>
<button (click)="move()">Move</button><br/>
<div class="container">
  <div class="box" [style.top.px]="moveBox.x" [style.left.px]="moveBox.y"></div>
</div>

<强> CSS

.container {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.box {
  background-color: pink;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  transition: all 1s ease;
}

Answer 2

我修改了@ MichaelSolati的plunker here以使用@angular/animations显示Angular方式。

在模板中：

<div class="container">
  <div class="box" #movebox></div>
</div>

在组件中：

  animationPlayer;
  @ViewChild('movebox') moveBoxEl: ElementRef;
  moveBall() {
    const moveBallAnimation = this.animBuilder.build([
      animate(`1s ease`, style({
          'top': `${this.moveInputs.x}px`,
          'left': `${this.moveInputs.y}px`
      }))
    ]);
    this.animationPlayer = moveBallAnimation.create(this.moveBoxEl.nativeElement);
    this.animationPlayer.play();
  }

Answer 3

此行上params的格式不正确：

moveAnimation = { value: 'start', x: 10, y: 10 };

应该是：

moveAnimation = { value: 'start', params: {x: 10, y: 10 });