{"id":226,"date":"2020-12-22T19:37:03","date_gmt":"2020-12-22T19:37:03","guid":{"rendered":"http:\/\/photos.oceanwp.org\/?p=226"},"modified":"2023-07-26T20:30:03","modified_gmt":"2023-07-26T19:30:03","slug":"principios-animacion-web","status":"publish","type":"post","link":"https:\/\/bitsolto.com\/bitacora\/deseno-web\/principios-animacion-web\/","title":{"rendered":"Principios de animaci\u00f3n para web"},"content":{"rendered":"\n

Os dese\u00f1adores e programadores front-end usamos CSS para dar estilo, dispor contidos e crear sitios de boa aparencia. Tam\u00e9n adoptamos usar CSS para engadir movementos \u00e1s p\u00e1xinas: en forma de transici\u00f3ns ou incluso animaci\u00f3ns.<\/p>\n\n\n\n

A animaci\u00f3n pode ser unha poderosa ferramenta para axudar aos nosos visitantes e clientes a comprender e beneficiarse dos nosos dese\u00f1os. Hai principios que podemos aplicar ao noso traballo para sacar o m\u00e1ximo proveito deste poder.<\/p>\n\n\n\n

Establecidos como pr\u00e1cticas de traballo fundamentais en Disney, e publicados como “A ilusi\u00f3n da vida: animaci\u00f3n de Disney”<\/em> en 1981, os 12 principios da animaci\u00f3n<\/a>, describen como se aproveitar o poder da animaci\u00f3n para mergullar aos espectadores nun mundo crible.<\/p>\n\n\n\n

Como se poden aplicar estes principios na creaci\u00f3n de p\u00e1xinas web?<\/p>\n\n\n\n

1. Esmagar e alongar (Squash&Strech)<\/h2>\n\n\n\n

Un obxecto ten unha masa f\u00edsica especifica, e cando se move esta masa permanece igual. Unha pelota pode anchear nunha direcci\u00f3n ao golpear o chan e rebotar, pero tam\u00e9n se acurta noutro eixo para que a masa se redistrib\u00faa.<\/p>\n\n\n\n

Resulta \u00fatil cando se crean obxectos que queremos que se consideren f\u00edsicos ou m\u00e1is menos reais, como persoas ou obxectos coti\u00e1ns coma bal\u00f3ns que rebotan.<\/p>\n\n\n\n

Os elementos DOM non est\u00e1n necesariamente asociados con obxectos f\u00edsicos reais e poden crecer ou diminu\u00edr na pantalla segundo sexa necesario. Por exemplo, un bot\u00f3n pode medrar e transformarse nunha caixa de informaci\u00f3n, ou as mensaxes de erro poden aparecer e desaparecer. As\u00ed que \u00e9 posible ignorar esta regra cando se traballa cos elementos dunha p\u00e1xina web.<\/p>\n\n\n\n

A\u00ednda as\u00ed, as t\u00e9cnicas de esmagado e alongamento p\u00f3dense usar para darlle ao obxecto a sensaci\u00f3n de masa f\u00edsica m\u00e1is realista. Incluso os pequenos cambios na forma poden crear efectos sut\u00eds pero atractivos.<\/p>\n\n\n\n

2. Anticipaci\u00f3n<\/h2>\n\n\n\n

Os movementos non adoitan ocorrer de s\u00fapeto. Na vida real, o movemento adoita ir precedido por alg\u00fan tipo de acumulaci\u00f3n, xa sexa unha pelota que comeza a rodar antes de caer da mesa ou unha persoa que dobra os xeonllos para prepararse para saltar.<\/p>\n\n\n\n

Se pode usar para que as transici\u00f3ns e animaci\u00f3ns parezan m\u00e1is realistas. A anticipaci\u00f3n pode ter a forma dun sutil rebote que axude \u00e1 xente a comprender o que est\u00e1 a cambiar e a atender aos obxectos na pantalla.<\/p>\n\n\n\n

Por exemplo, un elemento poder\u00eda encollerse lixeiramente antes de crecer ao pasar o rato; engadir elementos adicionais a unha lista poder\u00eda introducirse facendo que outros elementos se saian primeiro.<\/p>\n\n\n\n

3. Escenificaci\u00f3n<\/h2>\n\n\n\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\u00f3n principal. Isto significa colocar a acci\u00f3n principal nunha posici\u00f3n destacada ou enmascarar outros elementos para centrarse no que o usuario necesita ver.<\/p>\n\n\n\n

En termos web, un enfoque pode ser utilizar unha superposici\u00f3n modal para determinados contidos, engadir unha capa escura sobre a p\u00e1xina existente e, a continuaci\u00f3n, colocar o contido diante da escena e m\u00f3strase como o punto principal de atenci\u00f3n.<\/p>\n\n\n\n

Outro exemplo pode ser utilizar o movemento. Cando se moven moitos obxectos, \u00e9 dif\u00edcil saber cal \u00e9 digno de atenci\u00f3n. Se alg\u00fan deles se move de xeito diferente, a\u00ednda que sexa s\u00f3 un pouco, ser\u00e1 moito m\u00e1is f\u00e1cil de detectar.<\/p>\n\n\n\n

Unha t\u00e9cnica \u00e9 facer que o bot\u00f3n “Gardar” se axite ou flut\u00fae brevemente para suxerir ao usuario que pode querer gardar un documento. Coma o resto da pantalla se mant\u00e9n est\u00e1tica, destacar\u00e1 ata un movemento moi sutil.<\/p>\n\n\n\n

4. Acci\u00f3n directa e pose a pose<\/h2>\n\n\n\n

A acci\u00f3n directa \u00e9 cando se debuxa cada fotograma dunha animaci\u00f3n. Pose a pose \u00e9 cando se definen unha serie de fotogramas clave e os intervalos se enchen m\u00e1is tarde, normalmente por un asistente.<\/p>\n\n\n\n

A maior\u00eda das animaci\u00f3ns web usan animaci\u00f3n de pose a pose: a transici\u00f3n 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\u00f3n sexa suave.<\/p>\n\n\n\n

Unha excepci\u00f3n a isto \u00e9 a steps<\/code>funci\u00f3n de temporizaci\u00f3n. Con esta funci\u00f3n, o navegador “pasa” a trav\u00e9s de tantos cadros discretos como se defina. Deste xeito, poder\u00edas sacar unha serie de imaxes e facer que o navegador mostre cada unha en secuencia, creando un estilo de “Acci\u00f3n directa”.<\/p>\n\n\n\n

5. Seguimento e acci\u00f3n de superposici\u00f3n<\/h2>\n\n\n\n

As cousas non sempre pasan ao mesmo tempo. Cando un coche para de s\u00fapeto, inclinase cara adiante, co fume dos pneum\u00e1ticos e o condutor dentro contin\u00faa o movemento cara adiante ata que se dete\u00f1en ou desaparecen.<\/p>\n\n\n\n

Estes detalles son exemplos de acci\u00f3ns de seguimento e superposici\u00f3n. P\u00f3dense usar na web para axudar a resaltar que algo se est\u00e1 parando e non se esqueceu de animar. Por exemplo, un elemento engadido a unha lista pode deslizarse, avanzar un pouco demasiado e, a continuaci\u00f3n, corrixirse na posici\u00f3n correcta.<\/p>\n\n\n\n

Para crear unha sensaci\u00f3n de acci\u00f3n superposta, podemos facer que os elementos se movan a un ritmo lixeiramente diferente entre si. \u00c9 unha t\u00e9cnica que se usa ben no sistema operativo iOS cando se realiza a transici\u00f3n entre vistas. Alg\u00fans bot\u00f3ns e elementos m\u00f3vense a diferentes velocidades, e o efecto combinado \u00e9 moito m\u00e1is realista e menos plano que se todo se movese ao mesmo ritmo. Os movementos combinados dan tempo ao espectador para comprender correctamente o cambio.<\/p>\n\n\n\n

En termos web, isto pode significar api\u00f1ar transici\u00f3ns ou animaci\u00f3ns, creando efectos que funcionan a diferentes velocidades.<\/p>\n\n\n\n

6. Slow In<\/em> and Slow Out<\/em><\/h2>\n\n\n\n

Os obxectos raramente pasan de parado a velocidade m\u00e1xima inmediatamente. Eles tenden a acelerar gradualmente e lento antes de parar. Sen aceleraci\u00f3n e desaceleraci\u00f3n, os movementos semellan roboticos.<\/p>\n\n\n\n

En termos CSS, slow in<\/em> e slow out<\/em> co\u00f1\u00e9cense como easing<\/code>. Easing \u00e9 o que se co\u00f1ece como funci\u00f3n de temporizaci\u00f3n, unha forma de describir a taxa de cambio ao longo dunha animaci\u00f3n.<\/p>\n\n\n\n

Usando funci\u00f3ns de temporizaci\u00f3n, as animaci\u00f3ns poden comezar de xeito lento e acelerado (facilitaci\u00f3n de entrada), iniciarse rapidamente e enlentecer (facilitaci\u00f3n) ou efectos m\u00e1is complexos usando a funci\u00f3n de temporizaci\u00f3n cubic-bezier<\/code>.<\/p>\n\n\n\n

7. Arco<\/h2>\n\n\n\n

A\u00ednda que os obxectos son m\u00e1is reais cando seguen o “Slow In and Slow Out<\/em>“, os obxectos raramente se moven en li\u00f1as rectas: tenden a seguir arcos curvos.<\/p>\n\n\n\n

Podemos conseguir movementos de arco con CSS dun par de xeitos. Unha delas \u00e9 combinar varias animaci\u00f3ns. Unha animaci\u00f3n de bal\u00f3n que rebota, por exemplo, poder\u00eda estar formada por unha b\u00f3la que se move cara arriba e abaixo, mentres que un segundo m\u00f3vese cara \u00e1 dereita ao mesmo tempo. Despois, a pelota cruzar\u00eda a pantalla.<\/p>\n\n\n\n

Outra opci\u00f3n \u00e9 xirar un elemento. Podemos axustar o centro de rotaci\u00f3n dun obxecto establecendo a s\u00faa orixe de transformaci\u00f3n f\u00f3ra do elemento. Cando xiramos o obxecto, este xirar\u00e1 nun arco.<\/p>\n\n\n\n

8. Acci\u00f3n Secundaria<\/h2>\n\n\n\n

Mentres se leva a cabo unha acci\u00f3n principal, unha animaci\u00f3n secundaria pode axudar a destacala ou aumentala. Pode ser o balance dos brazos de algu\u00e9n que cami\u00f1a ou a inclinaci\u00f3n da cabeza. Ou unha pelota que bota un pouco de po.<\/p>\n\n\n\n

Nos sitios web, as acci\u00f3ns secundarias poden ver elementos que se afastan cando se introduce o foco principal de atenci\u00f3n, como arrastrar un elemento e colocalo no medio dunha lista.<\/p>\n\n\n\n

9. Temporalizaci\u00f3n<\/h2>\n\n\n\n

O tempo dunha animaci\u00f3n \u00e9 o tempo que tarda en completarse. O tempo p\u00f3dese usar para facer que os obxectos pesados parezan pesados no seu movemento ou para engadirlle car\u00e1cter ao movemento.<\/p>\n\n\n\n

Na web, isto pode ser tan sinxelo como axustar os valores animation-duration<\/code>ou transition-duration<\/code>.<\/p>\n\n\n\n

\u00c9 doado permitir que as animaci\u00f3ns tarden m\u00e1is do que precisan. Axustar o tempo pode axudar a eliminar a animaci\u00f3n do contido ou da interacci\u00f3n.<\/p>\n\n\n\n

10. Esaxeraci\u00f3n<\/h2>\n\n\n\n

O m\u00e1is comunmente usado en debuxos animados, a esaxeraci\u00f3n pode chamar a atenci\u00f3n sobre determinadas acci\u00f3ns e facelos m\u00e1is dram\u00e1ticos. Un lobo que intenta morder pode ter as mand\u00edbulas abertas m\u00e1is do normal para facer o efecto m\u00e1is asustado ou humor\u00edstico.<\/p>\n\n\n\n

Nunha p\u00e1xina web, os obxectos p\u00f3dense ampliar e baixar para destacar e chamar a atenci\u00f3n. Por exemplo, ao cubrir un formulario, a secci\u00f3n activa pode crecer mentres que as outras se encollen ou desaparecen.<\/p>\n\n\n\n

11. Debuxo s\u00f3lido<\/h2>\n\n\n\n

Ao animar obxectos en tres dimensi\u00f3ns, d\u00e9bese ter coidado de que seguen as regras da perspectiva. A xente est\u00e1 afeita a vivir nun mundo tridimensional, polo que cando os obxectos non se comportan como se espera, parecen mal.<\/p>\n\n\n\n

Os navegadores modernos te\u00f1en un soporte decente para as transformaci\u00f3ns tridimensionais. Isto significa que podemos xirar e colocar obxectos nunha escena e que o navegador pode xestionar as transici\u00f3ns automaticamente.<\/p>\n\n\n\n

12. Recurso<\/h2>\n\n\n\n

O atractivo \u00e9 o car\u00e1cter da obra de arte e como pode facernos conectar coa intenci\u00f3n do artista. Como o carisma dun actor, \u00e9 a atenci\u00f3n aos detalles e o movemento combinado que crean un resultado atractivo.<\/p>\n\n\n\n

Animaci\u00f3ns elaboradas con coidado na web poden crear atractivo. Empresas como Stripe fixeron un grande uso da animaci\u00f3n para engadir credibilidade ao seu proceso de compra.<\/p>\n\n\n\n

Pr\u00f3bao ti mesmo!<\/h2>\n\n\n\n

Facer uso destes principios \u00e9 unha boa forma de mellorar as animaci\u00f3ns e far\u00e1 que resulten m\u00e1is eficaces e atractivas. As animaci\u00f3ns que mante\u00f1en o peso f\u00edsico dos obxectos, anticipan cambios, fan uso de acci\u00f3ns secundarias e das curvas de tempo ser\u00e1n engadidos valiosos e \u00fatiles no teu contido.<\/p>\n\n\n\n

\n\n\n\n

Traduci\u00f3n aproximada de:<\/p>\n\n\n\n