Animación CSS3 - Creando un fan-out con efecto de rebote usando la curva Bezier
Sabía usted que transformaciones geométricas añadido a los elementos HTML con el transformarSe pueden animar propiedades CSS como escalar, sesgar y rotar? Se pueden animar usando el transición propiedad y @keyframes animaciones, pero lo que es aún más genial es que las transformaciones animadas se pueden tomar una muesca con la adición de un poco efecto rebote, utilizando la cúbico-bezier () función de tiempo.
En una palabra, cúbico-bezier () (en CSS) es un función de tiempo para las transiciones. Especifica la velocidad de la transición, y entre otras cosas, también se puede utilizar para Crear efecto rebote en animaciones..
En este post, primero vamos a crear una animación de transformación simple a la que luego nos Agrega un cúbico-bezier () función de tiempo. Al final de este tutorial, comprenderá cómo crear una animación que use Tanto un efecto abanico como un rebote.. Aquí está el resultado final (haga clic para ver el efecto).
La demo está inspirada en esta hermosa foto de Dribbble por Christopher Jones sobre un marcador de ubicación animado.
1. Creando las hojas.
La forma del marcador de ubicación se compone de cinco hojas (llamémoslas). Para crear el forma oval de una hoja, usemos el radio del borde Propiedad CSS. los radio del borde de una sola esquina es compuesto por dos radios, horizontal y vertical, como se muestra abajo.
los radio del borde La propiedad tiene muchas sintaxis diferentes. Usaremos uno más complicado para la forma del marcador:
radio-borde: htl htr hbr hbl / vtl vtr vbr vbl;
En esta sintaxis, los radios horizontales y verticales se agrupan; h Y v representan radios horizontales y verticales, y t, l, segundo Y r Representa las esquinas superior, izquierda, inferior y derecha. Por ejemplo, vbl representa el radio vertical de la esquina inferior izquierda.
Si das solo un valor Ya sea por el lado horizontal o vertical, ese valor será copiado a todos los otros radios horizontales o verticales por el navegador..
A crear una forma ovalada vertical, mantener el radio horizontal en 50% para todas las esquinas, y ajuste las verticales, hasta que se vea la forma deseada. los lado horizontal utilizará un solo valor: 50%.
los radios verticales de las esquinas superior izquierda y superior derecha serán 30%, mientras que las esquinas inferior izquierda e inferior derecha usarán la 70% valor.
HTML
CSS
.pinStarLeaf ancho: 60px; altura: 120px; radio del borde: 50% / 30% 30% 70% 70%; color de fondo: # B8F0F5;
2. Multiplicando las hojas.
Como el marcador se desplegará mostrando cinco hojas, creamos Cuatro copias más de la hoja. En diferentes colores, y con posicionamiento absoluto para poder apilarlos unos sobre otros..
HTML
CSS
#pinStarWrapper width: 300px; altura: 300px; posición: relativa; .pinStarLeaf width: 60px; altura: 120px; posición: absoluta; radio del borde: 50% / 30% 30% 70% 70%; izquierda: 0; derecha: 0; arriba: 0; abajo: 0; margen: auto; opacidad: .5; .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5; .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC; .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0; .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1; .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;
3. Capturando evento click y mejorando la estética
Vamos a añadir una casilla de verificación con el #pinStarCenterChkBox Identificador para capturar el evento clic. Cuando se marca la casilla de verificación, las hojas se expandirán (girarán). También necesitamos agregar un circulo blanco con el #pinStarCenter Identificador de la estética. Se colocará en la parte superior del marcador y será la pieza central del marcador de ubicación..
HTML
Colocamos la casilla de verificación antes, y luego el círculo blanco, las hojas:
CSS
Primero, establecemos los estilos básicos para la casilla de verificación y el círculo de cobertura:
#pinStarCenter, #pinStarCenterChkBox width: 45px; altura: 50px; posición: absoluta; izquierda: 0; derecha: 0; superior: -60px; abajo: 0; margen: auto; color de fondo: #fff; radio del borde: 50%; cursor: puntero; #pinStarCenter, .pinStarLeaf pointer-events: none; #pinStarCenter> input [type = "checkbox"] width: 100%; altura: 100%; cursor: puntero;
Como cada hoja girará a lo largo del eje z en diferentes angulos, necesitamos establecer el transformar: rotatez (); propiedad en consecuencia, a crear una forma de estrella. También aplicamos el transición propiedad para el efecto de rotación (más precisamente usamos el transición: transformar 1s lineal regla para las hojas).
#pinStarCenterChkBox: revisado ~ .pinStarLeaf transición: transformar 1s lineal; #pinStarCenterChkBox: marcado ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg); #pinStarCenterChkBox: revisado ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg); #pinStarCenterChkBox: marcado ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg); #pinStarCenterChkBox: revisado ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg); #pinStarCenterChkBox: marcado ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);
Si echa un vistazo al CSS anterior, puede ver en la presencia de #pinStarCenterChkBox: marcado ~ Selector general de hermanos que solo añadimos el transición y transformar propiedades cuando la casilla está marcada (cuando el usuario hizo clic en el marcador).
4. Modificar el centro de la rotación.
Por defecto, el centro de rotación está posicionado. en el centro del elemento girado, En nuestro caso, en el centro de las hojas. Necesitamos mover el centro de la transformación al extremo interno de las hojas. Podemos hacer esto usando el origen transformado Propiedad CSS que Cambia la posición de los elementos transformados..
Para que el efecto de rotación funcione correctamente, agreguemos las dos reglas siguientes a la .pinStarLeaf Selector en nuestro archivo CSS:
.pinStarLeaf origen de la transformación: 30px 30px; transición: transformar 1s lineal;
Veamos nuestra animación de fan out en acción, en este punto, sin el efecto de rebote todavía. Haz clic en el círculo blanco, encima del marcador..
Entendiendo cómo funciona ubic-Bezier ()
Ahora, para agregar el efecto de rebote, necesitamos reemplazar el lineal función de tiempo con cúbico-bezier () en el transición Declaraciones en nuestro archivo CSS..
Pero primero, entendamos la lógica detrás de la cúbico-bezier () función de tiempo Para que puedas entender el efecto de rebote..
La sintaxis de la cúbico-bezier () la función es la siguiente, re y t son distancia y hora, y sus valores suelen oscilar entre 0 y 1:
bezier cúbico (t1, d1, t2, d2)
A pesar de explicar CSS cúbico-bezier () en términos de distancia y tiempo no es preciso, es mucho más fácil de entender de esta manera.
Asume que hay una caja que se mueve del punto A al punto B en 6 segundos Usemos lo siguiente cúbico-bezier () función de tiempo para la transición con el t1 = 0 y d1 = 1 valores.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / cubic-bezier (0,1,0,0)
En casi ningún momento, la caja se mueve de A a punto medio y toma el resto del tiempo para llegar a B.
Probemos la misma transición con valores. t1 = 1 y d1 = 0.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / cubic-bezier (1,0,0,0)
Durante los primeros tres segundos, la caja no se mueve mucho, y luego casi salta al punto medio, y comienza a moverse constantemente hacia B.
Como puedes ver, d1 controla el distancia entre A Y el punto medio, y t1 la tiempo que tarda en llegar al punto medio desde A.
Vamos a usar d2 y t2 ahora. Ambos t1 y d1 será 1, y t2 = 1 y d2 = 0.
/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / cubic-bezier (1,1,0,1)
La caja se mueve casi a la mitad en 3 segundos (debido a t1 = 1, d1 = 1), y en ningún momento salta al punto B.
El último ejemplo intercambia los valores anteriores de t2 y d2:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / cubic-bezier (1,1,1,0)
La caja se mueve casi a la mitad en 3 segundos (debido a t1 = 1, d1 = 1), luego durante 3 segundos más no se mueve mucho antes de saltar al punto B.
Estos ejemplos muestran que d2 y t2 controla la distancia y el tiempo que toma la caja para ir desde el punto medio al punto B.
Aunque probablemente no necesitó esta explicación larga (aunque escasa) de cúbico-bezier () en este punto, creo que te ayudará a entender mejor esta función. Ahora, ¿de dónde viene el rebote en todo esto??
5. Agregando el efecto de rebote con Cubic-Bezier ()
los parámetros clave Para el efecto rebote son las distancias., d1 y d2. UNA d1 valor de menos que 1 toma la caja detras del punto A Antes de proceder hacia B al inicio de la animación..
UNA d2 valor de más de 1 toma la caja más allá del punto B Antes de volver a descansar en B al final de la animación. De ahí el efecto rebote de ida y vuelta..
Ahora voy a añadir el cúbico-bezier () Valores directamente a nuestra demo en lugar de la anterior. lineal valor de la transición propiedad, y le permite ver los resultados.
#pinStarCenterChkBox: marcado ~ .pinStarLeaf transición: transformar 1s cubic-bezier (.8, -. 5, .2,1.4);
Aquí está el resultado final, una animación desplegable solo para CSS con un efecto de rebote:
Para comparar y comprender mejor el efecto de rebote, aquí es cómo el cúbico-bezier () El valor de la animación se comporta cuando se aplica a nuestro cuadro de ejemplo:
