Share
El primer tutorial de la serie se centró en proporcionar una introducción fácil para principiantes a la biblioteca KUTE.js. En ese tutorial, solo animamos el opacidad y rotarZ Propiedad para nuestros elementos. En este tutorial, aprenderá cómo animar el resto de las propiedades CSS usando KUTE.js.
Algunas de estas propiedades requerirán que cargues el complemento CSS, mientras que otras pueden animarse usando el motor central. Ambos escenarios serán discutidos por separado en el tutorial..
El motor central KUTE.js puede animar solo las propiedades más comunes del modelo de caja: anchura, altura, parte superior, y izquierda. Tendrá que usar el complemento CSS para animar casi todas las demás propiedades del modelo de cuadro. Aquí hay un ejemplo que anima la posición superior, el ancho y la altura de nuestras cajas del tutorial anterior:
var animateTop = KUTE.allFromTo (theBoxes, top: 0, top: 100, offset: 100); var animateA = KUTE.fromTo (cajaA, altura: 100, altura: 175); var animateB = KUTE.fromTo (boxB, width: 100, width: 200);
Te habrás dado cuenta de que yo usaba allFromTo () Para animar la propiedad superior de todos los cuadros. Sin embargo, utilicé fromTo () Para animar cuadros individuales. Debe recordar que las cajas permanecen en su estado final una vez que se completa la animación..
Con la ayuda del complemento CSS, podrás animar margen, relleno, y ancho del borde también. Una vez que haya incluido el complemento en su proyecto, el resto del proceso es exactamente el mismo.
Puede animar casi todas las propiedades de transformación mencionadas en la especificación con la ayuda del propio motor central. No hay necesidad de cargar el complemento CSS en este caso.
Puedes animar la traducción de elementos en el espacio 2D usando traducir. Del mismo modo, puede utilizar traducirX, traducirY, y traducir Z Para animar los elementos a lo largo de los ejes respectivos. Para el traducir Z Para que la propiedad tenga algún efecto, también deberá establecer un valor para el parentPerspective propiedad. Aquí hay un ejemplo:
Accentsconagua
var animateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var animateA = KUTE.fromTo (boxA, translateZ: 0, translateZ: 50, parentPerspective: 100, parentPerspectiveOrigin: "0% 0%"); var animateB = KUTE.fromTo (boxB, translateX: 0, translateX: -200); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start ();, false);Si hace clic en el Iniciar animacion y observe atentamente la animación, verá que el cuadro rojo traduce primero -200 en la dirección X. Después de eso, se mueve a su posición original y comienza a traducir en la dirección Y. El motivo de la caja para animar. traducirX Primero es que hemos agregado un retraso para el traducirY animación utilizando el compensar propiedad.
Al igual que la traducción, también puede realizar rotaciones a lo largo de un eje específico utilizando la girar, rotarX, rotarY, y rotarZ propiedades Ya que rotarX y rotarY son rotaciones 3D, deberás usar el perspectiva Propiedad para que la animación de rotación funcione como se espera. El siguiente ejemplo muestra cómo usar el perspectiva La propiedad afecta la animación general de estas dos propiedades..
var animateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); var animateA = KUTE.fromTo (cuadroA, rotateY: 0, rotateY: 180, perspectiva: 100); var animateB = KUTE.fromTo (boxB, rotateY: 0, rotateY: -180); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start ();, false);En el ejemplo anterior, el cuadro A y el cuadro B comienzan su rotación a lo largo del eje Y al mismo tiempo, pero la animación resultante es muy diferente debido a que perspectiva propiedad. Es posible que haya notado que el cuadro naranja no está realizando la rotación alrededor de su centro que se le aplicó usando animateAll. Esto se debe a que todas las animaciones tienen una duración de 500 milisegundos por defecto, y estamos aplicando ambos animateAll y animateA en la caja naranja al mismo tiempo.
Ya que animateA se aplica despues animateAll, Su animación tiene prioridad sobre animateAll. Verás que la rotación común usando animateAll se sigue aplicando en el cuadro naranja una vez que aumenta la duración de la animación. En otras palabras, no puede animar diferentes propiedades de transformación utilizando varios objetos de interpolación al mismo tiempo. Todas las propiedades de transformación que desea animar deben especificarse dentro de un único objeto de interpolación. El siguiente ejemplo debería dejarlo claro:
// Esto no funcionará como se esperaba var translateAll = KUTE.allFromTo (theBoxes, translateY: 0, translateY: 100, offset: 1000); var rotateAll = KUTE.allFromTo (theBoxes, rotate: 0, rotate: 360, offset: 1000); startButton.addEventListener ("click", function () translateAll.start (); rotateAll.start ();, false); // Esto funcionará como se espera var rtAll = KUTE.allFromTo (theBoxes, translateY: 0, rotate: 0, translateY: 100, rotate: 360, offset: 1000); startButton.addEventListener ("click", function () rtAll.start ();, false);Como mencioné anteriormente, no todas las propiedades CSS se pueden animar usando solo el motor central KUTE.js. Debe usar un complemento CSS adicional para animar propiedades como relleno, margen, posición de fondo de las imágenes y otras propiedades relacionadas con el borde. Por lo tanto, antes de probar cualquiera de los ejemplos en esta sección, debe incluir el complemento en su proyecto..
Una vez que haya incluido el plugin, podrá animar el radio del borde propiedad usando fronteraRadio. También puedes animar todo el rincón. radio del borde valores individualmente utilizando borderTopLeftRadius, borderTopRightRadius, borderBottomLeftRadius, y borderBottomRightRadius. Aquí hay un ejemplo que muestra la animación en acción..
Si hace clic en el Iniciar animacion botón, notará que el borde superior izquierdo del radio para el cuadro rojo y amarillo está animado después de un retraso. Esto se debe a la compensar propiedad. 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:
var animateAll = KUTE.allFromTo (theBoxes, borderTopLeftRadius: '0%', borderTopLeftRadius: '100%', offset: 1000); var animateA = KUTE.fromTo (boxA, borderTopRightRadius: '0%', borderTopRightRadius: '100%'); var animateB = KUTE.fromTo (boxB, borderBottomLeftRadius: '0%', borderBottomLeftRadius: '100%'); var animateC = KUTE.fromTo (boxC, borderBottomRightRadius: '0%', borderBottomRightRadius: '100%'); startButton.addEventListener ("click", function () animateAll.start (); animateA.start (); animateB.start (); animateC.start ();, false);No hemos encadenado los objetos de interpolación, por lo que todas las animaciones comienzan de una vez esta vez. También puede animar el color de diferentes bordes de una manera similar usando color del borde, borderTopColor, borderLeftColor, borderBottomColor, y borderRightColor.
En este tutorial, aprendimos sobre las diferentes propiedades de CSS que se pueden animar con y sin el uso del complemento KUTE.js CSS. Si tiene alguna pregunta, por favor hágamelo saber en los comentarios..
El siguiente tutorial cubrirá diferentes animaciones que pueden crearse usando el complemento SVG de KUTE.js.
