Share
Hasta ahora, en esta serie, ha aprendido cómo animar las propiedades CSS de diferentes elementos, cómo crear diferentes animaciones relacionadas con SVG y cómo animar el contenido de texto de diferentes elementos en una página web. Hay una manera más en la que puede animar los elementos en una página web usando KUTE.js, y es cambiando los valores de diferentes atributos. Esto requiere que incluyas el complemento de atributos en tu proyecto..
En este tutorial, aprenderá cómo usar el complemento de atributos para animar el valor de diferentes tipos de atributos en KUTE.js. También analizaremos las diferentes funciones de aceleración que puede utilizar para controlar el ritmo de diferentes animaciones..
Los objetos en la vida real rara vez se mueven linealmente. Están acelerando o desacelerando. Incluso la aceleración y la desaceleración se producen en diferentes magnitudes. Hasta este punto, todas nuestras animaciones han progresado linealmente. Esto no se siente natural en absoluto. En esta sección, conocerá todas las funciones de aceleración que KUTE.js proporciona para controlar el ritmo de diferentes animaciones..
Las funciones de aceleración del núcleo en la biblioteca se incluyen en el motor del núcleo de forma inmediata. Digamos que quieres aplicar el Entrada cuadrática facilitando a una animación. Esto puede lograrse de dos formas:
easing: KUTE.Easing.easingQuadraticInOut // O easing: 'easingQuadraticInOut'
Cada una de las funciones de aceleración tiene una curva única que determina cómo se acelerarán los elementos durante la animación. UNA sinusoidal La curva implica una aceleración lineal. Tenga en cuenta que esto es diferente de la lineal función de aceleración. los lineal La función implica una velocidad lineal de animación, mientras que una curva sinusoidal implica una velocidad lineal de aceleración para la animación. En otras palabras, la velocidad de la animación aumentará o disminuirá linealmente. similar, cuadrático Implica la aceleración con una potencia de dos., cúbico implica un poder de tres, quartic implica un poder de cuatro, y quintico Implica un poder de cinco. Tambien hay circular y exponencial funciones de aceleración.
Puedes adjuntar En, Afuera, o En fuera a cualquiera de las funciones de aceleración. El valor En implica que la animación comenzará muy lentamente y seguirá acelerando hasta el final. El valor Afuera implica que la animación comenzará a la velocidad máxima y luego se desacelerará lentamente hasta que se detenga al final. El valor En fuera significa que la animación se acelerará al principio y disminuirá al final.
También puedes usar rebotar y elástico Funciones de aceleración en tus animaciones y anexos. En, Afuera, o En fuera a cualquiera de ellos. En la siguiente demostración, he aplicado todas estas funciones de aceleración en diferentes círculos para que pueda ver cómo afectan el ritmo de la animación..
Es posible que ninguna de las funciones de aceleración del núcleo proporcione el ritmo de animación que está buscando. En tales casos, puede incluir las funciones de Cubic Bezier en su proyecto desde la rama de experimentos y comenzar a usar esas funciones de aceleración..
De forma similar, KUTE.js también proporciona algunas funciones de aceleración basadas en la física importadas de la biblioteca Dynamics.js. Puede leer más acerca de todas estas funciones de aceleración y cómo usarlas correctamente en la página de funciones de simplificación de la biblioteca..
Los atributos en SVG pueden aceptar tanto números como cadenas como su valor. Las cadenas pueden ser valores de color o números sufijados con una unidad como px, em, o %. Los nombres de los atributos en sí también pueden consistir en dos palabras unidas por un guión. Teniendo en cuenta estas diferencias, KUTE.js nos proporciona diferentes métodos que se pueden usar para especificar los valores de diferentes atributos..
Accentsconagua
var tween = KUTE.to ('selector', attr: 'r': 100); var tween = KUTE.to ('selector', attr: 'r': '10% '); var tween = KUTE.to ('selector', attr: 'stroke-width': 10); var tween = KUTE.to ('selector', attr: strokeWidth: 10);Como puede ver, los valores con sufijo deben incluirse entre comillas. De forma similar, los atributos que contienen un guión en su nombre deben incluirse entre comillas o especificarse en el formato camelCase.
Muchos atributos aceptan valores sin unidades. Por ejemplo, el anchura del trazo De un camino podría ser sin unidad. Del mismo modo, no tiene que especificar una unidad para el r, cx, y cy Atributos de un elemento circular. Puede animar todos estos atributos de un valor a otro utilizando el complemento de atributos.
Ahora que sabe cómo usar diferentes funciones de aceleración, podrá animar diferentes atributos a diferentes ritmos. Aquí hay un ejemplo:
var radiusAnimation = KUTE.allTo ("circle", attr: r: 75, repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicIn'); var centerxAnimationA = KUTE.to ("# circle-a", attr: cx: 500, repeat: 1, yoyo: true, easing: 'easingCubicInOut',); var centerxAnimationB = KUTE.to ("# circle-b", attr: cx: 100, repeat: 1, yoyo: true, easing: 'easingCubicInOut'); var centeryAnimation = KUTE.allTo ("circle", attr: cy: 300, repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicOut');La primera interpolación anima el radio de ambos círculos a la vez usando el todos() Método que discutimos en el primer tutorial. Si se establece en cierto, la yoyó atributo reproduce la animación en la dirección inversa.
los cx El atributo de ambos círculos es animado individualmente. Sin embargo, ambos son activados por el mismo clic del botón. Finalmente, el cy atributo de ambos círculos está animado a la vez con una compensar de 1000 milisegundos.
A partir de la versión 1.5.7, el complemento de atributo en KUTE.js también le permite animar llenar, carrera, y stopColor atributos Puede utilizar nombres de color válidos o valores hexadecimales para los colores. También puede proporcionar los valores de color en formato RGB o HSL.
Una cosa importante que debe tener en cuenta es que las animaciones solo funcionarán si no está configurando el valor de estas propiedades en CSS. En la siguiente demostración, la llenar el color no se habría animado en absoluto si hubiera agregado el siguiente CSS en nuestra demostración.
rect relleno: marrón;
La demostración que creé es muy básica, pero puedes hacerla más interesante aplicando transformaciones y usando más colores..
Muchos atributos SVG como r y anchura del trazo Puede trabajar con y sin sufijos. Por ejemplo, puede establecer el valor de r para ser un número como 10 o en términos de unidades em como 10em. Hay algunos atributos como compensar atributo para paradas de color que siempre requieren que agregue un sufijo. Al especificar un valor para los atributos con sufijo en KUTE.js, siempre asegúrese de incluir el valor entre comillas.
En el siguiente ejemplo, he animado el valor de desplazamiento de la primera parada en un degradado y el color de la segunda parada. Ya que compensar requiere un sufijo, he incluido el valor entre comillas.
var offsetAnimation = KUTE.allTo (".stop1", attr: offset: '90% ', repeat: 1, offset: 1000, yoyo: true, easing:' easingCubicIn '); var colorAnimation = KUTE.allTo (".stop2", attr: stopColor: 'black', repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn'); var scaleAnimation = KUTE.allTo ("circle", svgTransform: scale: 2, repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn');Hay tres gradientes diferentes en la demostración, y cada uno de estos gradientes tiene dos paradas de color con los nombres de clase parada1 y stop2. También he aplicado una transformada de escala utilizando el svgTransform Atributo, que hemos comentado en el tercer tutorial de la serie..
En este tutorial, aprendió sobre las diferentes funciones de aceleración disponibles en KUTE.js y cómo puede usarlas para controlar el ritmo de sus propias animaciones. También aprendiste a animar diferentes tipos de atributos..
He tratado de cubrir todos los aspectos importantes de KUTE.js en esta serie. Esto debería ser suficiente para ayudarlo a usar KUTE.js con confianza en sus propios proyectos. También puede leer la documentación para aprender más sobre la biblioteca..
También recomendaría que revise el código fuente y vea cómo funciona realmente la biblioteca. Si tiene preguntas o sugerencias relacionadas con este tutorial, no dude en compartirlas en los comentarios..
