Introduction
Angular Animations is a powerful library that allows you to create and manage complex animations and transitions in your Angular application. With Angular Animations, you can easily add polish and flair to your application, making it more engaging and user-friendly. In this article, we will explore the basics of Angular Animations and how you can use them to create simple animations in your application.
What are Angular Animations?
Angular Animations is a library built on top of the Web Animations API, which provides a way to create and control animations using JavaScript. Angular Animations makes it easy to define and manage animations in your application using a declarative syntax.
Animations in Angular are created using two types of objects: triggers and states. A trigger is a named object that defines the animation and the elements that it should be applied to. A state is a named object that defines the style properties of an element at a particular point in time.
Creating a Simple Animation
Let's start by creating a simple animation in our Angular application. First, we must import the BrowserAnimationsModule from the @angular/platform-browser/animations package in our AppModule. This will enable Angular Animations in our application.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
imports: [BrowserAnimationsModule],
...
})
export class AppModule { }
Next, we can create a simple animation by defining a trigger object in our component. Let's create an animation that will change the color of an element when it is clicked.
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-root',
template: `
<div [@colorChange]="isClicked ? 'clicked' : 'notClicked'"
(click)="isClicked = !isClicked"
style="width: 100px; height: 100px; background-color: red;">
</div>
`,
animations: [
trigger('colorChange', [
state('notClicked', style({ backgroundColor: 'red' })),
state('clicked', style({ backgroundColor: 'blue' })),
transition('notClicked => clicked', animate('1s')),
transition('clicked => notClicked', animate('1s'))
])
]
})
export class AppComponent implements OnInit {
isClicked = false;
ngOnInit() {}
}
In this example, we have defined a trigger object named 'colorChange', which will be applied to an element when clicked. The trigger object contains two states: 'notClicked' and 'clicked', which define the styles of the element before and after it is clicked. The trigger object also contains two transition objects, which define the animations to be applied when the element changes from one state to another.
The first transition object, 'notClicked => clicked', defines the animation to be applied when the element changes from the 'notClicked' state to the 'clicked' state. The second transition object, 'clicked => notClicked', defines the animation to be applied when the element changes from the 'clicked' state back to the 'notClicked' state. In both cases, we use the 'animate' function to define the duration of the animation (1 second).
Finally, we have added the '@colorChange' attribute to our div element, which applies the 'colorChange' trigger to the element. We have also added a click event handler that toggles the 'isClicked' variable, which will cause the element to transition between the two states.
Keyframe Animations
Keyframes are a way to define specific points in an animation where certain styles should be applied. You can use the 'keyframes' function to define a set of keyframes and then apply them to an element using the 'animate' function. For example:
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition, keyframes } from '@angular/animations';
@Component({
selector: 'app-root',
template: `
<div [@spin]="isSpinning"
(click)="isSpinning = !isSpinning"
style="width: 100px; height: 100px; background-color: red;">
</div>
`,
animations: [
trigger('spin', [
state('true', style({ transform: 'rotate(360deg)' })),
state('false', style({ transform: 'rotate(0deg)' })),
transition('false => true', animate('2s', keyframes([
style({ transform: 'rotate(0deg)', offset: 0 }),
style({ transform: 'rotate(180deg)', offset: 0.5 }),
style({ transform: 'rotate(360deg)', offset: 1.0 })
]))),
transition('true => false', animate('2s', keyframes([
style({ transform: 'rotate(360deg)', offset: 0 }),
style({ transform: 'rotate(180deg)', offset: 0.5 }),
style({ transform: 'rotate(0deg)', offset: 1.0 })
])))
])
]
})
export class AppComponent {
isSpinning = false;
}
In this example, we have defined a trigger object named 'spin', which will be applied to an element when it is clicked. The trigger object contains two states: 'true' and 'false', which define the styles of the element before and after it is clicked. The trigger object also contains two transition objects, which define the animations to be applied when the element changes from one state to another.
The keyframes in this example define the styles to be applied at specific points in the animation. In the 'false => true' transition, we are rotating the element from 0 degrees to 180 degrees over the first half of the animation and then from 180 degrees to 360 degrees over the second half of the animation. In the 'true => false' transition, we reverse the animation to rotate the element back to its original position.
Grouping animations is another powerful feature of Angular Animations. You can group multiple animations together using the 'group' function, which allows you to apply them all at once.
Example
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition, keyframes, group } from '@angular/animations';
@Component({
selector: 'app-root',
template: `
<div [@moveAndFade]="isMovingAndFading"
(click)="isMovingAndFading = !isMovingAndFading"
style="width: 100px; height: 100px; background-color: red;">
</div>
`,
animations: [
trigger('moveAndFade', [
state('true', style({ opacity: 0, transform: 'translateX(100px)' })),
state('false', style({ opacity: 1, transform: 'translateX(0)' })),
transition('false => true', group([
animate('1s ease', style({ opacity: 0 })),
animate('1s ease', style({ transform: 'translateX(100px)' }))
])),
transition('true => false', group([
animate('1s ease', style({ transform: 'translateX(100px)' })),
animate('1s ease', style({ opacity: 1 }))
]))
])
]
})
export class AppComponent {
isMovingAndFading = false;
}
In the code above, we have defined an animation called moveAndFade using the trigger function. The trigger function takes two arguments: the name of the animation and an array of state and transition functions.
In our example, we have defined two states for our animation: true and false. The true state applies the styles { opacity: 0, transform: 'translateX(100px)' }, which will make the element fade out and move 100px to the right. The false state applies the styles { opacity: 1, transform: 'translateX(0)' }which will make the element appear and stay in its current position.
We have also defined two transitions: false => true and true => false. The false => true transition uses the group function to run two animations at the same time: one that fades out the element and another that moves it 100px to the right. The true => false transition also uses the group function to run two animations at the same time: one that moves the element 100px to the right and another that fades it in.
Finally, we have added the [@moveAndFade] attribute to the <div> element, which binds the moveAndFade animation to the element. We have also added a click event that toggles the value of isMovingAndFading, triggering the animation.
Conclusion
In this article, we have learned how to use Angular animations to add interactivity to our application. We have seen how to create animations using the @angular/animations module and how to define states and transitions using the trigger, state, and transition functions. We have also seen how to bind animations to elements using the [@animationName] attribute.
Animations can greatly enhance the user experience of your application, making it more engaging and interactive. With Angular animations, you have the power to create complex animations with ease.