logongas

Herramientas de usuario

Herramientas del sitio

Ocultar Menú
Traza: • 7. Despliegue básico en servidor • 07. Memoria RAM
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 [2022/01/23 18:39]
admin [8. Animaciones] 		clase:daw:diw:2eval:tema08 [2025/02/13 11:47] (actual)
admin [Animaciones]
Línea 30: Línea 30:
     * [[https://www.kirupa.com/html5/css3_animations_vs_transitions.htm|CSS3: Animations vs. Transitions]]     * [[https://www.kirupa.com/html5/css3_animations_vs_transitions.htm|CSS3: Animations vs. Transitions]]
     * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]]     * [[https://cssanimation.rocks/es/transition-vs-animation/|Transiciones vs. Animaciones]]
 +  * Animaciones que no aportan nada.
 +    * [[https://pitch.com/]]
  
  
Línea 149: Línea 151:
   * [[http://www.w3schools.com/css/css3_3dtransforms.asp|Transformaciones 3D]]   * [[http://www.w3schools.com/css/css3_3dtransforms.asp|Transformaciones 3D]]
   * [[https://developer.mozilla.org/es/docs/Web/CSS/transform|transform - CSS | MDN]]   * [[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>
 +.cuadrado--rotate-centro {
 +  transform: rotate(360deg);
 +  transform-origin: 50% 50%;
 +}
 +</sxh>
 +
 +  * Rotar respecto a la esquina superior izquierda:
 +
 +<sxh css>
 +.cuadrado--rotate-esquina-superior-izquierda {
 +  transform: rotate(360deg);
 +  transform-origin: 0 0;
 +}
 +</sxh>
 +
 +
 +  * Ejemplo completo con transiciones:
 +<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>
 +
 +    </style>
 +
 +    <style>
 +        .l-center {
 +            display: grid;
 +            place-items: center;
 +            width: 100%;
 +            height: 50vw;
 +        }
 +
 +        .c-cuadrado {
 +            border: 1px solid red;
 +            background: lightpink;
 +            width:200px;
 +            height: 200px;
 +            transition: transform 4s;
 +            transform-origin: 0 0;
 +        }
 +
 +        .c-cuadrado:hover {
 +            transform: rotate(360deg);
 +        }
 +
 +
 +    </style>
 +  </head>
 +
 +  <body>
 +        <div class="l-center" >
 +          <div class="c-cuadrado">Hola mundo</div>
 +        </div>
 +  </body>
 +</html>
 +</sxh>
 +
  
  
Línea 237: Línea 309:
   * 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)''     * ''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. Por ejemplo en ''hover'', lo correcto es hacer que no empiece la animación enseguida ya pasando rápido el curso 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:  Mas información de la timing-function en: 
Línea 340: Línea 412:
   * ''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 371: Línea 443:
   * [[https://developer.mozilla.org/es/docs/Web/CSS/animation-timing-function|animation-timing-function - CSS | MDN]]   * [[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://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp|CSS animation-timing-function Property]]
 +  * [[https://easings.net/|Easing Functions Cheat Sheet]]
  
  
Línea 395: Línea 468:
 Mas información: Mas información:
   * [[https://www.w3schools.com/jsref/met_win_settimeout.asp|Timeout]]   * [[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:2eval:campana.html |}}: Ejemplo de movimiento de la campana
 +  * {{ :clase:daw:diw:2eval: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 ===== ===== Animaciones simétricas =====
clase/daw/diw/2eval/tema08.1642959555.txt.gz · Última modificación: 2022/01/23 18:39 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