Download as PDF, PPTX
![Web Animation API in a Nutshell
• Use the new animate function
• Pass Keyframes array and AnimationEffectTimingProperties object
document.getElementById("myPic").animate(
[
{transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000'},
{transform: 'translate3D(10%, 10%, 0)', backgroundColor: '#ff0000'},
{ transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000' }
], {
duration: 3000,
iterations: Infinity
}
);](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-12-320.jpg)
![Angular Animation Module Setup
• Import the BrowserAnimationsModule to your ngModule
import {BrowserAnimationsModule} from "@angular/platform-
browser/animations";
@NgModule({imports: [BrowserAnimationsModule]})](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-20-320.jpg)
![How to Use Animation?
• Create animation trigger in the component template
• Describe the trigger in the component decorator
<div [@fade]="active ? 'in' : 'out'">hello there</div>
import {trigger, ...} from '@angular/animatons';
@Component({
animations: [trigger('fade', [ /*...*/ ])]
})](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-21-320.jpg)
![How to Use Animation? – Cont.
• In the trigger you set
• Transitions
• States
trigger('fadeIn', [
transition('out => in', [ style({ opacity: 0 }),
animate(1000, style({ opacity: 1 })) ])
])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-22-320.jpg)
![States and Transitions
• Named states define styling of an element in state
• Transitions defines what happens when we move from one state to
another (use =>)
state('state name', style({…}))
transition('* => in', [ style({…}), animate(1000, style({…})) ])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-24-320.jpg)
![Working with keyframes
• keyframes enables the creation of intricate animation
• Defined using the keyframes function and keyframe array
transition('void => *', [
animate(300, keyframes([
style({…, offset: 0}),
style({…, offset: 0.4}),
style({…, offset: 1.0})
]))
])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-25-320.jpg)
![Animation Groups
• Run animations in parallel using grouping
• Use the group function
transition('void => *', [
style({…}),
group([
animate('0.3s 0.1s ease', style({…})),
animate('0.3s ease', style({…}))
])
])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-26-320.jpg)
![Animation Callbacks
• You can wire to animation start and end callbacks
• Use the trigger start and done handlers
<li *ngFor="…"
(@fade.start)="animationStarted($event)"
(@fade.done)="animationDone($event)"
[@fade]="'in'">
…
</li>](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/85/Demystifying-Angular-Animations-27-320.jpg)
![Web Animation API in a Nutshell
• Use the new animate function
• Pass Keyframes array and AnimationEffectTimingProperties object
document.getElementById("myPic").animate(
[
{transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000'},
{transform: 'translate3D(10%, 10%, 0)', backgroundColor: '#ff0000'},
{ transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000' }
], {
duration: 3000,
iterations: Infinity
}
);](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-12-2048.jpg)
![Angular Animation Module Setup
• Import the BrowserAnimationsModule to your ngModule
import {BrowserAnimationsModule} from "@angular/platform-
browser/animations";
@NgModule({imports: [BrowserAnimationsModule]})](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-20-2048.jpg)
![How to Use Animation?
• Create animation trigger in the component template
• Describe the trigger in the component decorator
<div [@fade]="active ? 'in' : 'out'">hello there</div>
import {trigger, ...} from '@angular/animatons';
@Component({
animations: [trigger('fade', [ /*...*/ ])]
})](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-21-2048.jpg)
![How to Use Animation? – Cont.
• In the trigger you set
• Transitions
• States
trigger('fadeIn', [
transition('out => in', [ style({ opacity: 0 }),
animate(1000, style({ opacity: 1 })) ])
])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-22-2048.jpg)
![States and Transitions
• Named states define styling of an element in state
• Transitions defines what happens when we move from one state to
another (use =>)
state('state name', style({…}))
transition('* => in', [ style({…}), animate(1000, style({…})) ])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-24-2048.jpg)
![Working with keyframes
• keyframes enables the creation of intricate animation
• Defined using the keyframes function and keyframe array
transition('void => *', [
animate(300, keyframes([
style({…, offset: 0}),
style({…, offset: 0.4}),
style({…, offset: 1.0})
]))
])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-25-2048.jpg)
![Animation Groups
• Run animations in parallel using grouping
• Use the group function
transition('void => *', [
style({…}),
group([
animate('0.3s 0.1s ease', style({…})),
animate('0.3s ease', style({…}))
])
])](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-26-2048.jpg)
![Animation Callbacks
• You can wire to animation start and end callbacks
• Use the trigger start and done handlers
<li *ngFor="…"
(@fade.start)="animationStarted($event)"
(@fade.done)="animationDone($event)"
[@fade]="'in'">
…
</li>](https://image.slidesharecdn.com/demystifyinganguaranimations-170627053123/75/Demystifying-Angular-Animations-27-2048.jpg)
Uploaded byGil Fink
Demystifying Angular Animations
This document discusses animations in Angular applications. It begins by explaining the benefits of animations for user experience. It then covers different options for implementing animations, including JavaScript libraries, CSS animations, and the Web Animation API. The bulk of the document focuses on how Angular leverages the Web Animation API to provide a declarative animation system using triggers, states, transitions, and callbacks. It includes examples and a demonstration of adding basic animations to an Angular app.
More Related Content
Similar to Demystifying Angular Animations
Demystifying Angular Animations
- 1. Demystifying Angular Animations GilFink CEO and Senior Consultant, sparXys
- 2. Why to botherwith animations?
- 3.
- 4.
- 5. Just because wewant a cool and shiny website!
- 6.
- 7. About Me • sparXysCEO and senior consultant • Microsoft MVP in the last 8 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
- 8. Agenda • Web animation •Building our own Angular animation implementation • Angular animation in a nutshell
- 9. Web Animation Options •Use JavaScript animation library • Use CSS3 modules • CSS3 Animations • CSS3 2D and 3D Transform • CSS3 Transitions
- 10.
- 11. Web Animation API •Enables you to hook into the browser’s animation engine • Implemented on top of CSS3 animation and transitions • Enables the ability to change animations during runtime
- 12. Web Animation APIin a Nutshell • Use the new animate function • Pass Keyframes array and AnimationEffectTimingProperties object document.getElementById("myPic").animate( [ {transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000'}, {transform: 'translate3D(10%, 10%, 0)', backgroundColor: '#ff0000'}, { transform: 'translate3D(0%, 0%, 0)', backgroundColor: '#000' } ], { duration: 3000, iterations: Infinity } );
- 13.
- 14. Web Animation APISupport Taken from “Can I Use…” website • Use polyfill – https://github.com/web-animations/web-animations-js
- 15. How can weuse Web Animation API with Angular?
- 16. Building our ownAngular animation decorator Demo
- 19. @angular/animations • Based onWeb Animation API • Animations are separated from Angular core • Totally refactored • Fully dynamic
- 20. Angular Animation ModuleSetup • Import the BrowserAnimationsModule to your ngModule import {BrowserAnimationsModule} from "@angular/platform- browser/animations"; @NgModule({imports: [BrowserAnimationsModule]})
- 21. How to UseAnimation? • Create animation trigger in the component template • Describe the trigger in the component decorator <div [@fade]="active ? 'in' : 'out'">hello there</div> import {trigger, ...} from '@angular/animatons'; @Component({ animations: [trigger('fade', [ /*...*/ ])] })
- 22. How to UseAnimation? – Cont. • In the trigger you set • Transitions • States trigger('fadeIn', [ transition('out => in', [ style({ opacity: 0 }), animate(1000, style({ opacity: 1 })) ]) ])
- 23.
- 24. States and Transitions •Named states define styling of an element in state • Transitions defines what happens when we move from one state to another (use =>) state('state name', style({…})) transition('* => in', [ style({…}), animate(1000, style({…})) ])
- 25. Working with keyframes •keyframes enables the creation of intricate animation • Defined using the keyframes function and keyframe array transition('void => *', [ animate(300, keyframes([ style({…, offset: 0}), style({…, offset: 0.4}), style({…, offset: 1.0}) ])) ])
- 26. Animation Groups • Runanimations in parallel using grouping • Use the group function transition('void => *', [ style({…}), group([ animate('0.3s 0.1s ease', style({…})), animate('0.3s ease', style({…})) ]) ])
- 27. Animation Callbacks • Youcan wire to animation start and end callbacks • Use the trigger start and done handlers <li *ngFor="…" (@fade.start)="animationStarted($event)" (@fade.done)="animationDone($event)" [@fade]="'in'"> … </li>
- 28. Adding Angular Animationto an App Demo
- 29. Summary • Embrace thenew Web Animation API • Decorate components with animation in Angular apps • Make your users happy!
- 30. Resources • Animations inAngular website - http://bit.ly/2ppuxsM • ng-conf Animation video - http://bit.ly/2pSbhqe • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
- 31.