Question

我想使用Angular动画基于滑块上的值旋转图像。我可以使用值更改通知程序：increment和：decrement触发动画。但是不能在动画样式块的css属性中使用最新值。

到目前为止，我的代码看起来像这样-

用于在模板中进行绑定-

<mat-slider [(ngModel)]="rotationAngle" ...>
<img [@photoState]="rotationAngle" src="...">

在组件类声明中-

  rotationAngle: number = 0;

  constructor() { }

  ngOnInit() {
    this.rotationAngle = 0;
  }

  get stateName() {
    return this.rotationAngle;
  }

现在在@Component块中-

animations: [
     trigger('photoState',
       [
          transition(':increment, :decrement', [
                    style('*'),
                    animate('500ms', style({transform: 'rotate({{ rotationAngle }}deg)'}))
              ],{
                  params: {
                    rotationAngle:  ... /* need to use the slider value here, I assume. Any other way? */
                  }
              })
        ])
  ]

有没有办法做到这一点？我是否应该尝试其他方法（例如，AnimationBuilder）？

Answer 1

我尝试使用角度动画旋转div，基本上我遵循了父子类型的组件关系，其中父传递角度使用来旋转div，孩子使用@Input接受它，而我使用了该值在动画中，旋转

您可以在此处查看链接https://stackblitz.com/edit/angular-animations-params

我不好，我没有遵循正确的命名约定.....

Answer 2

尽管@ravi发布的内容可行，但我认为使用AnimationBuilder是更好的方法。我所做的是-

    /* use attribute #imageContainer with the element you want to perform animation on */        
    @ViewChild("imageContainer") imageContainerElement: ElementRef;

    rotationAngle:number;

    let animationFactory = this.animationBuilder.build([
                  style('*'),
                  animate('500ms', style({transform: 'rotate(' + this.rotationAngle + 'deg)'}))
                ]);

   animationFactory.create(this.imageContainerElement.nativeElement).play();

这解决了我的问题。

角度动画：响应数值变化

2 个答案: