logongas

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 5. CSS: Animaciones ======
En este tema vamos a hablar de 3 cosas distintas:
  * Transformaciones: Es simplemente aplicar alguna transformación espacial a un elemento HTML como moverlo ,rotarlo o agrandarlo. 
  * Transiciones: Es un API de CSS para hacer que las cosas se //muevan// en la pantalla.
  * Animaciones: Es otro API CSS mas complejo hacer que las cosas se //muevan// en la pantalla.


<note tip>
A veces nos referiremos a **animaciones** con el significado de hacer que las cosas se //muevan// en la pantalla y no al API de animaciones de CSS. Aunque realmente las animaciones no es solo que las cosas se muevan , se puede aplicar a muchas propiedades CSS como colores, opacidad, etc.
</note>


¿Que podemos hacer con animaciones? Veamos algunos ejemplos de animaciones usando solo CSS:
  * [[https://codepen.io/YusukeNakaya/full/YLPVER|404]]
  * [[https://codepen.io/Wujek_Greg/pen/KRXYpg|Reloj]]
  * [[https://codepen.io/YusukeNakaya/pen/rJxevm|Escaleras]]
  * [[https://codepen.io/miocene/pen/WJRXVg|Cuadros animados]]
  * [[https://codepen.io/miocene/pen/NWRWQpX|Monument Valley]]


Lo mas importante de las animaciones es usarlas cuando tengan sentido y no solo como una moda o capricho. Es decir hay que usarlas cuando aportan algo al usuario. Un artículo que lo explica muy bien es el siguiente: [[https://css-tricks.com/ground-rules-for-web-animations/|Ground Rules for Web Animations]].


Mas información:
  * Diseño
    * [[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://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]]
  * Animaciones que no aportan nada.
    * [[https://pitch.com/]]
    * [[https://iaeducativa.org/iaeducativa-day/|IAEducativa Day]]


===== Transformaciones =====
Las transformaciones es simplemente usar una nueva propiedad de CSS llamada ''transform''.

<note tip>
Esta propiedad es como cualquier otra de CSS y no tiene nada que ver con las animaciones , aunque se suele usar bastante con ellas, por eso se explica aquí.
</note>


Esta propiedad CSS permite hacer lo siguiente sobre un elemento:
  * Moverlo
  * Escalarlo (Hacerlo mas grande o mas pequeño)
  * Rotarlo
  * Distorsionarlo: Es como torcer el elemento tanto en el eje X como en el eje Y.

El listado de opciones es el siguiente:
  * translate(x,y)
  * translateX(n)
  * translateY(n)
  * scale(x,y)
  * scaleX(n)
  * scaleY(n)
  * rotate(angle)
  * skew(x-angle,y-angle)
  * skewX(angle)
  * skewY(angle)



\\
\\

Vamos ahora unos ejemplos:


  * Mover el elemento 50px en el eje X y 100px en el eje Y
<sxh css>
div {
  transform: translate(50px, 100px);
}
</sxh>

\\
\\

  * Rotar el elemento 20 grados
<sxh css>
div {
  transform: rotate(20deg);
}
</sxh>

\\
\\

  * Hacer el doble de grande el elemento en el eje X y el triple en el eje Y.
<sxh css>
div {
  transform: scale(2, 3);
}
</sxh>

\\
\\

  * Hacer la mitad de grande el elemento tanto eje X como en el eje Y.
<sxh css>
div {
  transform: scale(0.5, 0.5);
}
</sxh>

\\
\\

  * Distorsiona el elemento 20 grados en el eje X y 10 grados en el eje Y.
<sxh css>
div {
  transform: skew(20deg, 10deg);
}
</sxh>

\\
\\
  * Tambien se pueden aplicar varias transformaciones a la vez:
<sxh css>
div {
  transform: translate(50px, 100px) rotate(20deg);
}
</sxh>

\\
\\



Las transformaciones que hemos visto son en 2 dimensiones. CSS también permite transformaciones en 3D.

El listado de opciones es el siguiente:
  * translate3d(x,y,z)
  * translateX(x)
  * translateY(y)
  * translateZ(z)
  * scale3d(x,y,z)
  * scaleX(x)
  * scaleY(y)
  * scaleZ(z)
  * rotate3d(x,y,z,angle)
  * rotateX(angle)
  * rotateY(angle)
  * rotateZ(angle)
  * perspective(n)

Mas información:
  * [[https://www.w3schools.com/css/css3_2dtransforms.asp|Transformaciones 2D]]
  * [[https://www.w3schools.com/css/css3_3dtransforms.asp|Transformaciones 3D]]
  * [[https://developer.mozilla.org/es/docs/Web/CSS/transform|transform - CSS | MDN]]

==== Origen de la transformación ====
Existe la propiedad ''transform-origin'' que permite especificar el punto desde el que se ejecuta la transformación. Por defecto es el centro del elemento. 

Esto es muy útil por ejemplo para rotaciones para que no rote respecto al centro de la imagen. 

  * Rotar respecto al centro de la imagen (por defecto):

<sxh css>
.rotar-centro {
  transform: rotate(360deg);
  transform-origin: 50% 50%;
}
</sxh>

  * Rotar respecto a la esquina superior izquierda:

<sxh css>
.rotar-esquina-superior-izquierda {
  transform: rotate(360deg);
  transform-origin: 0 0;
}
</sxh>


  * Ejemplo completo (usa ''transition'', que se ve en el apartado siguiente):
<sxh html>
<!DOCTYPE html>
<html>
  <head>
    <title>transform-origin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        .centrado {
            display: grid;
            place-items: center;
            width: 100%;
            height: 50vw;
        }

        .cuadrado {
            border: 1px solid red;
            background: lightpink;
            width:200px;
            height: 200px;
            transition: transform 4s;
            transform-origin: 0 0;
        }

        .cuadrado:hover {
            transform: rotate(360deg);
        }


    </style>
  </head>

  <body>
        <div class="centrado" >
          <div class="cuadrado">Hola mundo</div>
        </div>
  </body>
</html>
</sxh>



===== Transiciones =====
Las transiciones se usan sobre todo para hacer cambios en los eventos de :
  * '':hover''
  * '':focus''
  * Etc.

Mas información:
  * [[https://cybmeta.com/animaciones-basicas-con-css-transition|Animaciones básicas con CSS transition]]
  * [[https://www.w3schools.com/css/css3_transitions.asp|CSS3 Transitions]]

Veamos un ejemplo con '':hover'' y después le vamos a añadir la transición para mejorarlo visualmente.

<sxh html>
<!DOCTYPE html>
<html>
    <head>
      <style>
        .boton {
          padding: 10px 20px 10px 20px;
          background-color: #ffffff;
          border: 1px solid #bbd4f7;
          border-radius: 4px;
          cursor: pointer;
        }
        
        .boton:hover {
          background-color: #deebfc;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
      </style>
    </head>
    <body>
      <button class="boton">Aceptar</button>
    </body>
</html>
</sxh>

En el ejemplo que acabo de poner, al pasar el cursor sobre el botón se añade una sombra y cambia el color de fondo. 

Sin embargo el efecto queda mal ya que es muy brusco pasar de:
  * ''background-color: #ffffff;'' => ''background-color: #deebfc;''
  * ''box-shadow: none;'' => ''box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);''

Para evitar esto, usamos en CSS la transición de la siguiente forma:
<sxh css>
  transition: background-color 1s, box-shadow 1s;
</sxh>

Con la línea anterior se hace que el cambio del color y añadir la sombra se haga con un transición que durará 1 segundo. Ahora el ejemplo quedaría así:

<sxh html>
<!DOCTYPE html>
<html>
    <head>
      <style>
        .boton {
          padding: 10px 20px 10px 20px;
          background-color: #ffffff;
          border: 1px solid #bbd4f7;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 1s, box-shadow 1s;
        }
        
        .boton:hover {
          background-color: #deebfc;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }
      </style>
    </head>
    <body>
      <button class="boton">Aceptar</button>
    </body>
</html>
</sxh>

Podemos aplicar las transiciones a cualquier propiedad CSS que tenga un rango de valores, como al color, a la sombra o, como podíais imaginar, a las transformaciones.

Por lo tanto , siempre que usemos '':hover'' , '':focus'' , etc, lo normal es añadir una ''transition:'' con las propiedades que hemos incluido en el '':hover'' , '':focus'', etc.

La forma concreta de la propiedad ''transition'' es:
  transition: propiedadCSS duracion timing-function retardo

  * 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:
    * ''linear'': Velocidad constante. $e=v \cdot t$
    * ''ease''
    * ''ease-in'': Aceleración constante. $e=\frac{1}{2} \cdot a \cdot t^{2}$
    * ''ease-out''
    * ''ease-in-out''
    * ''steps(pasos)''
    * ''cubic-bezier(n,n,n,n)''
  * retardo: Cuanto tiempo en segundos tarda en empezar la transición. Por ejemplo en ''hover'', lo correcto es hacer que no empiece la animación enseguida, ya que, pasando rápido el cursor, se empieza a hacer y queda feo si no nos detenemos. Por eso hay que poner un retardo de al menos 0.3s

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:
<sxh css>
  transition: width 3s ease-in-out 2s
</sxh>
Se cambiará el ancho . Durará 3 segundos. Empezará y terminará mas lentamente . Empezará con 2 segundos de retardo.

Como pasa mucho en las propiedades CSS se puede poner también como varias propiedades independientes:
<sxh css>
  transition-property:width;
  transition-duration:3s;
  transition-timing-function:ease-in-out;
  transition-delay:2s;
</sxh>




===== Animaciones =====
Las animaciones son similares a las transiciones pero mas potentes además que suelen usarse desde JavaScript.

Mas información:
  * [[https://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. 
  * La definición de la propia animación con ''@keyframes''.
  * Los parámetros de la animación con la propiedad ''animation''

Veamos un ejemplo:

<sxh html>
<!DOCTYPE html>
<html>
    <head>
        <style>
            .cuadrado {
              width: 100px;
              height: 100px;
              background-color: #bbd4f7;
              border-radius: 4px;
            }
            
            .girar {
              animation-name: animacion-girar;
              animation-duration: 3s;
            }
            
            
            @keyframes animacion-girar {
              0% {
                transform: rotate(0deg);
                background-color: #bbd4f7;
              }
              
              50% {
                transform: rotate(360deg);
                background-color: #1C4673;
              }
              
              100% {
                transform: rotate(0deg);
                background-color: #bbd4f7;
              }  
              
            }
        </style>
    </head>
    <body>
        <div style="padding:200px">
            <div id="cuadrado1" class="cuadrado girar">Hola</div>
        </div>
    </body>
</html>
</sxh>

Dentro de ''@keyframes'' definimos cada uno de los "fotogramas" que queremos que tenga la animación.

Luego dentro de la clase ''girar'' indicamos que animación aplicar y sus parámetros. Las propiedades que hay son:
  * ''animation-name'': Nombre de la animación a realizar. Es el nombre del ''@keyframes''.
  * ''animation-duration'': Duración en segundos.
  * ''animation-timing-function'': La velocidad
    * ''linear'': Velocidad constante. $e=v \cdot t$
    * ''ease''
    * ''ease-in'': Aceleración constante $e=\frac{1}{2} \cdot a \cdot t^{2}$
    * ''ease-out''
    * ''ease-in-out''
    * ''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]]
  * ''animation-delay'': Retraso en segundos en empezar la animación
  * ''animation-iteration-count'': Nº de repeticiones de la animación. Se puede usar ''infinite'' para que nunca acabe.
  * ''animation-direction'': Si va desde el principio al final o al revés, etc.
    * ''normal'': Empieza en el 0% y avanza hacía el 100%
    * ''reverse'': Empieza en el 100% y avanza hacía el 0%
    * ''alternate'': Empieza en el 0% y avanza hacía el 100% y la 2º  vez lo hace del 100% al 0% 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.
    * ''none'': La animación antes de empezar o despues de acabar no tiene ningún estilo definido en la animación.
    * ''forwards'': Al acabar la animación se queda como en el último Frame.
    * ''backwards'': Antes de empezar la animación (por si hay un delay),  ya está  como en el primer Frame.
    * ''both'': Es unir ''forwards'' y ''backwards''.
  * ''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]]
  * [[https://easings.net/|Easing Functions Cheat Sheet]]


==== JavaScript ====
Para volver a ejecutar la animación desde JavaScript se hace de la siguiente forma:

<sxh javascript>
function animar() {
	var cuadradoElement=document.getElementById("cuadrado1");
	cuadradoElement.classList.remove("girar");
	setTimeout(function() {
		cuadradoElement.classList.add("girar");
	},10);
}
</sxh>

<sxh html>
<button onclick="animar()">Animar</button>
</sxh>

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]]

=== Movimiento de una campana ===
En este apartado podéis ver el movimiento real que haría una camapana. Para hacer el movimiento real se han usado las fórmulas físicas que describen el movimiento de dicha campana.
Está con rozamiento y sin él.

  * {{ :clase:daw:diw:campana.html |}}: Ejemplo de movimiento de la campana
  * {{ :clase:daw:diw:calculos_movimiento_campana.xlsx |}}: Excel con el cálculo de los movimiento siguiendo la fórmula física


//El ejemplo es gracias a Àngela Hermosilla, licenciada en físicas y estudiantes de este ciclo de DAW//.

===== 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.

Eso se consigue de la siguiente forma:

<sxh css>
.girar {
  animation-name: animacion-girar;
  animation-duration: 1.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}


@keyframes animacion-girar {
  0% {
	transform: rotate(0deg);
	background-color: #bbd4f7;
  }
  
  100% {
	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 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 cursor 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 cursor vuelva a su tamaño original.
  * Que dure 3 segundos.

==== Ejercicio 3 ====
Crea una página web en la que, al pulsar un botón, el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos. El botón le añade al texto una clase CSS desde JavaScript.

==== Ejercicio 4 ====
Crea una página web:
  * Que el fondo sea gris claro.
  * Muestre un ''input'' de tipo ''text'' de fondo blanco, bordes sin redondear.
  * Que al pulsar en él para escribir (cuando tiene el foco, '':focus''), se hagan los bordes redondeados, el color de fondo sea un azul muy clarito y se añada una sombra suave de color azul.
  * Que al salir de él, el ''input'' vuelva a su estilo original.
  * Que dure 1 segundo.

==== Ejercicio 5 ====
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 pelota 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 6 ====
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 7 ====
Crea una página web:
  * En el fondo se verá una foto del espacio y de la Estación Espacial Internacional (ISS).
  * Que sobre algún lado de la ISS coloques la imagen de un astronauta.
  * Que al pulsar un botón se active una animación que mueva 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 8 ====
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 mueva 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 9 ====
Repite el ejercicio anterior pero ahora el coche irá frenando cuando llegue al final de la carretera.


==== Ejercicio 10 ====
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.