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

Question

我在我的地图应用程序中创建了一个名为罗盘组件的组件，当我旋转地图时，我想以编程方式旋转该罗盘与动画，我使用角度动画，

从'@ angular / core'导入{Component，OnInit，OnDestroy，Output，Input，EventEmitter，ViewChild，AfterViewInit，ElementRef};从'@ 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
        ]))
      ]),
    ]),
  ],


})

我将获得半径的地图旋转，当您使用组件时，它将仅在初始时工作。我将如何在组件内部旋转调用动画？

Answer 1

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

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

它使用AnimationBuilder构建AnimationPlayer，然后播放。因为它使用辐射进行转换

  animationFactory = this.animationBuilder
    .build([
      style({ transform: `rotate(${this.lastRadians}rad)` }),
      animate(200, style({ transform: `rotate(${this.radians}rad)` }))
    ]);