Question

我已经尝试使用角度动画库在一组图像上制作旋转动画，但我无法使其工作。

任务：

导入 BrowserAnimationModule [完成]
导入我的组件[done]

所以这是组件代码：

@Component({
  selector: 't-animation',
  templateUrl: './t-animation.component.html',
  styleUrls: ['./t-animation.component.css'],
  animations: [
    trigger('imgAnimation', [
      state("stop", style({ transform: 'rotateZ(0)' })),
      state("a", style({ transform: 'rotateZ(90)' })),
      state("b", style({ transform: 'rotateZ(180)' })),
      transition('* => *', [style({ transform: 'rotateZ(90)' }), animate('100ms ease-in')]),
    ]),
  ]
})
export class TAnimationComponent implements OnInit {

  running = true;
  animation_state;

  constructor() {
    this.animation_state = "stop";
  }

  ngOnInit() {
    this.startAnimation();
  }

  startAnimation() {
    this.running = true;
    this.animation_state = 'a';
  }

  stopAnimation() {
    this.running = false;
  }

}

html代码

<div class="images-container">
  <img [@imgAnimation]="animation_state" [src]="'assets/img/animate-1.png'">
  <img [@imgAnimation]="animation_state" [src]="'assets/img/animate-2.png'">
  <img [@imgAnimation]="animation_state" [src]="'assets/img/animate-3.png'">

</div>


<button (click)="startAnimation()">toggle</button>

任何建议？

Answer 1

要将图像旋转360度，

trigger('rotatedState', [
            state('default', style({ transform: 'rotate(0)' })),
            state('rotated', style({ transform: 'rotate(-360deg)' })),
            transition('rotated => default', animate('1500ms ease-out')),
            transition('default => rotated', animate('400ms ease-in'))
        ])

Demo here

希望这会对你有帮助......

Angular 5动画，rotateZ

1 个答案: