In this blog, we'll re-make the Medium clap button by utilizing Angular animations.
We'll learn different animations highlights, for example,
-
Making reusable animations ( animation, useAnimation )
-
State change expressions ( :enter, :leave, :increase, :decrement ).
The article accept a fundamental information of the essential Angular animations strategies, similar to trigger(), progress(), and so on.
Introduction to Reusable Animations
Here is a basic example for creating reusable animation in angular-
|
// create the animation
const myAnimation = animation('{{ timings }}', []);
// consume the animation
trigger('myTrigger',
transition('* => *',
useAnimation(myAnimation, { params: { timings: 200 } })
)
);
|
Consume the animation by calling the useAnimation() function. It acknowledges the animation reference as the main contention, and choices object as the second. We go in the info parameters under the params key. In this precedent we should give the timings esteem: { timings: 200 }.
Since we see how to make reusable animations, how about we put it to use by making the pulse animations.
Create Pulse Animation
|
export const pulseAnimation = animation([
style({ transform: 'scale(1)' }),
animate(
'{{ timings }}',
keyframes([
style({ transform: 'scale(1)', offset: 0 }),
style({ transform: 'scale({{ scale }})', offset: 0.5 }),
style({ transform: 'scale(1)', offset: 1 })
])
)
]);
|
We make reusable pulse animation by calling the animation() function. It acknowledges , and input parameters. The pulse animation is made by changing the component's scale by calling the keyframes function.
Now, we will discuss how to use above animation in your component.
|
@Component({
selector: 'app-clap-fab',
template: `<i class="material-icons">pan_tool</i>`,
animations: [
trigger('counterChange', [
transition(
':increment',
useAnimation(pulseAnimation, {
params: {
timings: '400ms cubic-bezier(.11,.99,.83,.43)',
scale: 1.05
}
})
)
])
]
})
export class ClapFabComponent {
@HostBinding('@counterChange')
@Input()
counter: number;
}
|
Inside the component's animations array, we call the trigger() function with a distinct counterChange name.
Next we characterize a progress, and use :increase as the state change articulation. It is an ideal fit, as we need to play out the animation when the client taps on the button, augmenting the claps counter.
Slide Animation
|
export const slideInAnimation = animation([
style({ transform: 'translateY({{ from }})', opacity: 0 }),
animate('{{ timings }}', style({ transform: 'translateY(0)', opacity: 1 }))
]);
export const slideOutAnimation = animation([
animate(
'{{ timings }}',
style({ transform: 'translateY({{ to }})', opacity: 0 })
)
]);
|
Similarly as in the pulse animation, we utilize the animation() function to make reusable animationss. Like previously, we use addition to characterize the animation input parameters.
Bubble Animaton
|
@Component({
selector: 'app-counter-bubble',
template: `+{{counter}}`,
animations: [
trigger('visibilityChange', [
transition(':enter', [
useAnimation(slideInAnimation, {
params: { from: '20%', timings: '200ms ease-in' }
})
]),
transition(':leave', [
useAnimation(slideOutAnimation, {
params: { to: '-200%', timings: '200ms ease-in' }
})
])
])
]
})
export class CounterBubbleComponent {
@HostBinding('@visibilityChange')
animation = true;
}
|
As the parent component shows and conceals the bubble component, we need to trigger the slide in and out animations. This is an ideal spot to utilize the :enter and :leave state change expressions.
We expend the slide animations made in a above step by calling the useAnimation() function with the proper information parameters.
Conclusion
Furthermore, that is it. Expectation you delighted in this article. We've utilized a great deal of impressive highlights from Angular Animations to reuse the Medium Clap Button.
