Share
Control de línea de tiempo completo, importación y exportación JSON, inspeccionar animaciones, interfaz intuitiva, edición en vivo, API fácil de entender, orientada a la velocidad y retroalimentación en tiempo real: todo lo que pueda desear en una interfaz gráfica de usuario al crear y administrar animaciones web. En este artículo, veremos la herramienta más reciente disponible para animadores web llamada Spirit by Patrick Brouwer. Aprenderemos cómo puede cambiar la forma en que creas animaciones en la web. Vamos a animar!
El espíritu es una receta de tres partes, que requiere:
La aplicación de escritorio es una GUI (interfaz gráfica de usuario) para crear y administrar sus animaciones, mientras que la extensión del navegador crea la conexión entre su aplicación de escritorio correspondiente y su página web.
La aplicación está actualmente disponible para Mac, pero estará disponible para Windows y Linux en un futuro muy próximo. La extensión del navegador de Spirit es estrictamente Chrome en este momento, pero se están desarrollando extensiones compatibles para otros navegadores importantes (Firefox, Opera y Safari).
Cuando cada componente requerido esté en su lugar, puede comenzar su desarrollo de animación. Abra la aplicación, navegue a la URL de la página web deseada con su navegador, habilite la extensión y comience a animar!
Si desea animar una página web desde su sistema de archivos local, asegúrese de activar la casilla de verificación Permitir el acceso a las direcciones URL de archivos en la configuración de su extensión de Chrome.
Se recomienda agregar un ID de espíritu de datos a cada elemento que le gustaría animar cuando se desarrolla localmente.
...
Esto facilita el uso de la GUI para editar la línea de tiempo de un elemento y también facilita el tiempo de ejecución para seleccionar sus objetivos sin utilizar selectores de CSS basados en elementos (por ejemplo,. cuerpo> div> div> ul).
Spirit usa lo que se llama "runtime (jugador)". Si la página web que está visitando no tiene runtime Spirit, la extensión del navegador le inyectará automáticamente un runtime temporal. El tiempo de ejecución es solo un archivo JavaScript (~ 10kb), por lo que cada vez que escuche el término "tiempo de ejecución" se diga a sí mismo "archivo JavaScript".
Runtime le permite reproducir las animaciones directamente en su página web y aprovecha el poder de GSAP para toda su reproducción de animación. Eso significa que puedes usar propiedades específicas de GSAP así como complementos como drawSVG o morphSVG, junto con otras estrategias de animación aún en desarrollo (WAAPI).
El tiempo de ejecución está disponible a través de Open Source en caso de que desee donar su tiempo para ayudar a mantenerlo o mejorarlo. Si prefiere instalar el reproductor de tiempo de ejecución como un paquete NPM, puede escribir el comando de instalación npm instalar spiritjs --save desde su terminal, o puede probar Yarn usando su comando de instalación hilo añadir espíritujs.
¿Eres un animador web que busca una línea de tiempo que sea fácil de controlar, navegar y usar? Spirit te apoya, con una interfaz elegante e intuitiva que ofrece muchas opciones para afinar tus creaciones. La línea de tiempo se puede borrar y agregar fotogramas clave con facilidad. La clasificación de elementos, sin embargo, es una característica pendiente de implementación. Si se está desarrollando en tiempo real, los elementos se pueden agregar o eliminar según sea necesario. Cuando tu trabajo haya terminado, haz clic en atrás botón, exportar el archivo JSON que contiene su progreso y cargar utilizando la API de ejecución Spirit cuando lo desee.
Cada fotograma clave puede ajustarse con precisión en lo que respecta a la sincronización y la aceleración. Agregar y eliminarlos también es sencillo. Los elementos se enumeran verticalmente en el inspector de la línea de tiempo y cada uno tiene su propia línea de tiempo.
Los valores para animar cada propiedad pueden ser cualquier cosa que acepte el tiempo de ejecución. Incluso es posible usar el código JavaScript como un valor pasado, produciendo elementos que son dinámicos y flexibles usando eventos del mouse, desplazamiento y detección de posición para nombrar solo algunos. Asegúrese de envolver su lógica de JavaScript para los valores de propiedad con llaves, como así window.innerWidth - this.clientWidth.
Cada elemento puede tener muchas propiedades diferentes disponibles para animar, incluidas propiedades SVG específicas relacionadas con carrera, llenar, color, posición y tamaño. Incluso puedes seleccionar caminos de clip, filtros, sombra de la caja y índice z animar Las propiedades personalizadas también se pueden agregar, si las predeterminadas provistas no se ajustan a sus necesidades. Asegúrese de que las propiedades personalizadas pasadas estén alineadas con los nombres de propiedades CSS documentados por las especificaciones W3C.
Un grupo de animación es una colección de objetos (elementos HTML) que te gustaría animar. Piense en los grupos como "componentes" donde cada uno tiene la capacidad de exportarse como JSON.
Puedes crear tantos grupos como desees y tener control sobre cada uno de ellos. Cree nuevos grupos fácilmente y agregue nuevos elementos seleccionando cada uno directamente desde su página web o a través de Elementos Panel en devtools cromados. Cuando el elemento capturado no tiene una ID de espíritu de datos la única referencia que tiene es una XPath (relativa a la raíz seleccionada), por lo que es mejor crear referencias de atributos cuando se realizan llamadas de desarrollo de producción.
Accentsconagua
var tl = new TimelineMax () spirit.setup (). then (() => spirit.load ('./ my-animations.json'). then (groups => // construye todos los grupos groups.construct ( ); // controla la secuencia de activación de cada grupo utilizando GSAP tl.add (groups.get ('group-name'), 0) .add (groups.get ('group-anothergroupname'), '- = 0.25') .add (groups.get ('group-yetanothernamename'), '+ = 0.125')));Un grupo es realmente una colección de líneas de tiempo GSAP, por lo que si ya es usuario de GreenSock, esta será una adición bienvenida a su flujo de trabajo y herramientas. Los grupos no se pueden controlar a la vez con la aplicación de escritorio (una solicitud de función futura), pero el problema se puede aliviar con la API avanzada de Spirit, ya que su tiempo de ejecución aprovecha la API de GSAP para las instancias de la línea de tiempo reflejadas en el código anterior. También puede ver esta demostración creada por el creador de Spirit, mostrando el uso de una secuencia de línea de tiempo maestra con controles de UI y múltiples grupos:
Como expliqué en mi explicación anterior relativa a los grupos, Spirit tiene una API para desarrolladores que requieren un control más profundo. Hay dos API proporcionadas; Una API simple y una API avanzada.
spirit.loadAnimation (container: element, // dom elemento que contiene un bucle de animación: true, yoyo: true, delay: 2)
Mientras que la API avanzada permite un control extenso, la API simple puede cubrir tareas como controlar la reproducción a través de una variedad de opciones. Incluso puedes devolver valores, cargar grupos y agregar interactividad..
espíritu.configuración ()
La API avanzada es para todas sus necesidades adicionales fuera de la API simple. Antes de poder utilizar la API avanzada, deberá indicar al tiempo de ejecución dónde puede encontrar el GSAP. Tween y Línea de tiempo instancias. Una vez que se haya implementado la llamada al método de configuración de Spirit, se abrirán las compuertas que le brindarán la posibilidad de hacer cosas como la construcción y referencia de líneas de tiempo, interactividad, fotogramas clave y referencias de propiedades y mucho más.
Mantener las cosas sincronizadas es importante, especialmente para que Spirit funcione correctamente. La aplicación de escritorio Spirit se actualiza automáticamente en segundo plano, por lo que siempre tendrás la última versión instalada y las funciones más recientes a tu alcance. Al actualizar automáticamente la aplicación Spirit, es más fácil iterar e implementar nuevas funciones en el camino. Las extensiones de Chrome también se actualizan en segundo plano. Cada pocas horas, el navegador comprueba si alguna de las extensiones o aplicaciones instaladas tiene una URL de actualización. Para cada uno, realiza una solicitud a esa URL en busca de un archivo XML manifiesto actualizado.
Ir Chrome: // extensiones y marca el modo desarrollador casilla de verificación en la parte superior derecha, luego presione Actualizar extensiones ahora botón. Al garantizar que esta configuración está en su lugar, Spirit puede funcionar sin provocar un comportamiento inesperado a medida que se agregan nuevas características y datos actualizados.
Si desea estar al tanto de las nuevas funciones y progresar con Spirit, puede suscribirse a su boletín de noticias aquí, así como seguir el progreso en Twitter. Spirit es definitivamente la herramienta que cambiará la forma en que creas animaciones para la web..
