Within my map application, I have implemented a component called compass component. I am seeking a way to programmatically rotate this compass with animation as the map is rotated. The solution involves utilizing angular animation.
To achieve this functionality, I have imported various elements from '@angular/core' and 'util.service'. The component itself includes animations for the rotation of the compass based on specific states and transitions.
@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
]))
]),
]),
],
})
The challenge lies in invoking the animation along with the rotation inside the component when map rotation values are provided in radians. Additionally, it's important to note that the animation only triggers at the initial setup of the component.