Consejos para escribir código de animación de manera eficiente

Índice

° 1: utiliza una biblioteca de animaciones
° 2: utiliza líneas de tiempo
Consejo #3: Utilice valores relativos
° 4: utiliza fotogramas clave
° 5: utilizar valores predeterminados inteligentes
Consejo #6: anima varios elementos a la vez
Consejo #7: Utilice valores, escalanes y/o bucles basados en funciones
Consejo #8: Modulariza tus animaciones
Consejo #9: Utilice métodos de control
Consejo adicional: utilice los complementos, los métodos de utilidad y las funciones auxiliares de GSAP
Conclusión

Llevo años codificando animaciones web y ayudando a otros a hacer lo mismo. Sin embargo, todavía tengo que ver una lista concisa de consejos centrados en cómo crear animaciones de manera eficiente, así que ¡aquí la tienes!

Usaré la plataforma de animación GreenSock (GSAP). Proporciona una API simple y legible y resuelve inconsistencias entre navegadores para que puedas concentrarte en la animación. El código y los conceptos deben ser comprensibles incluso si nunca se ha usado GSAP. Si primero desea familiarizarse con los conceptos básicos de GSAP para poder aprovechar al máximo este artículo, el mejor lugar para comenzar es la página de introducción de GSAP (incluye un video).

° 1: utiliza una biblioteca de animaciones

Algunos desarrolladores piensan que usar una biblioteca de animación es un desperdicio porque pueden usar tecnologías nativas del navegador como transiciones CSS, animaciones CSS o la API de animaciones web (WAAPI) para lograr lo mismo sin cargar una biblioteca. En algunos casos, eso es cierto. Sin embargo, aquí hay algunos otros factores a considerar:

Errores, inconsistencias y compatibilidad del navegador: una biblioteca de animaciones, como GSAP, los resuelve por usted y es universalmente compatible. ¡Incluso puedes usar rutas de movimiento en IE9! Hay muchas áreas problemáticas cuando se trata de problemas entre navegadores, incluido el manejo transform-originde elementos SVG, mediciones de recorrido de ruta, orígenes 3D en Safari y muchos más que no tenemos espacio para enumerar.
Flujo de trabajo de animación: crear incluso animaciones moderadamente complejas es mucho más rápido y divertido con una herramienta como GSAP. Puede modularizar las animaciones, anidarlas tan profundamente como desee y ajustar su sincronización automáticamente. Esto hace que sea mucho más fácil experimentar. Créame: una vez que intente crear una secuencia de animación en CSS y luego en GSAP, verá lo que quiero decir. ¡Noche y día! Las ediciones futuras también son más rápidas.
Animar más allá del DOM: Canvas, WebGL, objetos genéricos y cadenas complejas no se pueden animar con tecnologías nativas. Usar una herramienta consistente para todas tus animaciones es mucho más limpio.
Control del tiempo de ejecución: el uso de una buena biblioteca de animaciones puede permitirle pausar, reanudar, revertir, buscar o incluso cambiar gradualmente la velocidad de una secuencia de animación completa. Puede controlar cada componente de transformación de forma independiente (rotación, escala, x, y, inclinación, etc.). También puede recuperar esos valores en cualquier momento. Las animaciones de JavaScript te brindan la máxima flexibilidad.
Opciones de facilitación (rebote, elástico, etc.): CSS solo le brinda dos puntos de control para las facilitaciones. CustomEase de GSAP le permite literalmente crear cualquier facilidad que pueda imaginar.
Suavizado de retrasos: GSAP puede priorizar la sincronización absoluta o ajustar cosas sobre la marcha para evitar saltos si la CPU se ataca.
Capacidades avanzadas: con GSAP, es fácil transformar archivos SVG, agregar física/inercia, editar rutas de movimiento directamente en el navegador, usar escalas con reconocimiento de posición y más.

La mayoría de los mejores animadores de la industria utilizan una herramienta como GSAP porque han aprendido las mismas cosas a lo largo de los años. Una vez que vaya más allá de las animaciones muy básicas, una biblioteca de JavaScript le hará la vida mucho, mucho más fácil y le abrirá posibilidades completamente nuevas.

