角度：如何使用组件中的动画旋转图像？

Posted 2023-02-23

【中文标题】角度：如何使用组件中的动画旋转图像？

【英文标题】：angular :how to rotate an image with animation from component?

【发布时间】：2019-07-07 04:10:41

【问题描述】：

我在我的地图应用程序中创建了一个名为 compass 组件的组件，当我旋转地图时，我还想以编程方式旋转带有动画的指南针，我使用的是角度动画，

import Component, OnInit, OnDestroy, Output, Input, EventEmitter, ViewChild, AfterViewInit, ElementRef from '@angular/core'; 从'@angular/animations'导入触发器、过渡、状态、动画、样式、关键帧； 从 '../utils/util.service' 导入 UtilService ;

@Component(
  selector: "app-compasstool",
  template: require("./compasstool.component.html"),
  styles: [require("./compasstool.component.scss")],

  animations: [
    trigger('flyInOut', [
      state('start', style( transform: 'rotate(0rad)' )),
      state('end', style( transform: 'rotate(0.9rad)' )),
      transition('* => start', [
        animate("5s", keyframes([
          style( transform: 'rotate(0rad)' ),// offset = 0         
        ]))
      ]),
      transition('* => end', [
        animate("2s", keyframes([
          style( transform: 'rotate(0rad)' ),// offset = 0
          style( transform: 'rotate(0.2rad)' ), // offset = 0.33
          style( transform: 'rotate(0.6rad)' ), // offset = 0.66
          style( transform: 'rotate(0.9rad)' ) // offset = 1
        ]))
      ]),
    ]),
  ],


)

我会得到地图的半径旋转，当你给组件时，它只会在初始时间起作用。我将如何在组件内调用带有旋转的动画？

【问题讨论】：

在应该旋转的东西上，添加[@flyInOut]="myVar" myVar 应该有start 或end 作为值。

你是对的，这会起作用，但是我需要修改变换半径并生成新的动画变量，从当前的旋转弧度开始到最新的旋转

刚刚回答了你的问题，我不了解也不关心你的动画，做最适合你的吧！

我需要旋转指南针，当用户旋转地图时，我们可以通过编程方式更改该弧度值吗？

【参考方案1】：

由于您的旋转是动态的，并且动画必须基于旋转的属性，即您可能要考虑使用 AnimationBuilder 的弧度。

试试这个我尝试旋转.needle元素https://stackblitz.com/edit/angular-animation-builder-pl9qkn的例子

它使用AnimationBuilder 构建AnimationPlayer，然后播放。 因为它使用无线电进行转换

  animationFactory = this.animationBuilder
    .build([
      style( transform: `rotate($this.lastRadiansrad)` ),
      animate(200, style( transform: `rotate($this.radiansrad)` ))
    ]);

【参考方案2】：

您的 component.ts 将是，

@Component(
  selector: "app-compasstool",
  template: require("./compasstool.component.html"),
  styles: [require("./compasstool.component.scss")],
animations: [
          // Each unique animation requires its own trigger. The first argument of the trigger function is the name
          trigger('rotatedState', [
            state('default', style( transform: 'rotate(0)' )),
            state('rotated', style( transform: 'rotate(-360deg)' )),
            transition('rotated => default', animate('2000ms ease-out')),
            transition('default => rotated', animate('2000ms ease-in'))
        ])
    ]
)
export class AppComponent 

    state: string = 'default';

    rotate() 
        this.state = (this.state === 'default' ? 'rotated' : 'default');
    

而 component.html 会是，

<h1>Angular image rotation example</h1>
<button (click)="rotate()">Press me to rotate</button>

<hr>
<br><br><br><br>

<!-- Remember to add binding to tag -->
<img [@rotatedState]='state' src="https://images-na.ssl-images-amazon.com/images/I/513hBIizJUL._SY355_.jpg" >