Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
01
10

Animaciones: movimientos naturales

Hace un tiempo creé un ejemplo de lo que se podría hacer con animaciones con simples puntos y ahora os quiero mostrar que con animation de CSS3 podemos crear movimientos bastante "naturales" con rotaciones, que sean fluidos (en el ejemplo se puede ver a lo que me refiero).
En este artículo daré por hecho que todos sabemos como funcionan las animaciones, y si no es así os invito a ver este manual de como hacerlas.

GIF animaco con la animación sobre movimientos naturales.
Pasar el ratón por encima.

Crear la fluidez

Tenemos varios ejemplos, el del Balancín, el de subir una escalera y el de la biela manivela, en los 3 jugamos con las rotaciones, pero en elementos que están por debajo del anterior.
Por ejemplo, en el balancín tenemos 3 barras, y una está dentro de otra, lo que significa que al girar la primera la siguiente también lo hará y que a su vez gira.
Puede ser un poco difícil de explicar y de entender, pero si nos fijamos en el primer ejemplo vemos este efecto, girando la barra azul y por otro lado las que estan dentro (más abajo con el código se ve claro como surge este efecto).

Como funciona

Como he contado antes tenemos que crear el efecto de fluidez, pero antes de esto tenemos que crear la estructura, que simplemente son tres etiquetas DIV, una dentro de la otra.

  1. <div>
  2. <div>
  3. <div>
  4. </div>
  5. </div>
  6. </div>

El balancín

La estructura del código HTML es la misma en los tres ejemplos, lo que varía son los @keyfreme.
El @keyfreme de la barra central hace un balanceo simple sin rotar y las 2 interiores tienen el mismo (simplemente una rotación que en cierto punto vuelve) y la diferencia de los recorridos de ellas está en que lo hacen en distinto tiempo.
Este es el @keyfreme de este ejemplo:

  1. /* Es el @keyfreme de la barra con el borde azul */
  2. @keyframes balanzin_principal {
  3. 0%{transform:rotate(60deg)}
  4. 50%{transform:rotate(-60deg)}
  5. 100%{transform:rotate(60deg)}
  6. }
  7. /* Es el @keyfreme de la barra con el borde azul */
  8. @keyframes balanzin_principal {
  9. 0%{transform:rotate(40deg)}
  10. 50%{transform:rotate(-600deg)}
  11. 100%{transform:rotate(40deg)}
  12. }

En el momento que establecemos el @keyfreme de la animación podemos probar la velocidad para que se ajuste a un movimiento más o menos realista.

Escalera y biela manivela

En estos dos ejemplos se diferencian del primero (balancín) en que la rotación empieza en el extremo de la etiqueta que lo contiene, y esto se hace con una propiedad que afecta a todas las transformaciones que se crean con transform llamada transform-origin, donde establecemos desde donde empieza a rotar.

  1. <!-- En el ejemplo de la escalera y de la biela manivela tomamos como origen la parte superior y el medio -->
  2. transform-origin:top;

Esta es una forma con la que podemos animar varias cosas con CSS3 (por ejemplo se podría recrear el movimiento de una serpiente o un árbol que lo mueve el viento) y podríamos crear cosas parecidas a las que se podían crear con flash, simplemente hay que saber sacar partido a lo que actualmente tenemos.



Comentarios

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Twitter

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: