El estado de la animación 2014

 

 

 

  • SmashingConf Friburgo 2024
  • Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis

  • Índice
    1. Flash puede haber desaparecido, pero la era de la animación web acaba de comenzar
    2. Animando todas las cosas
      1. ¡Más estados! = Animación dinámica
    3. La API de animación web: la mejor API de la que nunca has oído hablar
      1. Apoyo
      2. Actuación
      3. Herramientas
    4. The Web Animation Community Today
    5. Recursos
      1. Unirse a la conversación
      2. Hacer la diferencia
      3. Personas a seguir en Twitter
      4. Otras lecturas

    A raíz de tantas luchas internas entre “animación CSS versus animación JavaScript”, está surgiendo una nueva API específica para animación web que podría unir a ambos bandos. En 2014, Rachel Nabors tuvo la oportunidad de viajar por el mundo para hablar sobre el uso de la animación en las interfaces de usuario y el diseño. Conoció y entrevistó a decenas de personas que utilizan y defienden tanto CSS como JavaScript. Lo que está a punto de leer es puramente observacional y el relato más imparcial que podrá encontrar sobre el tema de la animación web.

     

    La era post-Flash no está exenta de animación. La animación CSS se está convirtiendo rápidamente en la piedra angular de las interfaces fáciles de usar en dispositivos móviles y de escritorio, y ya existen bibliotecas de JavaScript para manejar animaciones interactivas complejas. A raíz de tantas luchas internas entre “animación CSS versus animación JavaScript”, está surgiendo una nueva API específica para animación web que podría unir a ambos bandos.

    Es un momento emocionante para la animación web, y también un momento de graves faltas de comunicación y desinformación. En 2014, tuve la oportunidad de viajar por el mundo para hablar sobre el uso de la animación en las interfaces de usuario y el diseño . Conocí y entrevisté a decenas de personas que utilizan y defienden tanto CSS como JavaScript. Después de entrevistar a tantos desarrolladores, diseñadores y representantes de navegadores, descubrí una historia técnica y humana que contar.

     

    Lo que está a punto de leer es puramente observacional y el relato más imparcial que podrá encontrar sobre el tema de la animación web.

    Flash puede haber desaparecido, pero la era de la animación web acaba de comenzar

    Desde la era de Flash, se ha puesto de moda pensar en la animación como poco más que una decoración, una idea de último momento “llamativa”, a menudo de mal gusto, como una blinketiqueta no deseada. Pero a menos que queramos mostrar nada más que una copia en una pantalla, la animación sigue siendo nuestra amiga.

    Para los diseñadores de interfaces de usuario , la animación refuerza la jerarquía, las relaciones, la estructura y la causa y efecto. Investigaciones que se remontan a principios de los años 90 demuestran que la animación ayuda a los humanos a comprender lo que sucede en la pantalla. La animación une estados de aplicaciones y descargas que funcionan con la GPU del cerebro: la corteza visual.

    Para los desarrolladores de interacción , es imposible crear imágenes complejas (desde infografías en tableros hasta videojuegos en tabletas) sin una animación para unir todas las piezas. Si queremos esas cosas en Internet, todavía necesitamos animación.

    Lamentablemente, nos hemos quedado atrás en la carrera del diseño de movimiento. Los productos que utilizan animación para beneficiar a sus usuarios tendrán éxito donde sus competidores estáticos o que abusan de la animación fracasarán. Tal como están las cosas, las aplicaciones nativas están ganando a la web. Los desarrolladores de aplicaciones han incorporado animación en sus diseños y han desarrollado herramientas de flujo de trabajo y creación de prototipos como Flinto y Mitya desde el primer día.

    Pero es posible que las cosas estén cambiando. El equipo de Safari de iOS implementó las especificaciones de transición y animación CSS para que los sitios web puedan verse y sentirse tan bien como las aplicaciones de iOS. Incluso Google se ha dado cuenta de esto, poniendo la animación al frente y al centro de sus recomendaciones de Material Design, con cuidadosos qué hacer y qué no hacer para aplicar animaciones y transiciones de manera significativa y con un propósito.

    La animación es el siguiente paso natural en la evolución de nuestro ecosistema de aplicaciones y dispositivos. Hace que el mundo digital sea más intuitivo e interesante para usuarios de todas las edades. Y mientras nuestros dispositivos tengan GPU, esto no desaparecerá.

     

    Animando todas las cosas

    En esencia, la animación es solo una representación visual de una tasa de cambio en el tiempo y el espacio. Toda animación se puede resumir en tres tipos:

    La animación estática se ejecuta desde un punto inicial hasta un punto final, sin ramificaciones ni lógica. Esto se puede lograr solo con CSS , como lo demuestra la abundancia de animaciones de carga de CSS .

    La animación con estado en su forma más simple requiere entrada booleana ( un clic para abrir un menú y un clic para cerrarlo , por ejemplo) y se anima entre los dos estados. Actualmente, esto se logra en los marcos de JavaScript aplicando y eliminando clases con animación CSS con alcance.

    La animación dinámica puede tener muchos resultados dependiendo de la entrada del usuario y otras variables. Utiliza su propia lógica para determinar cómo deben animarse las cosas y cuáles son sus puntos finales. Podría implicar "arrastrar" una página detrás de su dedo de acuerdo con la velocidad de su deslizamiento, o cambiar dinámicamente un gráfico a medida que ingresan nuevos datos. Este es el tipo de animación más complicado de lograr con las herramientas que tenemos a nuestra disposición hoy en día. CSS por sí solo no se puede utilizar para este tipo de animación.

    ¡Más estados! = Animación dinámica

    El desarrollador astuto de CSS podría señalar que, con suficientes estados, la animación CSS podría parecerse mucho a la animación dinámica. Esto es cierto hasta cierto punto. Pero la animación verdaderamente dinámica tiene más estados finales de los que puedas anticipar.

    Imagínese la humilde barra de carga. Tener una clase diferente para cada punto porcentual de "plenitud" fácilmente alcanzaría cien líneas de CSS, sin mencionar la cantidad de veces que su JavaScript tendría que tocar el DOM para actualizar las clases y el navegador se repinta. Definitivamente podríamos escribir un cargador dinámico de mayor rendimiento solo con JavaScript.

    La animación CSS es declarativa: aparte de un puñado de pseudoclases, como :hovery :target, no acepta contexto ni del usuario ni de su entorno. Sólo hace lo que su autor le dice que haga y no puede responder a nuevas entradas o a un entorno cambiante. No hay forma de crear una animación CSS que diga “Si estás en el medio de la página, haz esto; de lo contrario, hazlo”. CSS no contiene ese tipo de lógica.

    Cuando los desarrolladores de CSS primero necesitan lógica, a menudo comienzan ajustando el alcance de CSS a las clases estatales, con JavaScript manejando la lógica de cuándo aplicar qué clase. Los marcos como AngularJS admiten estados y muchas interacciones de la interfaz de usuario se adaptan fácilmente a un puñado de estados como "cargando", "abierto" y "seleccionado". Estas animaciones también se degradan con gracia en los navegadores antiguos, lo que proporciona un impulso de UX muy necesario donde se admiten transiciones y animaciones CSS.

    Los desarrolladores de interacción lo han pasado de otra manera. La animación CSS suele ser demasiado declarativa para manejar las cosas que estos desarrolladores quieren crear. Los clientes que pagan exigen animaciones confiables en una amplia gama de navegadores; Por eso, muchos desarrolladores de interacción y sus estudios han hecho lo que hacen todos los desarrolladores inteligentes: crear bibliotecas que ahorren trabajo y se adapten a sus propios procesos. Algunas de estas bibliotecas, como GSAP y Velocity , están disponibles y desarrolladas para el público. Pero muchos otros nunca serán liberados porque las personas y agencias que los crearon no tienen el tiempo ni el dinero (o la voluntad) para respaldar un proyecto de código abierto.

     

    Esta es una historia profundamente preocupante que he escuchado una y otra vez y sugiere que muchos desarrolladores están reinventando la rueda sin hacer avanzar la web. No hay suficiente demanda de algo que se considere "bueno tener" para respaldar a muchos competidores. Es fácil ver cómo las bibliotecas como GSAP deben ser comerciales para sobrevivir, o cómo los patrocinios impulsan a bibliotecas como Velocity.

    Flash hizo un gran trabajo al ofrecer a los desarrolladores de interacción y diseñadores de UI un flujo de trabajo universal que se adapta a todo tipo de animaciones y una plataforma en la que editarlas. Pero desde que Steve Jobs anunció en 2010 que el iPhone nunca sería compatible con Flash , muchos ex desarrolladores de Flash se han exiliado silenciosamente, llevándose consigo su conocimiento especializado. Ahora, toda una generación de diseñadores web ha llegado a Internet sin apenas conocimiento de las posibilidades y desafíos que enfrentamos al aumentar la complejidad de la animación. Mejores tendederos

    Pero las cosas están a punto de ponerse bastante... animadas.

    La API de animación web: la mejor API de la que nunca has oído hablar

    La API de animación web es una especificación del W3C que proporciona un lenguaje unificado para animaciones CSS y SVG y que abre el motor de animación del navegador para la manipulación del desarrollador. Hace lo siguiente:

    • proporcionar una API para el motor de animación, lo que nos permitirá desarrollar más herramientas de animación en el navegador y permitir que las bibliotecas de animación aprovechen mejoras en el rendimiento;
    • dar a la animación (calificada) su propio hilo, eliminando los desechos;
    • apoyar rutas de movimiento ;
    • proporcionar devoluciones de llamadas posteriores a la animación;
    • reintroducir animaciones anidadas y secuenciadas que no hemos visto desde Flash;
    • nos permiten pausar, reproducir, buscar, retroceder, ralentizar o acelerar la reproducción con diccionarios de tiempo y objetos de reproducción de animación .

    Este es solo un ejemplo de lo que la API de animación web puede hacer y que CSS por sí solo no puede hacer .

    Consulte la API Pen Running on Web Animations de Rachel Nabors ( @rachelnabors ) en CodePen .

    Apoyo

    La API de animación web ha tardado más de dos años en desarrollarse y sus funciones se han estado implementando en Chrome y Firefox durante los últimos seis meses. Mozilla es la principal fuerza detrás de la especificación. Mientras tanto, el equipo de Chrome ha estado priorizando el envío de funciones.

    Microsoft tiene la API “bajo consideración” para Internet Explorer. Sorprendentemente, Apple también ha adoptado un enfoque de esperar y ver qué pasa con Safari. Y sólo podemos fantasear sobre cuándo llegará la API a esos motores de aplicaciones web impulsados ​​por antiguas bifurcaciones de navegadores de código abierto .

     

    Los primeros usuarios que quieran explorar la API pueden probar un polyfill para la API Web Animations , que será reemplazado por Web Animations Next literalmente en cualquier momento (puede encontrar más información sobre el polyfill y la API en el sitio web del proyecto Polymer ). . Sin embargo, para los navegadores que no soportan la API, el polyfill sigue teniendo menos rendimiento que GSAP, el campeón reinante de las bibliotecas de animación basadas en JavaScript. Por lo tanto, el polyfill no es algo interactivo que los desarrolladores quieran poner en producción para proyectos de alto rendimiento.

    Pasará algún tiempo antes de que esta API sea compatible en todos los ámbitos. Con la mitad de los fabricantes de navegadores esperando a ver cómo lo usarán los desarrolladores y la mayoría de los desarrolladores negándose a usar una herramienta que no tiene un soporte generalizado, la API se enfrenta al escenario del huevo y la gallina. Sin embargo, en una conversación en el escenario con Paul Kinlan de Google en Fronteers, sugerí que, si la API fuera totalmente compatible con un sistema cerrado y monetizable para aplicaciones web, como Google Play, los desarrolladores podrían usarla de forma segura en un jardín amurallado hasta que alcance la madurez y un mayor apoyo.

    Actuación

    Los autores e implementadores de la API esperan que los desarrolladores de bibliotecas de animación comiencen a detectar funciones en busca de soporte de la API para aprovechar sus beneficios de rendimiento. Debido a que la API de animación web utiliza el motor de renderizado CSS, podemos esperar niveles de rendimiento de CSS. Las animaciones se ejecutarán en su propio hilo siempre que no dependan de nada que suceda en el hilo principal, como JavaScript o el diseño.

    Hablando de diseño, el reflujo sigue siendo uno de los mayores obstáculos de procesamiento para los navegadores. Ninguna animación CSS o JavaScript puede evitarlo a menos que estés bombeando todo a través de WebGL directamente a la GPU (lo que algunos desarrolladores de bibliotecas internos inteligentes han estado haciendo). Aparte de opacityy transform, animar la mayor parte de las propiedades CSS provocará un reflujo, un cambio en el diseño y/o un repintado de los píxeles en la pantalla. La will-changepropiedad CSS ayuda a algunos al permitirnos señalar algo y decirle al navegador: “Eso, eso va a cambiar. Haces lo que tienes que hacer y cámbialo de manera eficiente”. La esperanza es que a medida que los navegadores se vuelvan más inteligentes con los gráficos, muevan esos elementos a su propia capa u optimicen la forma en que manejan esos gráficos. Es el primer paso para eliminar hacks como translateZ(0).

    Estos "trucos de rendimiento" a menudo se utilizan como una solución mágica cada vez que una animación falla, pero a menudo causan problemas de rendimiento cuando se usan sin darse cuenta. A largo plazo, es mejor dejar las decisiones de rendimiento en manos del navegador. Afortunadamente, los fabricantes de navegadores están luchando por conseguir menos propiedades para activar reflujos, manteniéndolos así fuera del hilo principal. Para los desarrolladores de bibliotecas de animación, esto significa que la API de animación web podría ser un socio ganador en cuanto a rendimiento en un futuro próximo.

     

    Herramientas

    Anyone working with web animation yearns for proper animation development tools: a timeline, property inspection, better editors, and the ability to pause, rewind and otherwise inspect an animation while debugging. The Web Animation API will open the guts of the CSS rendering engine to developers and the browser vendors themselves to create these tools. Both Chrome and Firefox are preparing animation features for their development tools. This API opens up those possibilities.

    The Web Animation Community Today

    Not many people other than those working on it are aware of the Web Animation API. The standards community is eager for real-world feedback from interaction and animation library developers. However, many developers feel that the standardistas live in an ivory tower, far removed from the rigors of the trenches, the demands of clients and the lessons learned from Flash.

    To be fair, the standardistas haven’t exactly come out to meet their audience in the field. To join the “official” Web Animation API conversation, you must jump through some hoops, and getting on the email chain threatens to overflow the inbox of any busy developer. Alternatively, you could get on IRC and join the conversation there — if only designers used IRC. The conversation that needs to happen is unlikely to happen if the people who have the most to say simply aren’t there. Vendors and specification authors will need to find more ways to reach out to their key audience or else risk building an API without an audience.

    But the standardistas aren’t the only ones with communication problems here. As a community, we are very judgmental and quick to deride things that we deem unworthy, be it Flash or an API we don’t like the look of. Many of us invest our egos in our tools and processes. But those things don’t define us. What we create together defines us.

    • Animation library developers, read the specification. It is long, but if GreenSock’s Jack Doyle can do it, so can you.
    • Interaction developers who don’t have all day to read a huge specification, just read the readme on the polyfill’s page. It’s a perfect TLDR. Now that you know what’s coming, you will know when it might be useful to you, whether for optimizing your library’s performance or building an in-browser timeline UI.
    • Designers, prioritize JavaScript at work. Play with the polyfill, and play with GSAP and Velocity. Find out what these things can do for your work that CSS alone cannot accomplish.

    With web animation, we have a rare chance to put our egos aside and come together as a community to build a tool with which future generations of designers and developers can build great things. For their sake, I hope we can.

    “The art challenges the technology, and the technology inspires the art.”

    – John Lasseter, director de operaciones de Pixar

    Recursos

    Rachel Nabors tiene una lista actualizada de recursos en la API de animación web. Para unirse a la conversación no oficial, busque el #waapihash tag en el lugar donde prefiera comunicarse.

    • Animaciones web (especificación API), W3C
    • Web Animations polyfill y Web Animation Next (la próxima encarnación del polyfill)
    • Biblioteca de animación GreenSock
    • Velocity , un .animate()sustituto eficaz de jQuery

    Unirse a la conversación

    • Lista de correo oficial: correo electrónico [email protected] , comenzando la línea de asunto con[web-animations] …
    • IRC: irc.w3.org#webanimations
    • En cualquier otro lugar: utilice el hashtag #waapie interactúe con la comunidad

    Hacer la diferencia

    Las personas que estén familiarizadas con la codificación en C++ pueden ayudar a implementar la API en Firefox. ¡ Brian Birtles podría incluso ser tu mentor! Y Mozilla siempre está buscando personas que le ayuden a escribir documentación sobre MDN .

    Se pueden enviar correcciones menores a la especificación (gramática, ortografía, inconsistencias, etc.) como solicitudes de extracción en GitHub .

    Personas a seguir en Twitter

    • Brian Birtles , autor principal de la especificación y de Mozilla Japón
    • Alex Danilo , miembro del equipo de la plataforma Google y coautor
    • Tab Atkins: Googler , coautor y colaborador de la especificación CSS
    • Jack Doyle , miembro de GreenSock y GSAP
    • Rachel Nabors , directora del grupo de expertos en animación Tin Magpie

    Otras lecturas

    • Animaciones SVG y CSS con clip-path
    • Creando animaciones 'dibujadas a mano' con SVG
    • Técnicas prácticas de animación
    • Las matemáticas detrás de las animaciones JavaScript
    • Pautas y ejemplos de animación de la interfaz de usuario
    • Diseñar animaciones en Photoshop
    • Animaciones de interfaz de usuario de creación rápida de prototipos en Keynote

    (al, ml, mrn)Explora más en

    • Codificación
    • CSS
    • javascript
    • Animación
    • API





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    El estado de la animación 2014

    El estado de la animación 2014

    SmashingConf Friburgo 2024 Diseño de arquitectura de componentes de interfaz de usuario y tokens, con Nathan Curtis Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-el-estado-de-la-animacion-2014-855-0.jpg

    2024-05-20

     

    El estado de la animación 2014
    El estado de la animación 2014

    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

     

     

    Top 20