[Gerard Sans] Reactive Animations Using Angular

[Gerard Sans] Reactive Animations Using Angular

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 14, 2017
Tweet

Transcript

  1. slides.com/gerardsans | @gerardsans Reactive Animations

  2. Google Developer Expert Google Developer Expert

  3. Master of Ceremonies Master of Ceremonies

  4. Blogger Blogger

  5. International Speaker International Speaker Spoken at 53 events in 18

    countries
  6. Angular Trainer Angular Trainer

  7. Community Leader Community Leader 900 1K

  8. None
  9. Angular Angular In Flip Flops In Flip Flops

  10. Why use Why use Why use Why use Animations? Animations?

  11. Improved UX Improved UX ✨ ✨

  12. Perceived Performance Perceived Performance

  13. Immersive interactions Immersive interactions

  14. Better engagement Better engagement

  15. User happiness User happiness User happiness User happiness

  16. CSS CSS CSS CSS Introduction Introduction

  17. Cascading Style Sheets Cascading Style Sheets Styling HTML Elements CSS

    rules Specificity and order Box model
  18. HTML Page life-cycle HTML Page life-cycle Load HTML Parse HTML

    Load CSS Parse CSS Create DOM tree Display Attach style to DOM nodes source: blog
  19. CSS Rule CSS Rule SELECTOR a.active:hover { color: #333; }

    PROPERTY VALUE DECLARATION
  20. pseudo classes/elements pseudo classes/elements :hover :link :active :target :not(selector) :focus

    ::first-letter ::first-line ::before ::after ::selection
  21. None
  22. Specificity and Order Specificity and Order Element style Element id

    class/attribute selectors element selectors last CSS rule wins
  23. Box Model Box Model source: blog

  24. Animations Animations

  25. Introduction Introduction Build on top of CSS Transitions CSS Animations

    (@keyframes) Web Animations API
  26. Web Web Web Web Animations Animations API API

  27. Background Background Integrate CSS, JS and SVG CSS hardware acceleration

    CSS variables + JS requestAnimationFrame (rAF) setInterval , (GSAP) Velocity GreenSock
  28. source: blog

  29. index.html index.html <html> <head> <script src="https://unpkg.com/web-animations-js@2.2.5"></script> ... </head> <body> <my-app>

    loading... </my-app> </body> </html>
  30. Angular CLI 1.0 Angular CLI 1.0 npm install web-animations-js --save

    // src/polyfills.ts import 'web-animations-js';
  31. CSS CSS CSS CSS Transitions Transitions

  32. DURATION START END CSS Transitions CSS Transitions

  33. CSS Transitions CSS Transitions Define an initial and final state

    Intermediate states are calculated automatically We can choose which CSS properties we want to affect Not all CSS properties are animatable ( ) list
  34. Animatable CSS Animatable CSS all background* border* bottom box- shadow

    clip clip-path color filter font* height left margin* mask* offset* opacity outline* padding* perspective* right text-decoration text-shadow top transform vertical- align visibility width z-index
  35. transition transition PROPERTY transition: color 5s ease-in 1s; DURATION TIMING

    DELAY
  36. timing function/easing timing function/easing DEMO

  37. None
  38. CSS CSS CSS CSS Animations Animations

  39. DURATION 0% 100% CSS Animations CSS Animations KEYFRAMES

  40. CSS Animations CSS Animations Define any number of states between

    the initial and final state Changes from states are calculated automatically We can choose which CSS properties we want to affect
  41. CSS Animation CSS Animation NAME animation: fade 5s 1s infinite

    linear; DURATION DELAY ITERATIONS TIMING
  42. CSS Animation CSS Animation @keyframes fade { 0% { opacity:

    1; } 100% { opacity: 0; } }
  43. CSS Animation CSS Animation @keyframes fade { from { opacity:

    1; } to { opacity: 0; } }
  44. Move transform: translateX(10px); Resize transform: scale(0.5); Rotate transform: rotate(1turn); Fade

    opacity: 0;
  45. Move Move <div class="circle base elastic"></div> .base { animation: move

    2s infinite; } .elastic { animation-timing-function: cubic-bezier(.8,-0.6,0.2,1.5); } @keyframes move { 0% { transform: translateX(-250px); } 40%, 60% { transform: translateX(50px); } 100% { transform: translateX(250px); } }
  46. Rotate Rotate <div class="square base linear"></div> .base { animation: spin

    2s infinite; } .linear { animation-timing-function: linear; } @keyframes spin { to { transform: rotate(1turn); } }
  47. Resize Resize <div class="circle base"></div> .base { animation: size 2s

    infinite; } @keyframes size { 0%, 40%, 100% { transform: scale(1); } 25%, 60% { transform: scale(1.1); } }
  48. Fade Fade <div class="circle base elastic"></div> .base { animation: fade

    2s infinite; } @keyframes fade { 0% { transform: translateX(0px); opacity: 0; } 40%, 60% { transform: translateX(80px); opacity: 1; } 100% { transform: translateX(0px); opacity: 0; } }
  49. None
  50. Angular Angular Angular Angular Animations Animations

  51. States & Transitions States & Transitions

  52. void * Special Keywords Special Keywords void => * :enter

    * => void :leave void <=> * STATE STATE
  53. fadeIn fadeOut States & Transitions States & Transitions TRANSITIONS STATE

    STATE fadeIn => fadeOut fadeOut => fadeIn fadeIn <=> fadeOut
  54. Animations Setup Animations Setup // npm install --save @angular/animations //

    app.module.ts import {Component, NgModule} from '@angular/core'; import {BrowserAnimationsModule} from '@angular/platform-browser/animat @Component({ }) export class App { } @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule)
  55. Animation Example Animation Example import {fade} from './animations'; @Component({ selector:

    'my-app', template: `<button [@fade]='fade' (click)="toggleFade()">Fade</button animations: [ fade ] }) export class App { fade = 'fadeIn'; toggleFade(){ this.fade = this.fade === 'fadeIn' ? 'fadeOut' : 'fadeIn'; } }
  56. Animation Example Animation Example import { trigger, transition, state, style,

    animate } from '@angular/animations'; export const fade = trigger('fade', [ state('fadeIn', style({ opacity: 1 })), state('fadeOut', style({ opacity: 0.1 })), transition('fadeIn <=> fadeOut', animate('2000ms linear')) ]);
  57. Execution Order Execution Order sequence group time

  58. Composition Composition animateChild time

  59. Stagger Stagger time

  60. Dynamic Selectors Dynamic Selectors class="container" class="item" class="item" query(selector)

  61. Dynamic Selectors Dynamic Selectors query('.item') class="container" class="item" class="item"

  62. Dynamic Selectors Dynamic Selectors query('.item:enter') class="container" class="item" class="item" class="item" added

  63. demo demo

  64. Router Router Router Router Transitions Transitions

  65. Router transitions Router transitions import { routerTransition } from './router.animations';

    @Component({ template: ` <main [@routerTransition]="getState(o)"> <router-outlet #o="outlet"></router-outlet> </main> `, animations: [ routerTransition ] }) export class App { getState(outlet) { return outlet.activatedRouteData.state; } }
  66. Routes Setup Routes Setup const routes = [ { path:

    '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', component: Home, data: { state: 'home'} }, { path: 'about', component: About, data: { state: 'about'} }, { path: '**', component: NotFound } ];
  67. Router transitions Router transitions export const routerTransition = trigger('routerTransition', [

    transition('about <=> home', [ query(':enter, :leave', style({ position: 'fixed', width:'100%' })) group([ query(':enter', [ style({ transform: 'translateX(100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' ]), query(':leave', [ style({ transform: 'translateX(0%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(100% ]), ]) ]) ])
  68. demo demo

  69. Performance Performance Performance Performance

  70. Considerations Considerations Avoid unnecessary layout/repaint Avoid unnecessary layout/repaint Use opacity,

    transform Use opacity, transform Hardware acceleration (avoid) Hardware acceleration (avoid) transform: translateZ(0) transform: translateZ(0)
  71. Saving Resources Saving Resources .visible.advert { will-change: transform; } .visible.advert:hover

    { transform: scale(1.2); }
  72. None