1 00:00:00,940 --> 00:00:07,980 Hola, ¿qué tal? En este vídeo vamos a ver cómo podemos hacer animaciones utilizando CSS y Javascript. 2 00:00:08,359 --> 00:00:12,080 Cómo podemos hacer animaciones muy sencillitas y un poquito más complejas. 3 00:00:12,679 --> 00:00:15,199 Para ello vamos a utilizar un ejemplo. 4 00:00:15,859 --> 00:00:20,219 Este ejemplo que vamos a utilizar es un ejemplo muy sencillo en el que tenemos una caja que pone 5 00:00:20,219 --> 00:00:25,679 bienvenidos a DAW y nuestra idea es que sea un rótulo que vaya de izquierda a derecha de la pantalla, 6 00:00:25,839 --> 00:00:26,699 en el eje de las X. 7 00:00:26,699 --> 00:00:31,280 También vamos a tener un botón para que cuando le demos al play haga eso 8 00:00:31,280 --> 00:00:35,399 Nosotros ya conocemos cómo se hace en CSS 9 00:00:35,399 --> 00:00:40,259 Nosotros en CSS sabemos que si queremos trasladarnos de izquierda a derecha 10 00:00:40,259 --> 00:00:45,560 Vamos a utilizar la transformación que es trasladarse el eje de las X un 100% 11 00:00:45,560 --> 00:00:49,020 Vamos a irnos hasta la derecha en todo 12 00:00:49,020 --> 00:00:55,920 Y para poder generar la transición nosotros tenemos que configurar en el objeto 13 00:00:55,920 --> 00:01:03,899 con el que estamos trabajando, que queremos que la transición, las propiedades que formen parte de esa transición 14 00:01:03,899 --> 00:01:11,959 sean todas, en nuestro caso solamente es una, transform, la duración de la transición que sean 5 segundos 15 00:01:11,959 --> 00:01:19,379 y que el tipo sea lineal. ¿Cómo hemos conseguido interactuar? ¿Cómo podemos conseguir interactuar 16 00:01:19,379 --> 00:01:25,599 utilizando solamente CSS? Pues con la pseudoclase Jover, es decir, cuando yo ponga, pase el ratón 17 00:01:25,599 --> 00:01:35,129 por encima de la caja, la caja se desplazará a la derecha. Vamos a ver cómo sería esto. Aquí podéis 18 00:01:35,129 --> 00:01:41,109 ver el código que os he enseñado, pero el código completo, de acuerdo, donde veis que está la caja 19 00:01:41,109 --> 00:01:48,549 con las características de la transición, la transformación y el código HTML. Entonces, cuando 20 00:01:48,549 --> 00:01:55,609 Cuando nosotros pasamos el ratón por encima, va hasta el final de la pantalla. 21 00:01:59,790 --> 00:02:07,450 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, 22 00:02:07,549 --> 00:02:13,370 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. 23 00:02:13,849 --> 00:02:15,189 ¿Qué pasos tendríamos que seguir? 24 00:02:15,409 --> 00:02:21,020 Lo primero que tenemos que hacer es configurar los estilos del objeto y las transiciones. 25 00:02:21,719 --> 00:02:25,180 Igual que estaba en el caso de CSS con el hover, perfecto. 26 00:02:25,639 --> 00:02:29,139 Nosotros teníamos en el hover aquí la transformación, que es a la que llama. 27 00:02:29,340 --> 00:02:32,840 Pues bien, lo que vamos a hacer es crearnos una clase, que en este caso se llama public, 28 00:02:33,620 --> 00:02:37,719 donde tenemos esta información, es decir, hemos sustituido el hover por la clase public. 29 00:02:38,360 --> 00:02:40,560 Y luego lo que tenemos que hacer es escuchar el evento. 30 00:02:41,240 --> 00:02:45,199 Yo cojo el botón del play, escucho el evento click y llamo a la función animar. 31 00:02:46,159 --> 00:02:47,659 Y bien, ¿qué tiene la función animar? 32 00:02:47,659 --> 00:03:03,900 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. 33 00:03:03,900 --> 00:03:18,099 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. 34 00:03:19,000 --> 00:03:28,479 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. 35 00:03:29,439 --> 00:03:31,680 Este código JavaScript, ¿cómo lo interpretamos? 36 00:03:31,780 --> 00:03:35,199 Lo primero, como siempre, tenemos que comprobar que se haya cargado el DOM. 37 00:03:35,539 --> 00:03:38,360 Entonces, comprobamos el LOAD de Windows, ¿vale? 38 00:03:38,639 --> 00:03:40,360 Y lo llevamos a iniciar. 39 00:03:40,460 --> 00:03:44,979 Iniciar lo que hace es que me escuche a los eventos y me está escuchando el evento click, ¿vale? 40 00:03:45,759 --> 00:03:46,620 Del botón play. 41 00:03:46,780 --> 00:03:50,439 Cuando doy click al botón play, llamo a la función animar. 42 00:03:50,439 --> 00:03:58,300 La función animar lo que tiene es que el elemento cuyo ID es caja1, es decir, mi caja, ¿de acuerdo? 43 00:03:58,479 --> 00:04:01,400 le paso a la clase public, ¿de acuerdo? 44 00:04:01,879 --> 00:04:04,819 Entonces, al pasarlo a la clase public, activa la transformación. 45 00:04:05,280 --> 00:04:08,539 Voy a salvar, voy a cargar y vamos a probar. 46 00:04:09,280 --> 00:04:09,759 Y funciona. 47 00:04:11,120 --> 00:04:11,479 ¿De acuerdo? 48 00:04:15,889 --> 00:04:16,329 Muy bien. 49 00:04:16,569 --> 00:04:19,389 El problema que tenemos con la transición es que si le damos al play, 50 00:04:19,649 --> 00:04:21,790 observamos que solamente lo va a hacer una vez. 51 00:04:22,610 --> 00:04:24,649 Y bueno, pues es para lo que nos interese. 52 00:04:24,649 --> 00:04:28,490 Nos puede interesar que ese rótulo aparezca una y otra vez 53 00:04:28,490 --> 00:04:31,009 hasta el infinito, indefinidamente. 54 00:04:31,009 --> 00:04:35,629 Para eso lo que vamos a hacer es utilizar las animaciones. 55 00:04:36,829 --> 00:04:38,870 Bien, ¿qué pasos tendríamos que seguir? 56 00:04:39,269 --> 00:04:44,670 Nuestra idea es la misma, nuestra idea es que primero vamos a crear las clases y vamos a configurar la animación. 57 00:04:45,350 --> 00:04:53,029 Vemos aquí que en la clase Publi, en lugar de ya trabajar con las transiciones y transformaciones, tenemos la animación. 58 00:04:53,449 --> 00:04:57,449 El nombre de la animación, que en este caso se llama Publi, ¿cuánto va a durar? 5 segundos. 59 00:04:57,449 --> 00:05:00,069 y cuántas veces, infinita esto es 60 00:05:00,069 --> 00:05:01,129 que lo va a hacer hasta el final 61 00:05:01,129 --> 00:05:04,009 y defino los keyframes, aquí estoy diciendo 62 00:05:04,009 --> 00:05:05,750 solamente del principio hasta el final 63 00:05:05,750 --> 00:05:07,110 es decir, al principio 64 00:05:07,110 --> 00:05:09,769 va a estar en el 0% 65 00:05:09,769 --> 00:05:12,170 el de gx y al final va a estar al 100% 66 00:05:12,170 --> 00:05:13,569 entonces va a estar al principio, al final 67 00:05:13,569 --> 00:05:15,930 vuelta y tal, podríamos configurar 68 00:05:15,930 --> 00:05:17,290 dentro de estos intervalos 69 00:05:17,290 --> 00:05:20,149 lo que nosotros queramos, como sabemos en las animaciones 70 00:05:20,149 --> 00:05:21,470 y como vamos 71 00:05:21,470 --> 00:05:23,889 a gestionar los eventos 72 00:05:23,889 --> 00:05:25,689 exactamente igual que en las transiciones 73 00:05:25,689 --> 00:05:27,170 tenemos el botón play 74 00:05:27,170 --> 00:05:34,290 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 75 00:05:34,290 --> 00:05:39,769 respecto al supuesto anterior es la clase public y los keyframes. Pues vamos a ver en el código. 76 00:05:43,180 --> 00:05:53,480 Muy bien, entonces aquí sustituiríamos esto por esto, es decir, defino la clase public con la animación y los keyframes 77 00:05:53,480 --> 00:05:57,839 con los distintos pasos que vamos a seguir. 78 00:05:58,660 --> 00:06:04,000 Salvamos, pagamos y probamos. 79 00:06:04,540 --> 00:06:06,980 Entonces veremos que llega al final, 80 00:06:09,410 --> 00:06:12,209 vuelve y llega al final, así indefinidamente. 81 00:06:12,889 --> 00:06:13,209 ¿De acuerdo? 82 00:06:14,209 --> 00:06:16,769 Esto es utilizando, cambiando las clases 83 00:06:16,769 --> 00:06:20,050 y utilizando animaciones o transiciones. 84 00:06:20,370 --> 00:06:21,310 Es la misma historia. 85 00:06:21,430 --> 00:06:23,990 Pero ¿cómo lo haríamos utilizando JavaScript puro? 86 00:06:24,509 --> 00:06:25,790 Vamos a ver qué se puede hacer. 87 00:06:29,110 --> 00:06:37,850 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? 88 00:06:38,310 --> 00:06:46,829 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. 89 00:06:47,029 --> 00:06:48,569 También es cierto que es más difícil. 90 00:06:48,569 --> 00:06:59,509 ¿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. 91 00:07:00,269 --> 00:07:13,810 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. 92 00:07:14,550 --> 00:07:21,769 ¿Qué sintaxis tiene? Tenemos un elemento, ¿vale? La caja, por ejemplo, y el método animate lo que tiene son dos parámetros. 93 00:07:21,769 --> 00:07:27,769 Los keyframes, es decir, ¿qué es lo que yo voy a modificar? Lo que configurábamos antes dentro de los keyframes. 94 00:07:28,790 --> 00:07:37,069 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. 95 00:07:37,529 --> 00:07:39,569 ¿Vale? Si hay un delay, etc. 96 00:07:40,550 --> 00:07:46,170 ¿Cómo sería el caso de que quisiéramos cambiar la opacidad de una caja en dos segundos? 97 00:07:46,449 --> 00:07:53,410 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? 98 00:07:53,889 --> 00:08:00,829 En este array lo que vamos a hacer son las distintas secuencias que vamos a hacer, los distintos keyframes que íbamos a tener. 99 00:08:00,829 --> 00:08:08,990 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? 100 00:08:09,569 --> 00:08:25,930 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. 101 00:08:25,930 --> 00:08:27,850 En nuestro ejemplo, ¿cómo sería? 102 00:08:28,750 --> 00:08:42,470 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. 103 00:08:42,470 --> 00:08:47,990 De acuerdo, nuestro caso es ir del 0 al 100% del eje de las X. 104 00:08:49,149 --> 00:08:58,029 Es importante que estas distintas configuraciones de frames de nuestra animación estén dentro de un array, ¿vale? 105 00:08:58,129 --> 00:08:59,690 Son los distintos objetos de un array. 106 00:09:00,330 --> 00:09:06,230 De acuerdo, el siguiente parámetro del método animate son las opciones. 107 00:09:06,230 --> 00:09:16,889 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. 108 00:09:16,889 --> 00:09:32,470 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. 109 00:09:32,470 --> 00:09:59,049 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. 110 00:09:59,049 --> 00:10:04,309 Muy bien, pues espero que os haya servido este vídeo. Hasta luego.