Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Animaciones con CSS y JavaScript - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 8 de diciembre de 2020 por Susana L.

24 visualizaciones

Realizar animaciones sencillas utilizando CSS, JavaScript y WebAPI de JavaScript

Más información Transcripción

Descargar la transcripción

Hola, ¿qué tal? En este vídeo vamos a ver cómo podemos hacer animaciones utilizando CSS y Javascript. 00:00:00
Cómo podemos hacer animaciones muy sencillitas y un poquito más complejas. 00:00:08
Para ello vamos a utilizar un ejemplo. 00:00:12
Este ejemplo que vamos a utilizar es un ejemplo muy sencillo en el que tenemos una caja que pone 00:00:15
bienvenidos a DAW y nuestra idea es que sea un rótulo que vaya de izquierda a derecha de la pantalla, 00:00:20
en el eje de las X. 00:00:25
También vamos a tener un botón para que cuando le demos al play haga eso 00:00:26
Nosotros ya conocemos cómo se hace en CSS 00:00:31
Nosotros en CSS sabemos que si queremos trasladarnos de izquierda a derecha 00:00:35
Vamos a utilizar la transformación que es trasladarse el eje de las X un 100% 00:00:40
Vamos a irnos hasta la derecha en todo 00:00:45
Y para poder generar la transición nosotros tenemos que configurar en el objeto 00:00:49
con el que estamos trabajando, que queremos que la transición, las propiedades que formen parte de esa transición 00:00:55
sean todas, en nuestro caso solamente es una, transform, la duración de la transición que sean 5 segundos 00:01:03
y que el tipo sea lineal. ¿Cómo hemos conseguido interactuar? ¿Cómo podemos conseguir interactuar 00:01:11
utilizando solamente CSS? Pues con la pseudoclase Jover, es decir, cuando yo ponga, pase el ratón 00:01:19
por encima de la caja, la caja se desplazará a la derecha. Vamos a ver cómo sería esto. Aquí podéis 00:01:25
ver el código que os he enseñado, pero el código completo, de acuerdo, donde veis que está la caja 00:01:35
con las características de la transición, la transformación y el código HTML. Entonces, cuando 00:01:41
Cuando nosotros pasamos el ratón por encima, va hasta el final de la pantalla. 00:01:48
Muy bien, pues ahora lo que queremos es que en lugar de que el rótulo vaya de izquierda a derecha cuando pasamos el ratón, 00:01:59
lo que queremos es que cuando ejecutemos el botón play vaya de izquierda a derecha, con lo que tenemos que gestionar este evento de Javascript. 00:02:07
¿Qué pasos tendríamos que seguir? 00:02:13
Lo primero que tenemos que hacer es configurar los estilos del objeto y las transiciones. 00:02:15
Igual que estaba en el caso de CSS con el hover, perfecto. 00:02:21
Nosotros teníamos en el hover aquí la transformación, que es a la que llama. 00:02:25
Pues bien, lo que vamos a hacer es crearnos una clase, que en este caso se llama public, 00:02:29
donde tenemos esta información, es decir, hemos sustituido el hover por la clase public. 00:02:33
Y luego lo que tenemos que hacer es escuchar el evento. 00:02:38
Yo cojo el botón del play, escucho el evento click y llamo a la función animar. 00:02:41
Y bien, ¿qué tiene la función animar? 00:02:46
La función animar lo que tiene es que si la caja pertenecía a la clase caja inicialmente, ahora va a pertenecer a la clase public, entonces al pertenecer a la clase public llama a la transformación, ¿vale? Vamos a seguir los pasos en nuestro código para verlo en el ejemplo. 00:02:47
Lo primero que hacíamos es definir los estilos, está, definir la clase, entonces aquí en lugar de hover tenemos que poner public, ¿vale? Y ya tenemos asociada esta public. 00:03:03
Vemos que inicialmente la caja pertenece a la clase caja, lo que queremos es que cuando haga clic pertenezca a la clase public, para eso ponemos el código javascript. 00:03:19
Este código JavaScript, ¿cómo lo interpretamos? 00:03:29
Lo primero, como siempre, tenemos que comprobar que se haya cargado el DOM. 00:03:31
Entonces, comprobamos el LOAD de Windows, ¿vale? 00:03:35
Y lo llevamos a iniciar. 00:03:38
Iniciar lo que hace es que me escuche a los eventos y me está escuchando el evento click, ¿vale? 00:03:40
Del botón play. 00:03:45
Cuando doy click al botón play, llamo a la función animar. 00:03:46
La función animar lo que tiene es que el elemento cuyo ID es caja1, es decir, mi caja, ¿de acuerdo? 00:03:50
le paso a la clase public, ¿de acuerdo? 00:03:58
Entonces, al pasarlo a la clase public, activa la transformación. 00:04:01
Voy a salvar, voy a cargar y vamos a probar. 00:04:05
Y funciona. 00:04:09
¿De acuerdo? 00:04:11
Muy bien. 00:04:15
El problema que tenemos con la transición es que si le damos al play, 00:04:16
observamos que solamente lo va a hacer una vez. 00:04:19
Y bueno, pues es para lo que nos interese. 00:04:22
Nos puede interesar que ese rótulo aparezca una y otra vez 00:04:24
hasta el infinito, indefinidamente. 00:04:28
Para eso lo que vamos a hacer es utilizar las animaciones. 00:04:31
Bien, ¿qué pasos tendríamos que seguir? 00:04:36
Nuestra idea es la misma, nuestra idea es que primero vamos a crear las clases y vamos a configurar la animación. 00:04:39
Vemos aquí que en la clase Publi, en lugar de ya trabajar con las transiciones y transformaciones, tenemos la animación. 00:04:45
El nombre de la animación, que en este caso se llama Publi, ¿cuánto va a durar? 5 segundos. 00:04:53
y cuántas veces, infinita esto es 00:04:57
que lo va a hacer hasta el final 00:05:00
y defino los keyframes, aquí estoy diciendo 00:05:01
solamente del principio hasta el final 00:05:04
es decir, al principio 00:05:05
va a estar en el 0% 00:05:07
el de gx y al final va a estar al 100% 00:05:09
entonces va a estar al principio, al final 00:05:12
vuelta y tal, podríamos configurar 00:05:13
dentro de estos intervalos 00:05:15
lo que nosotros queramos, como sabemos en las animaciones 00:05:17
y como vamos 00:05:20
a gestionar los eventos 00:05:21
exactamente igual que en las transiciones 00:05:23
tenemos el botón play 00:05:25
que se escuche el clic y llama a animar y en animar cambiamos a la clase public, es decir, lo único que tenemos que cambiar 00:05:27
respecto al supuesto anterior es la clase public y los keyframes. Pues vamos a ver en el código. 00:05:34
Muy bien, entonces aquí sustituiríamos esto por esto, es decir, defino la clase public con la animación y los keyframes 00:05:43
con los distintos pasos que vamos a seguir. 00:05:53
Salvamos, pagamos y probamos. 00:05:58
Entonces veremos que llega al final, 00:06:04
vuelve y llega al final, así indefinidamente. 00:06:09
¿De acuerdo? 00:06:12
Esto es utilizando, cambiando las clases 00:06:14
y utilizando animaciones o transiciones. 00:06:16
Es la misma historia. 00:06:20
Pero ¿cómo lo haríamos utilizando JavaScript puro? 00:06:21
Vamos a ver qué se puede hacer. 00:06:24
Nosotros con Javascript puro existe la web Animation API, que es una API, que es un estándar nuevo del V3C, que es compatible con Chrome, Open y Firefox, ¿vale? 00:06:29
En este caso, tú lo que puedes hacer con Javascript es controlar cada momento de la animación, los estilos que estás haciendo y hacer animaciones más complejas. 00:06:38
También es cierto que es más difícil. 00:06:47
¿Qué es lo que utiliza el web API? Utiliza el objeto animation, que tiene estas propiedades que veis y estos métodos que, como veis, se puede pausar, hacer play, el reverse y tal. 00:06:48
Bien, nosotros vamos a ver el método animate del objeto animation. Es un método abreviado que permite gestionar la animación y lo vamos a entender muy bien una vez que ya hemos entendido los pasos anteriores. 00:07:00
¿Qué sintaxis tiene? Tenemos un elemento, ¿vale? La caja, por ejemplo, y el método animate lo que tiene son dos parámetros. 00:07:14
Los keyframes, es decir, ¿qué es lo que yo voy a modificar? Lo que configurábamos antes dentro de los keyframes. 00:07:21
Y luego opciones, ¿qué opciones son? Todas las opciones que habíamos puesto cuando definíamos la animación, pues la duración, si era lineal, etc. 00:07:28
¿Vale? Si hay un delay, etc. 00:07:37
¿Cómo sería el caso de que quisiéramos cambiar la opacidad de una caja en dos segundos? 00:07:40
Pues lo que nosotros hacemos es llamar al objeto con animate, el método utilizando el método animate, y lo vamos a obtener en un array, ¿veis? 00:07:46
En este array lo que vamos a hacer son las distintas secuencias que vamos a hacer, los distintos keyframes que íbamos a tener. 00:07:53
Antes teníamos 0%, en este caso sería el 0% es la opacidad de 1 y al 100% es la opacidad de 0.4, pero iríamos configurándola así, ¿vale? 00:08:00
Todo esto metido dentro de un array, esto es muy importante, y luego el segundo parámetro. El segundo parámetro son todas las posibles opciones. En este caso tenemos que la duración es de dos segundos. Entonces, esto lo que va a hacer es que me va a animar una caja de forma que va a cambiar la opacidad en la duración de dos segundos. 00:08:09
En nuestro ejemplo, ¿cómo sería? 00:08:25
Modificaríamos la función animar de forma que para el objeto caja 1 utilice el método animate en el que primero definimos los keyframes, o sea, definimos las distintas animaciones que va a haber. 00:08:28
De acuerdo, nuestro caso es ir del 0 al 100% del eje de las X. 00:08:42
Es importante que estas distintas configuraciones de frames de nuestra animación estén dentro de un array, ¿vale? 00:08:49
Son los distintos objetos de un array. 00:08:58
De acuerdo, el siguiente parámetro del método animate son las opciones. 00:09:00
Entonces, en nuestro caso hemos configurado la opción de duración para 5 segundos y que esto indefinidamente esté haciendo esta animación, ¿vale? Por eso ponemos Infinity. 00:09:06
Vamos a ver cómo sería el código. Entonces, lo primero, en nuestro código no necesitamos la configuración de la clase, la quitaríamos y lo que haríamos sería modificar la función animar. 00:09:16
Entonces nuestra función animar, ahora meteríamos la información del webapp, animate, las dos transformaciones y las opciones, no olvidéis los corchetes, ¿vale? Muy bien, pues salvamos, vamos a nuestra animación, recargamos y vamos a ver qué sucede, vemos que va a izquierda a derecha a hacer animación y a ver si lo vuelve a hacer cuando acabe, lo vuelve a hacer cuando acabe y así infinitas veces. 00:09:32
Muy bien, pues espero que os haya servido este vídeo. Hasta luego. 00:09:59
Idioma/s:
es
Autor/es:
Susana López Luengo
Subido por:
Susana L.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
24
Fecha:
8 de diciembre de 2020 - 11:00
Visibilidad:
Público
Centro:
IES PALOMERAS-VALLECAS
Duración:
10′ 06″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
306.94 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid