Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:2eval:tema08 [2021/01/06 21:33]
admin [Animaciones]
+++ clase:daw:diw:2eval:tema08 [2022/02/13 19:57] (actual)
admin
@@ Línea 22: / Línea 22: @@
 Mas información:
-  * [[https://www.youtube.com/watch?v=sX5hzEMMQAI|Animaciones y transiciones CSS]]: Vídeo de Youtube
+  * Diseño
-  * [[https://www.kirupa.com/html5/css3_animations_vs_transitions.htm|CSS3: Animations vs. Transitions]]
+    * [[https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9|The ultimate guide to proper use of animation in UX]]
-  * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]]
+    * [[https://www.youtube.com/watch?v=MXMlTOnZSvo|Evangelina Ferreira - Newton meets CSS]]
+    * [[https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/|The Guide To CSS Animation: Principles and Examples]]
+  * CSS
+    * [[https://www.youtube.com/watch?v=sX5hzEMMQAI|Animaciones y transiciones CSS]]: Vídeo de Youtube
+    * [[https://www.kirupa.com/html5/css3_animations_vs_transitions.htm|CSS3: Animations vs. Transitions]]
+    * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]]
@@ Línea 230: / Línea 236: @@
   * propiedadCSS: La propiedad CSS a la que se le aplica la transición.
   * duracion: Duración en segundos de la transición
-  * timing-function: La velocidad de la transición. Sus valores son:
+  * timing-function: La velocidad de la transición.  Sus valores son:
-    * ''linear''
+    * ''linear'': Velocidad constante. $e=v \cdot t$
     * ''ease''
-    * ''ease-in''
+    * ''ease-in'': Aceleración constante. $e=\frac{1}{2} \cdot a \cdot t^{2}$
     * ''ease-out''
     * ''ease-in-out''
-    * ''step-start''
+    * ''steps(pasos)''
-    * ''step-end''
+    * ''cubic-bezier(n,n,n,n)''
-    * ''steps(int,start|end)''
-    * ''cubic-bezier(n,n,n,n)'': Para generar los valores se puede usar la siguiente página: [[https://cubic-bezier.com/|cubic-bezier]]
   * retardo: Cuanto tiempo en segundos tarda en empezar la transición.
-Mas información de la timing-function en: [[https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function|transition-timing-function - CSS | MDN]] y en [[https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp|CSS transition-timing-function property]]
+Mas información de la timing-function en:
+  * [[https://tympanus.net/codrops/css_reference/timing-function_value/|<timing-function>]]
+  * [[https://cubic-bezier.com/|https://cubic-bezier.com/]]
+  * [[http://www.roblaplaca.com/examples/bezierBuilder/|CSS cubic-bezier Builder]]
+  * [[https://matthewlein.com/tools/ceaser|Ceaser - CSS Easing Animation Tool - Matthew Lein]]
+  * [[https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function|transition-timing-function - CSS | MDN]]
+  * [[https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp|CSS transition-timing-function property]]
 Por ejemplo:
@@ Línea 257: / Línea 267: @@
   transition-delay:2s;
 </sxh>
@@ Línea 265: / Línea 273: @@
 ===== Animaciones =====
 Las animaciones son similares a las transiciones pero mas potentes además que suelen usarse desde JavaScript.
+Mas información:
+  * [[http://www.w3schools.com/css/css3_animations.asp|CSS3 Animations]]
+  * [[https://css-tricks.com/css-animation-libraries/|CSS Animation Libraries]]
+  * [[https://animxyz.com/|AnimXYZ]]
+  * [[https://daneden.github.io/animate.css/|Animate.css]]
+  * [[https://minimamente.com/example/magic_animations/|Magic Animations]]
+  *
 Las animaciones constan de dos apartados distintos.
@@ Línea 285: / Línea 302: @@
             .c-cuadrado--girar {
-              animation-name: c-cuadrado-girar;
+              animation-name: animacion-girar;
               animation-duration: 3s;
             }
-            @keyframes c-cuadrado-girar {
+            @keyframes animacion-girar {
 % {
                 transform: rotate(0deg);
@@ Línea 297: / Línea 314: @@
 % {
-                transform: rotate(365deg);
+                transform: rotate(360deg);
                 background-color: #1C4673;
               }
@@ Línea 323: / Línea 340: @@
   * ''animation-duration'': Duración en segundos.
   * ''animation-timing-function'': La velocidad
-    * ''linear'': Velocidad constante. //e=v*t//
+    * ''linear'': Velocidad constante. $e=v \cdot t$
     * ''ease''
-    * ''ease-in'': Aceleración constante //e=½a*t²//
+    * ''ease-in'': Aceleración constante $e=\frac{1}{2} \cdot a \cdot t^{2}$
     * ''ease-out''
     * ''ease-in-out''
@@ Línea 338: / Línea 355: @@
     * ''alternate-reverse'': Empieza en el 100% y avanza hacía el 0% y la 2º  vez lo hace del 0% al 100% y así sucesivamente.
   * ''animation-fill-mode'': Que CSS se aplica cuando acaba.
-    * ''none''
+    * ''none'': La animación antes de empezar o despues de acabar no tiene ningún estilo definido en la animación.
-    * ''forwards''
+    * ''forwards'': Al acabar la animación se queda como en el último Frame.
-    * ''backwards''
+    * ''backwards'': Antes de empezar la animación (por si hay un delay),  ya está  como en el primer Frame.
-    * ''both''
+    * ''both'': Es unir ''forwards'' y ''backwards''.
-  * ''animation-play-state'': Como empieza la animación
+  * ''animation-play-state'': Como empieza la animación. Mas información en [[https://css-tricks.com/how-to-play-and-pause-css-animations-with-css-custom-properties/|How to Play and Pause CSS Animations with CSS Custom Properties]]
     * ''running'': Empieza ejecutándose
     * ''paused'': Empieza pausada
   * ''animation'': La unión de todas las anteriores
+Mas información de la timing-function en:
+  * [[https://tympanus.net/codrops/css_reference/timing-function_value/|<timing-function>]]
+  * [[https://cubic-bezier.com/|https://cubic-bezier.com/]]
+  * [[http://www.roblaplaca.com/examples/bezierBuilder/|CSS cubic-bezier Builder]]
+  * [[https://matthewlein.com/tools/ceaser|Ceaser - CSS Easing Animation Tool - Matthew Lein]]
+  * [[https://developer.mozilla.org/es/docs/Web/CSS/animation-timing-function|animation-timing-function - CSS | MDN]]
+  * [[https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp|CSS animation-timing-function Property]]
 ==== JavaScript ====
+Para volver a ejecutar la animación desde JavaScript se hace de la siguiente forma:
 <sxh javascript>
@@ Línea 363: / Línea 390: @@
 </sxh>
-    * [[https://www.w3schools.com/jsref/met_win_settimeout.asp|Timeout]]
+Es decir que hay que quitar la clase CSS que tiene la animación y volver a ponerla. El problema es que si la quitas y la vuelves a poner , el navegador no se entera. Así que hay que hacer el truco de quitarla , esperar 10 ms con un timeout y añadir la clase.
+Mas información:
+  * [[https://www.w3schools.com/jsref/met_win_settimeout.asp|Timeout]]
+===== Animaciones simétricas =====
+La animación que hemos visto , vuelve al mismo sitio. Si queremos una animación que haga eso , no es necesario definir //la ida y la vuelta//. Es tan sencillo como solo definir la ida y decir que vuelva.
-Mas información:
+Eso se consigue de la siguiente forma:
-  * [[http://www.w3schools.com/css/css3_animations.asp|CSS3 Animations]]
-  * [[https://www.sitepoint.com/top-9-animation-libraries-use-2016/|Top 9 Animation Libraries to Use in 2016]]
+<sxh css>
-  * [[https://daneden.github.io/animate.css/|Animate.css]]
+.c-cuadrado--girar {
-  * [[https://minimamente.com/example/magic_animations/|Magic Animations]]
+  animation-name: animacion-girar;
+  animation-duration: 1.5s;
+  animation-iteration-count: 2;
+  animation-direction: alternate;
+}
+@keyframes animacion-girar {
+% {
+	transform: rotate(0deg);
+	background-color: #bbd4f7;
+  }
+% {
+	transform: rotate(360deg);
+	background-color: #1C4673;
+  }
+}
+</sxh>
+Los cambios que hemos hecho son los siguientes:
+  * Hacemos que la animación dure la mitad: ''animation-duration: 1.5s;''
+  * Pero hacemos que la haga 2 veces: ''animation-iteration-count: 2;''
+  * Por último hacemos que la segunda vez la haga al revés: ''animation-direction: alternate;''
+Y con éste truco siempre tenemos una animación de ida y vuelta.
 ===== Ejercicios =====
 ==== Ejercicio 1 ====
-Crea un programa en JavaScript+HTML+CSS que un rectángulo rojo vaya modificando el ancho desde lo 100px a los 600px y que tarde 4 segundos
+Crea una página web que:
+  * Muestre un cuadrado rojo de 200px de lado.
+  * Que al poner el cursor encima  gire 45 grados y cambie su color a azul.
+  * Que al quitar el curso vuelva a su posición y su color original.
+  * Que dure 2 segundos.
 ==== Ejercicio 2 ====
+Crea una página web que:
+  * Muestre un cuadrado rojo de 200px de lado.
+  * Que al poner el cursor encima  se cambia su ancho para ocupar 600px
+  * Que al quitar el curso vuelva a su tamaño original.
+  * Que dure 3 segundos.
 Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos.
 ==== Ejercicio 3 ====
-Modifica el anterior ejercicio para que la animación solo se haga al pulsar un botón
+Crea una página web:
+  * Que el fondo sea gris claro.
+  * Muestre un ''input'' de tipo ''text'' de fondo banco, bordes sin redondear.
+  * Que al poner el curso sobre él para escribir, se hagan los bordes redondeados, el color de fondo sea un azul muy clarito, se añada una sombra suave de color azul.
+  * Que al quitar el curso el ''input'' vuelva a su etilo original.
+  * Que dure 1 segundo.
 ==== Ejercicio 4 ====
-Modifica el anterior ejercicio para que se haga grande al pulsar el botón pero si lo vuelves a pulsar que se haga otra vez pequeño
+Crea una página web:
+  * En el fondo se verá una foto con la torre de pisa.
+  * Que sobre el borde superior de la torre coloques la imagen de una pelota.
+  * Que al pulsar un botón se active una animación que deje caer la pelta hasta el suelo y al acabar se quede ahí.
+  * Si se vuelve a pulsar el botón, repetirá la animación.
+  * La duración de la animación será de 9,4s (Es lo que tardaría en caer una pelota desde la torre de pisa suponiendo que no hay rozamiento)
+Debes probar con distintas ''animation-timing-function'' y elegir la que se parezca mas a la caída real de la pelota.
+==== Ejercicio 5 ====
+Repite el ejercicio anterior de la torre de pisa pero ahora será una canasta de baloncesto y una pelota de baloncesto.
+Otra diferencia es que la pelota al llegar abajo rebotará y volverá hasta arriba del todo y así indefinidamente.
+==== Ejercicio 6 ====
+Crea una página web:
+  * En el fondo se verá una foto del espacio y de la Estación Espacial Internacional (IIS).
+  * Que sobre algún lado de la IIS coloques la imagen de un astronauta.
+  * Que al pulsar un botón se active una animación que nueva el astronauta durante 1000px y al acabar se quede ahí.
+  * Si se vuelve a pulsar el botón, repetirá la animación.
+  * La duración de la animación será de 5s
+Debes probar con distintas ''animation-timing-function'' y elegir la que se parezca mas al movimiento rectilíneo uniforme que se tiene en el espacio.
+==== Ejercicio 7 ====
+Crea una página web:
+  * En el fondo se verá una foto de una carretera recta vista desde arriba.
+  * Que sobre el inicio de la carretera coloques la imagen de un coche visto desde arriba.
+  * Que al pulsar un botón se active una animación que nueva el coche hasta llegar al final de la carretera y al acabar se quede ahí.
+  * Si se vuelve a pulsar el botón, repetirá la animación.
+  * La duración de la animación será la necesaria para que de sensación de realidad.
+Debes probar con distintas ''animation-timing-function'' y elegir la que se parezca mas al movimiento acelerado de un coche hasta llegar a una velocidad y luego que sigue con una velocidad constante.
+==== Ejercicio 8 ====
+Repite el ejercicio anterior pero ahora el coche irá frenando cuando llegue al final de la carretera.
+==== Ejercicio 9 ====
+Crea una página web:
+  * Que muestre un botón que tenga con el  texto "Registrarse" y un icono de un usuario (usar Font Awesome).
+  * Que cuando pasen 20 seg desde la carga de la página, se lance una animación que haga que el icono se haga un poco mas grande y tenga "mas" color de forma que resalte.
+  * La animación no se debe ejecutar si el usuario antes ha pulsado el botón.
+  * Al acabar la animación el icono se quedará como estaba
+  * La animación debe durar 2s.

logongas

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página