logongas

Herramientas de usuario

Herramientas del sitio

Traza:
clase:daw:diw:2eval:tema08

Diferencias

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

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
clase:daw:diw:2eval:tema08 [2021/01/07 17:10]
admin [8. Animaciones] 		clase:daw:diw:2eval:tema08 [2022/02/13 19:57] (actual)
admin
Línea 22: Línea 22:
  
 Mas información: 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.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 231: Línea 236:
   * propiedadCSS: La propiedad CSS a la que se le aplica la transición.   * propiedadCSS: La propiedad CSS a la que se le aplica la transición.
   * duracion: Duración en segundos de 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'': Velocidad constante. //e=v*t//+    * ''linear'': Velocidad constante. $e=v \cdot t$
     * ''ease''     * ''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-out''
     * ''ease-in-out''     * ''ease-in-out''
     * ''steps(pasos)''     * ''steps(pasos)''
-    * ''cubic-bezier(n,n,n,n)'': Para generar los valores se puede usar la siguiente página: [[https://cubic-bezier.com/|cubic-bezier]]+    * ''cubic-bezier(n,n,n,n)''
   * retardo: Cuanto tiempo en segundos tarda en empezar la transición.   * 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: Por ejemplo:
Línea 256: Línea 267:
   transition-delay:2s;   transition-delay:2s;
 </sxh> </sxh>
- 
- 
  
  
Línea 267: Línea 276:
 Mas información: Mas información:
   * [[http://www.w3schools.com/css/css3_animations.asp|CSS3 Animations]]   * [[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]]+  * [[https://css-tricks.com/css-animation-libraries/|CSS Animation Libraries]] 
 +  * [[https://animxyz.com/|AnimXYZ]]
   * [[https://daneden.github.io/animate.css/|Animate.css]]   * [[https://daneden.github.io/animate.css/|Animate.css]]
   * [[https://minimamente.com/example/magic_animations/|Magic Animations]]   * [[https://minimamente.com/example/magic_animations/|Magic Animations]]
 +  * 
 +
  
 Las animaciones constan de dos apartados distintos.  Las animaciones constan de dos apartados distintos. 
Línea 290: Línea 302:
                          
             .c-cuadrado--girar {             .c-cuadrado--girar {
-              animation-name: c-cuadrado-girar;+              animation-name: animacion-girar;
               animation-duration: 3s;               animation-duration: 3s;
             }             }
                          
                          
-            @keyframes c-cuadrado-girar {+            @keyframes animacion-girar {
               0% {               0% {
                 transform: rotate(0deg);                 transform: rotate(0deg);
Línea 302: Línea 314:
                              
               50% {               50% {
-                transform: rotate(365deg);+                transform: rotate(360deg);
                 background-color: #1C4673;                 background-color: #1C4673;
               }               }
Línea 328: Línea 340:
   * ''animation-duration'': Duración en segundos.   * ''animation-duration'': Duración en segundos.
   * ''animation-timing-function'': La velocidad   * ''animation-timing-function'': La velocidad
-    * ''linear'': Velocidad constante. //e=v*t//+    * ''linear'': Velocidad constante. $e=v \cdot t$
     * ''ease''     * ''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-out''
     * ''ease-in-out''     * ''ease-in-out''
Línea 343: 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.     * ''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.   * ''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     * ''running'': Empieza ejecutándose
     * ''paused'': Empieza pausada     * ''paused'': Empieza pausada
   * ''animation'': La unión de todas las anteriores   * ''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 ==== ==== JavaScript ====
Línea 382: Línea 403:
 <sxh css> <sxh css>
 .c-cuadrado--girar { .c-cuadrado--girar {
-  animation-name: c-cuadrado-girar;+  animation-name: animacion-girar;
   animation-duration: 1.5s;   animation-duration: 1.5s;
   animation-iteration-count: 2;   animation-iteration-count: 2;
Línea 389: Línea 410:
  
  
-@keyframes c-cuadrado-girar {+@keyframes animacion-girar {
   0% {   0% {
  transform: rotate(0deg);  transform: rotate(0deg);
Línea 396: Línea 417:
      
   100% {   100% {
- transform: rotate(365deg);+ transform: rotate(360deg);
  background-color: #1C4673;  background-color: #1C4673;
   }    } 
Línea 413: Línea 434:
  
 ==== Ejercicio 1 ==== ==== 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 ==== ==== 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. 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 ==== ==== 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 ==== ==== 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. 
 + 
  
  
  
  
clase/daw/diw/2eval/tema08.1610035828.txt.gz · Última modificación: 2021/01/07 17:10 por admin

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: GNU Free Documentation License 1.3
GNU Free Documentation License 1.3 Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki