Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
El primer tutorial de la serie se centró en proporcionar una introducción para principiantes a la librería KUTE.js. En ese tutorial, solo animamos nuestros elementos usando la propiedad opacity y rotateZ. En este tutorial, aprenderás a animar el resto de las propiedades CSS usando KUTE.js.
Algunas de estas propiedades requerirán que cargues el plugin CSS, mientras que otras se pueden animar usando el propio motor principal. Ambos escenarios se tratarán por separado en este tutorial.
Propiedades del modelo de caja
El motor principal KUTE.js solo puede animar las propiedades más comunes del modelo de caja: width, height, top, y left. Tendrás que usar el plugin CSS para animar casi todas las demás propiedades del modelo de caja. En este ejemplo se anima la posición superior, la anchura y la altura de los cuadrados del tutorial anterior:
1 |
var animateTop = KUTE.allFromTo( |
2 |
theBoxes, |
3 |
{ top: 0 }, |
4 |
{ top: 100 }, |
5 |
{ offset: 100 } |
6 |
);
|
7 |
|
8 |
var animateA = KUTE.fromTo( |
9 |
boxA, |
10 |
{ height: 100 }, |
11 |
{ height: 175 } |
12 |
);
|
13 |
|
14 |
var animateB = KUTE.fromTo( |
15 |
boxB, |
16 |
{ width: 100 }, |
17 |
{ width: 200 } |
18 |
);
|
Es posible que hayas observado que utilicé allFromTo() para animar la propiedad superior de todos los cuadrados. Sin embargo, utilicé fromTo() para animar los cuadrados individuales. Debes recordar que los cuadrados permanecen en su estado final una vez que completada la animación.
Con la ayuda del plugin CSS, serás capaz de animar también margin, padding, y borderWidth. Una vez hayas incluido el plugin en tu proyecto, el resto del proceso será exactamente el mismo.
Animación de propiedades de transformación
Puedes animar casi todas las propiedades de transformación mencionadas en la especificación con la ayuda del propio motor principal. En este caso no hay necesidad de cargar el plugin CSS.
Puedes animar la traslación de elementos en el espacio 2D mediante translate. Del mismo modo, puedes utilizar translateX, translateY y translateZ para animar los elementos a lo largo de los respectivos ejes. Para que la propiedad translateZ tenga algún efecto, también tendrás que establecer un valor para la propiedad parentPerspective. Aquí tienes un ejemplo:
1 |
var animateAll = KUTE.allFromTo( |
2 |
theBoxes, |
3 |
{ translateY: 0 }, |
4 |
{ translateY: 100 }, |
5 |
{ offset: 1000 } |
6 |
);
|
7 |
|
8 |
var animateA = KUTE.fromTo( |
9 |
boxA, |
10 |
{ translateZ: 0 }, |
11 |
{ translateZ: 50 }, |
12 |
{ parentPerspective: 100, parentPerspectiveOrigin: "0% 0%" } |
13 |
);
|
14 |
|
15 |
var animateB = KUTE.fromTo( |
16 |
boxB, |
17 |
{ translateX: 0 }, |
18 |
{ translateX: -200 } |
19 |
);
|
20 |
|
21 |
startButton.addEventListener( |
22 |
"click", |
23 |
function() { |
24 |
animateAll.start(); |
25 |
animateA.start(); |
26 |
animateB.start(); |
27 |
},
|
28 |
false
|
29 |
);
|
Si haces clic en el botón Start Animation y observas la animación de cerca, verás que el cuadrado rojo se traslada primero -200 en la horientación X. Después de eso, se mueve a su posición original y comienza a trasladarse en la dirección Y. La razón de que el cuadrado se anime primero translateX es que hemos añadido un retraso para la animación translateY mediante la propiedad offset.
Al igual que la traslación, también puedes realizar rotaciones a lo largo de un eje concreto utilizando las propiedades rotar, rotarX, rotarY y rotarZ. Dado que rotateX y rotateY son rotaciones 3D, tendrás que usar la propiedad perspective para que la animación de rotación funcione según lo esperado. En el siguiente ejemplo se muestra cómo el uso de la propiedad perspective afecta a la animación general de estas dos propiedades.
1 |
var animateAll = KUTE.allFromTo( |
2 |
theBoxes, |
3 |
{ rotate: 0 }, |
4 |
{ rotate: 360 }, |
5 |
{ offset: 1000 } |
6 |
);
|
7 |
|
8 |
var animateA = KUTE.fromTo( |
9 |
boxA, |
10 |
{ rotateY: 0 }, |
11 |
{ rotateY: 180 }, |
12 |
{ perspective: 100 } |
13 |
);
|
14 |
|
15 |
var animateB = KUTE.fromTo( |
16 |
boxB, |
17 |
{ rotateY: 0 }, |
18 |
{ rotateY: -180 } |
19 |
);
|
20 |
|
21 |
startButton.addEventListener( |
22 |
"click", |
23 |
function() { |
24 |
animateAll.start(); |
25 |
animateA.start(); |
26 |
animateB.start(); |
27 |
},
|
28 |
false
|
29 |
);
|
En el ejemplo anterior, el cuadrado A y el cuadrado B comienzan su rotación a lo largo del eje Y al mismo tiempo, pero la animación resultante es muy diferente debido a la propiedad perspective. Es posible que hayas notado que el cuadrado naranja no está realizando la rotación alrededor de su centro que le fue aplicada mediante animateAll. Esto se debe a que todas las animaciones tienen una duración de 500 milisegundos de forma predeterminada, y estamos aplicando animateAll y animateA en el cuadrado naranja al mismo tiempo.
Como animateA se aplica después de animateAll, su animación tiene prioridad sobre animateAll. Verás que la rotación común mediante animateAll todavía se aplica en el cuadrado naranja una vez aumentes la duración de la animación. En otras palabras, no puedes animar diferentes propiedades de transformación mediante varios objetos de inserción al mismo tiempo. Todas las propiedades de transformación que desees animar deben especificarse dentro de un único objeto de inserción. El siguiente ejemplo lo debería dejar claro:
1 |
// This will not work as expected
|
2 |
var translateAll = KUTE.allFromTo( |
3 |
theBoxes, |
4 |
{ translateY: 0 }, |
5 |
{ translateY: 100 }, |
6 |
{ offset: 1000 } |
7 |
);
|
8 |
|
9 |
var rotateAll = KUTE.allFromTo( |
10 |
theBoxes, |
11 |
{ rotate: 0 }, |
12 |
{ rotate: 360 }, |
13 |
{ offset: 1000 } |
14 |
);
|
15 |
|
16 |
startButton.addEventListener( |
17 |
"click", |
18 |
function() { |
19 |
translateAll.start(); |
20 |
rotateAll.start(); |
21 |
},
|
22 |
false
|
23 |
);
|
24 |
|
25 |
// This will work as expected
|
26 |
var rtAll = KUTE.allFromTo( |
27 |
theBoxes, |
28 |
{ translateY: 0, rotate: 0 }, |
29 |
{ translateY: 100, rotate: 360 }, |
30 |
{ offset: 1000 } |
31 |
);
|
32 |
|
33 |
startButton.addEventListener( |
34 |
"click", |
35 |
function() { |
36 |
rtAll.start(); |
37 |
},
|
38 |
false
|
39 |
);
|
Uso del plugin CSS
Como mencioné anteriormente, no todas las propiedades CSS se pueden animar usando únicamente el motor kuTE.js principal. Debes usar un complemento CSS extra para animar propiedades como el relleno, el margen, la posición de fondo de imágenes y otras propiedades relacionadas con el borde. Por lo tanto, antes de probar cualquiera de los ejemplos de esta sección, debes incluir el complemento en tu proyecto.
1 |
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js"></script> |
Una vez hayas incluido el complemento, podrás animar la propiedad border-radius usando borderRadius. También puedes animar todos los valores de border-radius individualmente mediante borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius y borderBottomRightRadius. En este ejemplo se muestra la animación en acción.
Si haces clic en el botón Start animation, observarás que el radio de borde superior izquierdo de los cuadrados rojo y amarillo se animan después de un retraso. Esto se debe a la propiedad offset. El resto de los radios se animan tan pronto como hacemos clic en el botón. El ejemplo anterior fue creado usando el siguiente código:
1 |
var animateAll = KUTE.allFromTo( |
2 |
theBoxes, |
3 |
{ borderTopLeftRadius:'0%' }, |
4 |
{ borderTopLeftRadius:'100%' }, |
5 |
{ offset: 1000 } |
6 |
);
|
7 |
|
8 |
var animateA = KUTE.fromTo( |
9 |
boxA, |
10 |
{ borderTopRightRadius:'0%' }, |
11 |
{ borderTopRightRadius:'100%' } |
12 |
);
|
13 |
|
14 |
var animateB = KUTE.fromTo( |
15 |
boxB, |
16 |
{ borderBottomLeftRadius:'0%' }, |
17 |
{ borderBottomLeftRadius:'100%' } |
18 |
);
|
19 |
|
20 |
var animateC = KUTE.fromTo( |
21 |
boxC, |
22 |
{ borderBottomRightRadius:'0%' }, |
23 |
{ borderBottomRightRadius:'100%' } |
24 |
);
|
25 |
|
26 |
startButton.addEventListener( |
27 |
"click", |
28 |
function() { |
29 |
animateAll.start(); |
30 |
animateA.start(); |
31 |
animateB.start(); |
32 |
animateC.start(); |
33 |
},
|
34 |
false
|
35 |
);
|
No hemos encadenado los objetos de la interpolación, por lo que esta vez todas las animaciones comienzan al mismo tiempo. También puedes animar el color de distintos bordes de una manera similar mediante borderColor, borderTopColor, borderLeftColor, borderBottomColor y borderRightColor.
Reflexiones finales
En este tutorial, aprendimos sobre diferentes propiedades CSS que se pueden animar con y sin el uso del plugin CSS KUTE.js. Si tienes alguna pregunta, por favor comunícamela a través de un comentario.
El siguiente tutorial cubrirá diferentes animaciones que se pueden crear usando el plugin KUTE.js SVG.
By