° 2: utiliza líneas de tiempo

Una buena biblioteca de animación proporcionará alguna forma de crear animaciones individuales (llamadas interpolaciones) y una forma de secuenciar animaciones en una línea de tiempo. Piense en una línea de tiempo como un contenedor para sus preadolescentes donde los coloca entre sí.

La mayoría de las veces que necesites que tus animaciones se ejecuten en una secuencia, debes usar una línea de tiempo.

const tl = gsap.timeline(); tl.to(".box", { duration: 1, x: 100 }) .to(".box", { duration: 1, backgroundColor: "#f38630" }, "+=0.5") .to(".box", { duration: 1, x: 0, rotation: -360 }, "+=0.5")

De forma predeterminada en GSAP, las interpolaciones agregadas a una línea de tiempo esperarán a que se completen las interpolaciones anteriores antes de ejecutarse. También agrega +=0.5un desplazamiento o retraso adicional de medio segundo, por lo que la segunda interpolación comenzará 0,5 segundos después de que finalice la primera interpolación, sin importar cuánto tiempo dure la primera interpolación.

Para aumentar la cantidad de tiempo entre la interpolación a 1 segundo, todo lo que necesitas hacer es cambiar +=0.5a +=1! Muy fácil. Con este enfoque, puedes iterar tus animaciones rápidamente sin preocuparte por hacer los cálculos para combinar duraciones anteriores.

Consejo #3: Utilice valores relativos

Por “valores relativos” me refiero a tres cosas:

Animar valores en relación con su valor actual. GSAP reconoce +=y -=pone prefijos para esto. Así x: "+=200"se agregarán 200 unidades (normalmente píxeles) al actual x. Y x: "-=200"restará 200 del valor actual. Esto también es útil en el parámetro de posición de GSAP al posicionar interpolaciones entre sí.
Utilice unidades relativas (como y vw, vhen algunos casos, %) cuando los valores deban responder a los cambios de tamaño de la ventana gráfica.
Utilice métodos como .to()y .from()(en lugar de .fromTo()) siempre que sea posible para que los valores iniciales o finales se completen dinámicamente a partir de sus valores actuales. De esa manera, no es necesario declarar valores de inicio y fin en cada interpolación. ¡Sí, menos tipeo! Por ejemplo, si tuvieras un montón de elementos de diferentes colores, podrías animarlos todos a negro, como gsap.to(".class", {backgroundColor: "black" }).

° 4: utiliza fotogramas clave

Si te encuentras animando el mismo objetivo una y otra vez seguidas, ¡es el momento perfecto para usar fotogramas clave! Lo haces asi:

gsap.to(".box", { keyframes: [ { duration: 1, x: 100 }, { duration: 1, backgroundColor: "#f38630", delay: 0.5 }, { duration: 1, x: 0, rotation: -360, delay: 0.5 }]});

¡No es necesario un cronograma! Para espaciar las interpolaciones simplemente usamos la delaypropiedad en cada fotograma clave. (Puede ser negativo crear superposiciones).

° 5: utilizar valores predeterminados inteligentes

GSAP tiene valores predeterminados para propiedades como facilidad ( "power1.out") y duración ( 0.5segundos). Entonces, la siguiente es una interpolación válida que se animará durante medio segundo.

gsap.to(".box", { color: "black" })

Para cambiar los valores predeterminados globales de GSAP, utilice gsap.defaults():

// Use a linear ease and a duration of 1 insteadgsap.defaults({ ease: "none", duration: 1 });

Esto puede ser útil, pero es más común establecer valores predeterminados para una línea de tiempo en particular para que afecte solo a sus hijos. Por ejemplo, podemos evitar escribir duration: 1para cada una de las subinterpolaciones estableciendo un valor predeterminado en la línea de tiempo principal:

const tl = gsap.timeline({ defaults: { duration: 1 } }); tl.to(".box", { x: 100 }) .to(".box", { backgroundColor: "#f38630" }, "+=0.5") .to(".box", { x: 0, rotation: -360 }, "+=0.5")

Consejo #6: anima varios elementos a la vez

Mencionamos esto brevemente en el tercer consejo, pero merece su propio consejo.

