Os deseñadores e programadores front-end usamos CSS para dar estilo, dispor contidos e crear sitios de boa aparencia. Tamén adoptamos usar CSS para engadir movementos ás páxinas: en forma de transicións ou incluso animacións.
A animación pode ser unha poderosa ferramenta para axudar aos nosos visitantes e clientes a comprender e beneficiarse dos nosos deseños. Hai principios que podemos aplicar ao noso traballo para sacar o máximo proveito deste poder.
Establecidos como prácticas de traballo fundamentais en Disney, e publicados como "A ilusión da vida: animación de Disney" en 1981, os 12 principios da animación, describen como se aproveitar o poder da animación para mergullar aos espectadores nun mundo crible.
Como se poden aplicar estes principios na creación de páxinas web?
1. Esmagar e alongar (Squash&Strech)
Un obxecto ten unha masa física especifica, e cando se move esta masa permanece igual. Unha pelota pode anchear nunha dirección ao golpear o chan e rebotar, pero tamén se acurta noutro eixo para que a masa se redistribúa.
Resulta útil cando se crean obxectos que queremos que se consideren físicos ou máis menos reais, como persoas ou obxectos cotiáns coma balóns que rebotan.
Os elementos DOM non están necesariamente asociados con obxectos físicos reais e poden crecer ou diminuír na pantalla segundo sexa necesario. Por exemplo, un botón pode medrar e transformarse nunha caixa de información, ou as mensaxes de erro poden aparecer e desaparecer. Así que é posible ignorar esta regra cando se traballa cos elementos dunha páxina web.
Aínda así, as técnicas de esmagado e alongamento pódense usar para darlle ao obxecto a sensación de masa física máis realista. Incluso os pequenos cambios na forma poden crear efectos sutís pero atractivos.
2. Anticipación
Os movementos non adoitan ocorrer de súpeto. Na vida real, o movemento adoita ir precedido por algún tipo de acumulación, xa sexa unha pelota que comeza a rodar antes de caer da mesa ou unha persoa que dobra os xeonllos para prepararse para saltar.
Se pode usar para que as transicións e animacións parezan máis realistas. A anticipación pode ter a forma dun sutil rebote que axude á xente a comprender o que está a cambiar e a atender aos obxectos na pantalla.
Por exemplo, un elemento podería encollerse lixeiramente antes de crecer ao pasar o rato; engadir elementos adicionais a unha lista podería introducirse facendo que outros elementos se saian primeiro.
3. Escenificación
A posta en escena consiste en asegurarse de que un obxecto sexa o foco dunha escena, mentres os outros obxectos ou aspectos da escena son secundarios da acción principal. Isto significa colocar a acción principal nunha posición destacada ou enmascarar outros elementos para centrarse no que o usuario necesita ver.
En termos web, un enfoque pode ser utilizar unha superposición modal para determinados contidos, engadir unha capa escura sobre a páxina existente e, a continuación, colocar o contido diante da escena e móstrase como o punto principal de atención.
Outro exemplo pode ser utilizar o movemento. Cando se moven moitos obxectos, é difícil saber cal é digno de atención. Se algún deles se move de xeito diferente, aínda que sexa só un pouco, será moito máis fácil de detectar.
Unha técnica é facer que o botón "Gardar" se axite ou flutúe brevemente para suxerir ao usuario que pode querer gardar un documento. Coma o resto da pantalla se mantén estática, destacará ata un movemento moi sutil.
4. Acción directa e pose a pose
A acción directa é cando se debuxa cada fotograma dunha animación. Pose a pose é cando se definen unha serie de fotogramas clave e os intervalos se enchen máis tarde, normalmente por un asistente.
A maioría das animacións web usan animación de pose a pose: a transición entre fotogramas clave pode ser xestionada polo navegador, que interpola a diferenza entre cada un e debuxa tantos fotogramas como pode para que a animación sexa suave.
Unha excepción a isto é a stepsfunción de temporización. Con esta función, o navegador "pasa" a través de tantos cadros discretos como se defina. Deste xeito, poderías sacar unha serie de imaxes e facer que o navegador mostre cada unha en secuencia, creando un estilo de "Acción directa".
5. Seguimento e acción de superposición
As cousas non sempre pasan ao mesmo tempo. Cando un coche para de súpeto, inclinase cara adiante, co fume dos pneumáticos e o condutor dentro continúa o movemento cara adiante ata que se deteñen ou desaparecen.
Estes detalles son exemplos de accións de seguimento e superposición. Pódense usar na web para axudar a resaltar que algo se está parando e non se esqueceu de animar. Por exemplo, un elemento engadido a unha lista pode deslizarse, avanzar un pouco demasiado e, a continuación, corrixirse na posición correcta.
Para crear unha sensación de acción superposta, podemos facer que os elementos se movan a un ritmo lixeiramente diferente entre si. É unha técnica que se usa ben no sistema operativo iOS cando se realiza a transición entre vistas. Algúns botóns e elementos móvense a diferentes velocidades, e o efecto combinado é moito máis realista e menos plano que se todo se movese ao mesmo ritmo. Os movementos combinados dan tempo ao espectador para comprender correctamente o cambio.
En termos web, isto pode significar apiñar transicións ou animacións, creando efectos que funcionan a diferentes velocidades.
6. Slow In and Slow Out
Os obxectos raramente pasan de parado a velocidade máxima inmediatamente. Eles tenden a acelerar gradualmente e lento antes de parar. Sen aceleración e desaceleración, os movementos semellan roboticos.
En termos CSS, slow in e slow out coñécense como easing. Easing é o que se coñece como función de temporización, unha forma de describir a taxa de cambio ao longo dunha animación.
Usando funcións de temporización, as animacións poden comezar de xeito lento e acelerado (facilitación de entrada), iniciarse rapidamente e enlentecer (facilitación) ou efectos máis complexos usando a función de temporización cubic-bezier.
7. Arco
Aínda que os obxectos son máis reais cando seguen o "Slow In and Slow Out", os obxectos raramente se moven en liñas rectas: tenden a seguir arcos curvos.
Podemos conseguir movementos de arco con CSS dun par de xeitos. Unha delas é combinar varias animacións. Unha animación de balón que rebota, por exemplo, podería estar formada por unha bóla que se move cara arriba e abaixo, mentres que un segundo móvese cara á dereita ao mesmo tempo. Despois, a pelota cruzaría a pantalla.
Outra opción é xirar un elemento. Podemos axustar o centro de rotación dun obxecto establecendo a súa orixe de transformación fóra do elemento. Cando xiramos o obxecto, este xirará nun arco.
8. Acción Secundaria
Mentres se leva a cabo unha acción principal, unha animación secundaria pode axudar a destacala ou aumentala. Pode ser o balance dos brazos de alguén que camiña ou a inclinación da cabeza. Ou unha pelota que bota un pouco de po.
Nos sitios web, as accións secundarias poden ver elementos que se afastan cando se introduce o foco principal de atención, como arrastrar un elemento e colocalo no medio dunha lista.
9. Temporalización
O tempo dunha animación é o tempo que tarda en completarse. O tempo pódese usar para facer que os obxectos pesados parezan pesados no seu movemento ou para engadirlle carácter ao movemento.
Na web, isto pode ser tan sinxelo como axustar os valores animation-durationou transition-duration.
É doado permitir que as animacións tarden máis do que precisan. Axustar o tempo pode axudar a eliminar a animación do contido ou da interacción.
10. Esaxeración
O máis comunmente usado en debuxos animados, a esaxeración pode chamar a atención sobre determinadas accións e facelos máis dramáticos. Un lobo que intenta morder pode ter as mandíbulas abertas máis do normal para facer o efecto máis asustado ou humorístico.
Nunha páxina web, os obxectos pódense ampliar e baixar para destacar e chamar a atención. Por exemplo, ao cubrir un formulario, a sección activa pode crecer mentres que as outras se encollen ou desaparecen.
11. Debuxo sólido
Ao animar obxectos en tres dimensións, débese ter coidado de que seguen as regras da perspectiva. A xente está afeita a vivir nun mundo tridimensional, polo que cando os obxectos non se comportan como se espera, parecen mal.
Os navegadores modernos teñen un soporte decente para as transformacións tridimensionais. Isto significa que podemos xirar e colocar obxectos nunha escena e que o navegador pode xestionar as transicións automaticamente.
12. Recurso
O atractivo é o carácter da obra de arte e como pode facernos conectar coa intención do artista. Como o carisma dun actor, é a atención aos detalles e o movemento combinado que crean un resultado atractivo.
Animacións elaboradas con coidado na web poden crear atractivo. Empresas como Stripe fixeron un grande uso da animación para engadir credibilidade ao seu proceso de compra.
Próbao ti mesmo!
Facer uso destes principios é unha boa forma de mellorar as animacións e fará que resulten máis eficaces e atractivas. As animacións que manteñen o peso físico dos obxectos, anticipan cambios, fan uso de accións secundarias e das curvas de tempo serán engadidos valiosos e útiles no teu contido.
Tradución aproximada de:
- Animation Principles for the Web publicado orixinalmente en cssanimation.rocks o 21 de marzo de 2015.
- Podes atopar a fonte HTML e CSS en Codepen para todos os principios descritos aquí .
