5 угловых анимаций, rotateZ - PullRequest
Новая
       6

5 угловых анимаций, rotateZ

0 голосов
/ 08 мая 2018

У меня есть лоток для анимации вращения группы изображений с использованием библиотеки угловой анимации, но я не могу заставить ее работать.

Задача:

  • импорт BrowserAnimationModule [сделано]
  • импорт функций анимации в мой компонент [готово]

так что это код компонента: 

@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>

любой совет?

1 Ответ

0 голосов
/ 08 мая 2018

Чтобы повернуть изображения на 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'))
        ])

Демо здесь

Надеюсь, это поможет вам ...

...