Tweet
Tweet

Slide 1

Slide 1 text

Milano JS Web Animation API The vengeance

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Davide Di Pumpo Full stack designer (?) Senior Frontend developer at Co-organizer MakhBeth on: , , I like Cats, Scotch, Comics and Videogames... Credimi Milano Frontend Twitter Github Internet

Slide 5

Slide 5 text

LET'S START MEOW

Slide 6

Slide 6 text

Cosa sono? The Web Animations API provides a common language for browsers and developers to describe animations on DOM elements. MDN

Slide 7

Slide 7 text

Come animiamo oggi? (In classi ca) o librerie come e setInterval jQuery.animate() requestAnimationFrame() CSS animations GSAP Velocity

Slide 8

Slide 8 text

Set interval

Slide 9

Slide 9 text

var elem = document.getElementById("animatedElem"); var left = 0; var lastFrame = +new Date; var timer; timer = setInterval(function() { var now = +new Date, deltaT = now - lastFrame; elem.style.left = ( left += 10 * deltaT / 16 ) + "px"; lastFrame = now; if ( left > 400 ) { clearInterval( timer ); } }, 16);

Slide 10

Slide 10 text

Set interval seriamente? Impreciso Prestazionalmente osceno Comodo da usare come un registratore betamax

Slide 11

Slide 11 text

jQuery Animate

Slide 12

Slide 12 text