Si tiene varios elementos que comparten la misma clase de .box, el código anterior animará todos los elementos al mismo tiempo.

También puedes seleccionar varios elementos con diferentes selectores utilizando una cadena de selector más compleja:

gsap.to(".box, .circle", { ... });

O puede pasar una matriz de referencias de variables siempre que los elementos sean del mismo tipo (cadena de selección, referencia de variable, objeto genérico, etc.):

var box = document.querySelector(".box");var circle = document.querySelector(".circle");// some time later…gsap.to([box, circle], { ... });

Consejo #7: Utilice valores, escalanes y/o bucles basados en funciones

Valores basados en funciones

Utilice una función en lugar de un número/cadena para casi cualquier propiedad, y GSAP llamará a esa función una vez para cada objetivo cuando represente la interpolación por primera vez. Además, utilizará todo lo que devuelva la función como valor de propiedad. Esto puede ser realmente útil para crear un montón de animaciones diferentes usando una sola interpolación y para agregar variación.

GSAP pasará los siguientes parámetros a la función:

El índice
El elemento específico afectado
Una matriz de todos los elementos afectados por la interpolación.

Por ejemplo, podrías establecer la dirección del movimiento según el índice: Blog de Nutricion, Entrenamiento y Fitness

O puedes elegir elementos de una matriz:

Se tambalea

Haga que sus animaciones se vean más dinámicas e interesantes compensando los tiempos de inicio con un escalamiento. Para desplazamientos escalados simples en una sola interpolación, simplemente use stagger: 0.2para agregar 0,2 segundos entre el tiempo de inicio de cada animación.

También puedes pasar un objeto para obtener efectos escalados más complejos, incluidos los que emanan hacia afuera desde el centro de una cuadrícula o aleatorizan los tiempos:

Para obtener más información sobre los escalonamientos de GSAP, consulte la documentación de escalonamiento.

Bucles

Puede resultar útil recorrer una lista de elementos para crear o aplicar animaciones, especialmente cuando se basan en algún evento, como la interacción de un usuario (que analizará más adelante).

Para recorrer una lista de elementos, es más fácil de utilizar .forEach(). Pero como esto no es compatible con elementos seleccionados .querySelectorAll()en IE, puedes usar utils.toArray()la función GSAP en su lugar.

En el siguiente ejemplo, recorremos cada contenedor para agregar animaciones a sus elementos secundarios que tienen como ámbito ese contenedor.

Consejo #8: Modulariza tus animaciones

La modularización es uno de los principios clave de la programación. Le permite crear fragmentos pequeños y fáciles de entender que puede combinar en creaciones más grandes y, al mismo tiempo, mantener las cosas limpias, reutilizables y fáciles de modificar. También le permite utilizar parámetros y alcance de funciones, aumentando la reutilización de su código.

Funciones

Utilice funciones para devolver interpolaciones o líneas de tiempo y luego insértelas en una línea de tiempo maestra:

