Successfully reported this slideshow.
Your SlideShare is downloading. ×

Demystifying Angular Animations

Ad

Demystifying Angular Animations
Gil Fink
CEO and Senior Consultant, sparXys

Ad

Why to bother with animations?

Ad

Better user experience (UX)

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 31 Ad
1 of 31 Ad
Advertisement

More Related Content

Advertisement
Advertisement

Demystifying Angular Animations

  1. 1. Demystifying Angular Animations Gil Fink CEO and Senior Consultant, sparXys
  2. 2. Why to bother with animations?
  3. 3. Better user experience (UX)
  4. 4. Indicating that something happening/happened
  5. 5. Just because we want a cool and shiny website!
  6. 6. But… Web animation is HARD!
  7. 7. About Me • sparXys CEO 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. 8. Agenda • Web animation • Building our own Angular animation implementation • Angular animation in a nutshell
  9. 9. Web Animation Options • Use JavaScript animation library • Use CSS3 modules • CSS3 Animations • CSS3 2D and 3D Transform • CSS3 Transitions
  10. 10. Welcome Web Animation API
  11. 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. 12. 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 } );
  13. 13. Web Animation API Demo
  14. 14. Web Animation API Support Taken from “Can I Use…” website • Use polyfill – https://github.com/web-animations/web-animations-js
  15. 15. How can we use Web Animation API with Angular?
  16. 16. Building our own Angular animation decorator Demo
  17. 17. @angular/animations • Based on Web Animation API • Animations are separated from Angular core • Totally refactored • Fully dynamic
  18. 18. Angular Animation Module Setup • Import the BrowserAnimationsModule to your ngModule import {BrowserAnimationsModule} from "@angular/platform- browser/animations"; @NgModule({imports: [BrowserAnimationsModule]})
  19. 19. 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', [ /*...*/ ])] })
  20. 20. 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 })) ]) ])
  21. 21. Basic Angular Animation Demystified Demo
  22. 22. 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({…})) ])
  23. 23. 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}) ])) ])
  24. 24. 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({…})) ]) ])
  25. 25. 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>
  26. 26. Adding Angular Animation to an App Demo
  27. 27. Summary • Embrace the new Web Animation API • Decorate components with animation in Angular apps • Make your users happy!
  28. 28. Resources • Animations in Angular website - http://bit.ly/2ppuxsM • ng-conf Animation video - http://bit.ly/2pSbhqe • My Website – http://www.gilfink.net • Follow me on Twitter – @gilfink
  29. 29. Thank You!

×