$( "#book" ).animate({ opacity: 0.25, left: "+=50", height: "toggle" }, 5000, function() { // Animation complete. });

Slide 13

Slide 13 text

jQuery Animate < 3.0 Usa setInterval È utile solo se usate già jQuery Sì ok, ma state usando jQuery?

Slide 14

Slide 14 text

Request Animation Frame

Slide 15

Slide 15 text

var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); element.style.position = 'absolute'; function step(timestamp) { if (!start) start = timestamp; var progress = timestamp - start; element.style.left = Math.max(progress / 10, 200) + 'px'; if (progress < 2000) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step);

Slide 16

Slide 16 text

Request Animation Frame Ancora troppo boilerplate Il prossimo repaint non vuol dire avere 60fps L'animazione è nita? Voglio modi carla? Voglio cambiare easing?

Slide 17

Slide 17 text

CSS

Slide 18

Slide 18 text

.................I poteri forti hanno censurato questo snippet.................. ..................~~,.............,~,...............................:........... ......................:??777O88II7:..........:~~..............................,: ...................,=7II?I77$778$I?I~........:~~..............................,: .................+7$$Z77Z$77$O8Z7$Z7?~:......:~~..............................,~ ...............~I$77O$77$$8DDDDD8OZ7ZZ=:.....:~~......~~..............:~:.....,~ ..............+ZZ$$O8$$7N8D8DDDD8D7Z$7=?:,...:~~......~~..............:~~.....,~ .............$$DOOZZD7ZO8DD8DDDDDDD8IZZ?~:~..:~~......~~.......,......~~~.....,~ ............77O8ZODZ8OZ$OO888DNNDDO8DD7Z=I==.:~~......~~,.....~~:.....~~~.....,~ ...........=$$7ZZ7$Z$$OZ8OOZZZ$ZOO8OZO77+=7I::~~......~~,.....~~:.....~~~.....,~ ...........7$$7$7$OZOZZZ$$$$77IIII77$7++~::Z$:=~......~~,.....~~~.....~~~.....,~ ...........7Z7$$$OOZ$7I??II7I7I7IIIIIII+=~,?O:~~..............................,~ ...........$$$Z$8887===?+II7I77IIIIIII??=~:,8~~~..............................,~ ...........7$$Z$OOO$===++IIII7IIIIII?=~=~~~,Z,.................................. ...........I$$O88ZO$+~~=??IIIIIIIIIII??=:,,,O................................... ...........=$788ZZ8$=~~~=+?$$$$7777I77Z$ZZ7+7=.................................. ............Z$O8ZOZ=~~:~IO8DDDDDO$7I7Z8NDD7?~=.................................. ............O7ZO787=~::?7ZO8D888OO7II8888$Z?.?..:==.....,=====~......~=~==~~.... ............77$ZZZI~:::?7ZI8O7OOZOI+,Z$ZZ7II,7..,==....,==~........,===~,.,:.... ............7$=?I$I~::=I$7I$ZOOZZI++==ZZ$I+:.=..,==,....===,.......===.........: ...........,$+I=~7=:::~+?II77$$7?+=~=,+77I::,:..,==,....,=====:....===.........~ ............$+IZ=~+::::=+?I77777?=~~?:=+II?+~,..,==,........~==:...===.........: ............+I$7+?=I:::=?II77777?~,+I+,+??++:~..,==,........:==~...,====,,:~.... .............:?7+I??+:~=+II77777~I:?II++I??77:..,==,...,======~......~======.... ..............=,+?7=+~~+?IIIII77$$Z7I$?=?I+I=..,.........,,,.................... ...............:~+?~=:+???I??7II$ZOOO$7?+++Z?................................... ..................,~+=+77II+77I$ZO888ZO$$$?$I................................... ..................?:++I$$I=?ZOZ77$$$$IINOO?I.................................... ...................,~++I77IIZOZOO88888Z?$ZI?.................................... ....................:++?I7??$Z$7I7$$$$I+$$+..................................... ....................:=====?+?$$$$$O88Z7IZI,..................................... ....................,:===~=+77ZZZ$ZZZZI7$+...................................... .................,...:~=?=+$+7ZOOOOZZO8ZI:.... ................................. .................~...:~=++~~++ZO888OO8O7=:,..................................... .....................,:~=++===I$Z777Z$$I=~,....dovrebbe essere.................. .....................,,:~?I+~=+I7?7$Z$7?+=.....l'avatar di granze............... ............:.::::..,,,:~+?+~=?II7$$$7??.,...................................... ....................,,,,~++++=II77777+:::,...................................... ................,.....,,:=+??+I7$?=~~:::,......................................

Slide 19

Slide 19 text

CSS Sono ok per la maggiorparte dei casi ma: Non possono essere composte sullo stesso elemento È dif cile lanciarle in parallelo È impossibile animare valori che cambiano dinamicamente (provate un vertical accordion con testo ed height auto)!

Slide 20

Slide 20 text

Ok se fate un utilizzo massivo di animazioni del progetto, ma: Librerie esterne Come se non avessimo già abbastanza dipendenze È comunque una libreria esterna Probabilmente state sparando ad una mosca con un cannone Per quanto ne dica GSAP (140kB) non sono uno standard

Slide 21

Slide 21 text

Quindi? ste uebbe animescion apiai?

Slide 22

Slide 22 text

vediamo un po' di codice

Slide 23

Slide 23 text

var player = document.getElementById('toAnimate').animate([ { transform: 'scale(1)', opacity: 1, offset: 0 }, { transform: 'scale(.5)', opacity: .5, offset: .3 }, { transform: 'scale(.6)', opacity: .6, offset: 1 } ], { duration: 700, //milliseconds easing: 'ease-in-out', //'linear', a bezier curve, etc. delay: 10, //milliseconds iterations: Infinity, //or a number direction: 'alternate', //'normal', 'reverse', etc. fill: 'forwards' //'backwards', 'both', 'none', 'auto' });

Slide 24

Slide 24 text

Un pelo più dichiarative, così dichiarative che potremmo scriverle in puro CSS

Slide 25

Slide 25 text

@keyframes emphasis { 0% { transform: scale(1); opacity: 1;} 30% { transform: scale(.5); opacity: .5;} 100% { transform: scale(.6); opacity: .6;} } #toAnimate { animation: emphasis 700ms ease-in-out 10ms infinite alternate forwards; } Senza timore dei poteri forti

Slide 26

Slide 26 text

var player = document.getElementById('toAnimate').animate([ { transform: 'scale(1)', opacity: 1, offset: 0 }, { transform: 'scale(.5)', opacity: .5, offset: .3 }, { transform: 'scale(.6)', opacity: .6, offset: 1 } ], { duration: 700, //milliseconds easing: 'ease-in-out', //'linear', a bezier curve, etc. delay: 10, //milliseconds iterations: Infinity, //or a number direction: 'alternate', //'normal', 'reverse', etc. fill: 'forwards' //'backwards', 'both', 'none', 'auto' });

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Andando un po' più a fondo var animation = element.animate(keyframes, options);

Slide 29

Slide 29 text

oppure: keyframes È un oggetto che contiene tutte le proprietà animabili, può essere formattato in due modi: element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000); element.animate([ { // from opacity: 0, color: "#fff" }, { // to opacity: 1, color: "#000" } ], 2000);

Slide 30

Slide 30 text

options Un intero che rappresenta la durata dell'animazione in millisecondi oppure un oggetto che contiene una o più delle seguenti proprietà: id delay direction duration easing endDelay fill iterationStart iterations

Slide 31

Slide 31 text

Sì, in pratica sono le proprietà animation- del CSS esposte su JS

Slide 32

Slide 32 text

E n qua è quasi CSS in JS

Slide 33

Slide 33 text

La console di Chrome

Slide 34

Slide 34 text

Esatto, ritorna un oggetto di tipo Animation con i propri metodi e proprietà. Ed è qui che arriva il bello! animate()

Slide 35

Slide 35 text

Metodi cancel() torna allo stato iniziale finish() salta alla ne del dell'animazione pause() mette l'animazione in pausa play() mette l'animazione in esecuzione reverse() riproduce l'animazione al contrario

Slide 36

Slide 36 text

Proprietà currentTime mostra/setta il tempo di esecuzione in ms id ritorna l'id oncancel esegue una funzione quando l'animazione viene cancellata dall'apposito metodo onfinish esegue una funzione quando l'animazione termina playbackRate la "velocità" dell'animazione, può essere negativa playState mostra/setta lo stato di esecuzione startTime

Slide 37

Slide 37 text

Promise //set up 1 second animation to fade box out var box = document.getElementById('box'); var animation = box.animate([{ opacity: 1 }, { opacity: 0 }], 1000); function finishedHandler() { console.log('animation finished: ' + Date.now()); } function canceledHandler() { console.log('animation canceled: ' + Date.now()); } //the Promise version, log the timestamp when the Animation finishes animation.finished.then(finishedHandler, canceledHandler); //the effective successful equivalent with the onfinish callback animation.onfinish = finishedHandler; Dan Wilson

Slide 38

Slide 38 text

Promise finished ready

Slide 39

Slide 39 text

Altre cosucce da sapere

Slide 40

Slide 40 text

Un elemento può ovviamente avere più animazioni var animated = document.getElementById('cat'); var purr = animated.animate({}, 1000); var rotate = animated.animate({}, 2000); var jump = animated.animate({}, 3500);

Slide 41

Slide 41 text

Potete vedere tutte le animazioni presenti attraverso il metodo: document.getAnimations()

Slide 42

Slide 42 text

Perchè e quando usarle?

Slide 43

Slide 43 text

#OpinionePersonale Se l'animazione è funzionale va in JS, se è estetica nel CSS

Slide 44

Slide 44 text

Un , un una , un fanno della loro comparsa un motivo d'esistere accordion tooltip sidebar dropdown L'effetto hover su un bottone è enhancement

Slide 45

Slide 45 text

Ci sono alcuni casi come l' la in base alla viewport o ad altri elementi in pagina, in cui JS è necessario altezza posizione

Slide 46

Slide 46 text

LA POTENZA È NULLA SENZA CONTROLLO

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Ma veniamo al momento da tutti agognato! Il momento del ricordo

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

È possibile animare su un path!!1!1

Slide 51

Slide 51 text

MilanoJS var path = `path("M300.358,297.675c55.955,57.158 83.03,107.698 141.392,107.698c58 var p = document.getElementById('cat2'); var animation = p.animate({ offsetPath: [path, path ], offsetDistance: [0, "100%"] }, { duration: 4000, iterations: Infinity });

Slide 52

Slide 52 text

Utilizzarle oggi?

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Ma abbiamo un poly ll

Slide 55

Slide 55 text

e iniziano ad apparire progetti interessanti

Slide 56

Slide 56 text

react-web-animation

Slide 57

Slide 57 text

import { Component } from 'react'; import { Animated } from 'react-web-animation'; export default class Basic extends Component { getKeyFrames() { return [ { transform: 'scale(1)', opacity: 1, offset: 0 }, { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 } { transform: 'scale(.6)', opacity: 0.6, offset: 1 } ]; } getTiming( duration ) { return { duration, easing: 'ease-in-out', delay: 0, iterations: 2, direction: 'alternate'

Slide 58

Slide 58 text

Spe, parlando di performance?

Slide 59

Slide 59 text

CSS-based animations, and Web Animations where supported natively, are typically handled on a thread known as the "compositor thread". This is different from the browser's "main thread", where styling, layout, painting, and JavaScript are executed. This means that if the browser is running some expensive tasks on the main thread, these animations can keep going without being interrupted. Google developers

Slide 60

Slide 60 text

Quindi?

Slide 61

Slide 61 text

Il web non è un le .sketch o .psd, la user interface può trarre grandi vantaggi dalle animazioni Plz, possiamo usarle, facciamolo.

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Credit: Colin Garven

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

Bibliography Mozilla Developers Network Chrome platform status WAAPI Tutorial Intro to WAAPI Exploring WAAPI Motion in UX