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 ?
[@flyInOut]="myVar"
where myVar should have eitherstart
orend
as values. – user4676340