function doAnimation() { // do something, like calculations, maybe using arguments passed into the function // return a tween, maybe using the calculations above return gsap.to(".myElem", { duration: 1, color: "red"});}tl.add( doAnimation() );

Anidar líneas de tiempo puede realmente revolucionar la forma de animar. Le permite secuenciar animaciones realmente complejas con facilidad mientras mantiene su código modular y legible.

function doAnimation() { const tl = gsap.timeline(); tl.to(...); tl.to(...); // ...as many animations as you’d like! // When you’re all done, return the timeline return tl;}const master = gsap.timeline();master.add( doAnimation() );master.add( doAnotherAnimation() );// Add even more timelines!

Aquí hay un caso de uso del mundo real modificado de la publicación "Escribir código de animación más inteligente" de Carl Schooff.

Aquí hay una demostración más compleja que muestra la misma técnica usando un tema de Star Wars de Craig Roblewsky:

Incluir sus rutinas de creación de animaciones dentro de funciones también hace que recrear animaciones (por ejemplo, al cambiar el tamaño) sea muy sencillo.

var tl; // keep an accessible reference to our timelinefunction buildAnimation() { var time = tl ? tl.time() : 0; // save the old time if it exists // kill off the old timeline if it exists if (tl) { tl.kill(); } // create a new timeline tl = gsap.timeline(); tl.to(...) .to(...); // do your animation tl.time(time); // set the playhead to match where it was}buildAnimation(); //kick things offwindow.addEventListener("resize", buildAnimation); // handle resize

Si se encuentra repitiendo el mismo código y cambiando una variable por otra, eso generalmente es una señal, debe crear una función general o usar un bucle para mantener su código SECO (No se repita).

Efectos

Con los efectos, puedes convertir una animación personalizada en un efecto con nombre que se puede invocar en cualquier momento con nuevos objetivos y configuraciones. Esto es especialmente útil cuando tienes estándares para tus animaciones o si vas a llamar a la misma animación desde diferentes contextos.

Aquí hay un efecto de "desvanecimiento" súper simple para mostrar el concepto:

// register the effect with GSAP:gsap.registerEffect({ name: "fade", defaults: {duration: 2}, //defaults get applied to the "config" object passed to the effect below effect: (targets, config) = { return gsap.to(targets, {duration: config.duration, opacity:0}); }});// now we can use it like this:gsap.effects.fade(".box");// Or override the defaults:gsap.effects.fade(".box", {duration: 1});

Consejo #9: Utilice métodos de control

GSAP proporciona muchos métodos para controlar el estado de una interpolación o línea de tiempo. Incluyen .play(), .pause(), .reverse(), .progress(), .seek(), .restart(), .timeScale()y varios otros.

El uso de métodos de control puede hacer que las transiciones entre animaciones sean más fluidas (como poder retroceder a mitad de camino) y más eficientes (al reutilizar la misma interpolación/línea de tiempo en lugar de crear nuevas instancias cada vez). Y al brindarle un control más preciso sobre el estado de la animación, también puede ayudar con la depuración.

He aquí un ejemplo sencillo:

¡Un caso de uso sorprendente es la interpolación timeScalede una línea de tiempo!

Caso de uso: eventos de interacción que activan animaciones

Dentro de los detectores de eventos para eventos de interacción del usuario, podemos usar métodos de control para tener un control preciso sobre el estado de reproducción de nuestra animación.

En el siguiente ejemplo, estamos creando una línea de tiempo para cada elemento (para que no active la misma animación en todas las instancias), adjuntando una referencia para esa línea de tiempo al elemento mismo y luego reproduciendo la línea de tiempo relevante cuando el elemento es flotado, invirtiéndolo cuando el mouse se va.

Caso de uso: animación entre múltiples estados de una línea de tiempo

Es posible que desee que un conjunto de animaciones afecte las mismas propiedades de los mismos elementos, pero sólo en ciertas secuencias (por ejemplo, estados activo/inactivo, cada uno con estados de mouseover/mouseout). Puede resultar complicado de gestionar. Podemos simplificarlo usando estados de una línea de tiempo y eventos de control.

Caso de uso: animación basada en la posición de desplazamiento

Podemos activar fácilmente animaciones basadas en la posición de desplazamiento mediante el uso de métodos de control. Por ejemplo, esta demostración reproduce una animación completa una vez que se alcanza una posición de desplazamiento:

¡También puedes adjuntar el progreso de una animación a la posición de desplazamiento para obtener efectos de desplazamiento más sofisticados!

Pero si vas a hacer esto, es mejor acelerar el detector de desplazamiento por razones de rendimiento:

Sin embargo, configurar esto cada vez que necesites hacer una animación en el desplazamiento es una molestia. ¡Puedes usar el complemento de desplazamiento oficial de GreenSock llamado ScrollTrigger para hacer esto (y mucho más) por ti!

Consejo adicional: utilice los complementos, los métodos de utilidad y las funciones auxiliares de GSAP

Los complementos de GSAP agregan capacidades adicionales al núcleo de GSAP. Algunos complementos facilitan el trabajo con bibliotecas de renderizado, como PixiJS o EaselJS, mientras que otros complementos agregan superpoderes como transformar SVG, funcionalidad de arrastrar y soltar, etc. Esto mantiene el núcleo GSAP relativamente pequeño y le permite agregar funciones cuando las necesita.

Complementos

ScrollTrigger crea asombrosas animaciones basadas en desplazamiento con un código mínimo. O activar cualquier cosa relacionada con el desplazamiento, incluso si no tiene nada que ver con la animación.

MorphSVG se transforma entre dos formas SVG, sin importar la cantidad de puntos, y le brinda un control preciso sobre cómo se transforman las formas.

DrawSVG revela (u oculta) progresivamente el trazo de un elemento SVG, haciendo que parezca que se está dibujando. Corrige varios errores del navegador que afectan a las animaciones típicas con desplazamiento de trazo y guión.

MotionPath anima cualquier cosa (SVG, DOM, lienzo, objetos genéricos, lo que sea) a lo largo de una ruta de movimiento en cualquier navegador. ¡Incluso puedes editar la ruta en el navegador usando MotionPathHelper!

GSDevTools le brinda una interfaz de usuario visual para interactuar y depurar animaciones GSAP, completa con controles de reproducción avanzados, atajos de teclado, sincronización global y más.

Draggable proporciona una forma sorprendentemente sencilla de hacer que prácticamente cualquier elemento DOM se pueda arrastrar, girar, lanzar o incluso desplazar con un movimiento rápido usando el mouse o eventos táctiles. Draggable se integra maravillosamente (y opcionalmente) con InertiaPlugin para que el usuario pueda mover y desacelerar el movimiento suavemente según el impulso.

CustomEase (junto con CustomBounce y CustomWiggle) se suman a las ya amplias capacidades de facilitación de GSAP al permitirle registrar cualquier facilidad que desee.

SplitText es una utilidad JavaScript fácil de usar que le permite dividir texto HTML en caracteres, palabras y líneas. Es fácil de usar, extremadamente flexible, funciona desde IE9 y maneja caracteres especiales por usted.

ScrambleText codifica el texto en un elemento DOM con caracteres aleatorios, actualizando nuevos caracteres aleatorios a intervalos regulares, mientras revela gradualmente su nuevo texto (o el original) a lo largo de la interpolación. Visualmente, parece una computadora que decodifica una cadena de texto.

Physics2D le permite intercalar la posición de elementos en función de la velocidad y la aceleración en lugar de ir a valores específicos. PhysicsProps es similar pero funciona con cualquier propiedad, no solo con coordenadas 2D.

Métodos de utilidad

GSAP tiene métodos de utilidad integrados que pueden facilitar algunas tareas comunes. La mayoría se centra en manipular valores de una manera particular, lo que puede resultar especialmente útil al generar o modificar valores de animación. Los que uso con más frecuencia son .wrap(), .random, .interpolate(), .distribute(), .pipe()y .unitize(), pero hay muchos otros que pueden resultarle útiles.

Funciones auxiliares

De manera similar, pero no integradas en el núcleo de GSAP, se encuentran algunas funciones auxiliares que GreenSock ha creado a lo largo de los años para abordar casos de uso específicos. Estas funciones facilitan INVERTIR sus animaciones, devolver un número aleatorio basado en una curva de facilidad, combinar dos curvas de facilidad y mucho más. ¡Recomiendo encarecidamente echarles un vistazo!

Conclusión

¡Has llegado al final! Con suerte, habrá aprendido un par de cosas a lo largo del camino y este artículo seguirá siendo un recurso para usted en los años venideros.

Como siempre, si tiene alguna pregunta sobre GSAP, no dude en visitar los foros de GreenSock. ¡Son increíblemente serviciales y acogedores! Como empleado de GreenSock, ahí es donde salgo a menudo; ¡Me encanta ayudar a la gente con desafíos relacionados con la animación!

Tal vez te puede interesar:

Consejos para escribir código de animación de manera eficiente

Consejos para escribir código de animación de manera eficiente

° 1: utiliza una biblioteca de animaciones° 2: utiliza líneas de tiempoConsejo #3: Utilice valores relativos° 4: utiliza fotogramas clave° 5: utilizar val

programar

es

https://pseint.es/static/images/programar-consejos-para-escribir-codigo-de-animacion-de-manera-eficiente-1392-0.jpg

2024-06-13

Consejos para escribir código de animación de manera eficiente — Consejos para escribir código de animación de manera eficiente

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

Update cookies preferences