Animaciones en Vanilla JS

Transcript

1. Animaciones en vanilla js @keyserfaty
2. Cosas que vamos a hacer: . Entender transitions en css. . Entender brezier curves para establecer los tiempos de las animaciones. . Identificar qué métodos del DOM se suelen usar en animaciones. . Entender cómo analizar una animación para poder traducirla en código.
3. Repo de cosas que hay bajar: => github.com/keyserfaty/workshop-js
4. PARTE 1 TRANSITIONS
5. ¿qué hace transition? Aplicá una transición cuando hay un cambio en la propiedad que le especificamos.
6. Imagen (li) Contenedor (ul) ¿qué está pasando?
7. Momento 0: Momento 1:
8. ¿a dónde tenemos que agregar la transición?
9. transition-property: transform; transition-duration: 4s;
10. Un repaso por js vanilla
11. Guía amiga para moverse por el DOM: - document.querySelector(‘.clase’) - document.querySelectorAll(‘#id’) - nodo.addEventListerner(‘evento’, callback) - nodo.style.prop = ‘’ -> body.style.backgroundColor = ‘red’ - nodo.setAttribute(‘style’, ‘color: red’) - nodo.getAttribute(‘data-num’)
12. 15min para jugar
13. Algunas ideas: - ¿qué otras propiedades de css se pueden transicionar? - ¿cómo activarías para activar la transición cuando el usuario scrollea hacia abajo? - ¿se te ocurre alguna forma de que la transición vuelva a arrancar cuando el usuario clickee afuera del slider en vez de adentro? - ¿se te ocurre alguna forma de que la animación vuelva a arrancar cuando termine?
14. PARTE 2 TRANSITIONS II
15. ¿se puede saltar a una imagen directamente?
16. transition-delay: 2s; transition-delay: -2s;
17. Bezier curves Se usan para dibujar formas y en el caso de transitions nos sirve para determinar la velocidad a la que queremos que suceda la animación.
18. http://easings.net/#
19. ¿qué significan estas curvas?
20. NERD TIME
21. ¿qué significan estas curvas? m = 0 y = mx + b => m es la pendiente de la curva m = 0.5 m = 0.8
22. Mientras más se acerque el valor a 1 más rápido va a ser el movimiento de la animación m = 0 m = 0.5 m = 0.8
23. ¿cómo traducimos esto en css? transition-timing-function: cubic-bezier(x2, y2, x3, y3) La x representa el tiempo: 0 es cuando la animación arranca y 1 es cuando termina. La y es la completitud: 0 es el valor inicial de la propiedad y 1 es el valor final.
24. ¿cómo se representa una recta? transition-timing-function: cubic-bezier(0, 0, 1, 1)
25. Otras formas de escribir funciones de timing: linear, ease, ease-in, ease-out y ease-in-out
26. Saltar el tiempo en steps Otra forma de mover las animaciones en el tiempo es con steps. De esta forma se puede ir de un paso al siguiente de la animación.
27. ¿cómo es la sintaxis? transition-timing-function: steps(4, start)
28. ¿cómo podemos hacer un slider continuo?
29. Momento 0: Momento 1:
30. Momento 0: Momento 1: 0 1 1 2 Momento 3: 2 3 3 0 Momento 2:
31. 20min para jugar
32. PARTE 3 ANALIZANDO UNA ANIMACIÓN
34. Identificar principio y final Crear clases para los dos estados Identificar propiedad en transición Agregar transición