CODEWITHSUNDEEP
angulartypescriptangular-animations
AhammadaliPK
AhammadaliPK

Reputation: 3548

angular :how to rotate an image with animation from component?

I have created a component called compass component in my map application , when I rotate the map , I want to programmatically rotate that compass with animation also , Im using angular animation ,

import { Component, OnInit, OnDestroy, Output, Input, EventEmitter, ViewChild, AfterViewInit, ElementRef } from '@angular/core'; import { trigger, transition, state, animate, style, keyframes } from '@angular/animations'; import { UtilService } from '../utils/util.service';

@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
        ]))
      ]),
    ]),
  ],


})

I will get map rotation in radius , when you give with component , it will only work at initial time . How i will invoke animation with rotation inside component ?

Upvotes: 0

Views: 2636

Answers (2)

Sunny Prajapati
Sunny Prajapati

Reputation: 87

Your component.ts would be,

@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');
    }

}

And component.html would be,

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

Upvotes: 0

bhantol
bhantol

Reputation: 9616

Since your rotation is dynamic and the animation must be based on the property of rotation i.e. radians you might want to consider using AnimationBuilder.

Try this example where I tried to rotate a .needle element https://stackblitz.com/edit/angular-animation-builder-pl9qkn

It uses AnimationBuilder to build AnimationPlayer and then it plays. In that it uses the radions to transform

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

Upvotes: 0

Related Questions