-
E agora vamos analisar algumas
aplicações animadas
-
em interfaces web e mobile.
-
E aqui temos uma ferramenta
muito conhecida por todos e todas
-
que é o Duolingo.
-
Vamos analisar as animações,
mas aqui a ferramenta
-
está na versão desktop.
-
Clicando no teclado F12
e vindo nesse cone aqui, está vendo?
-
Clicando nele e alterando,
ele muda para mobile.
-
Provavelmente a sua versão
pode ser menor ou maior,
-
mas existem diversos formatos
de mobile.
-
E aqui, no Duolingo,
você pode perceber
-
uma leve animação de Motion Design
de um personagem.
-
E aqui você também tem
o ease-in e ease-out.
-
E clicando você tem um feedback
visual muito simples
-
como a abertura de ease-in.
-
Então, uma ferramenta
que provavelmente deu muito trabalho
-
para o Motion,
para o animador,
-
mas que é muito bem avaliada
nesse quesito.
-
E também temos
o Google Material Design,
-
que é um sistema,
uma biblioteca,
-
um lugar onde você tem os métodos
para aplicar o estilo de design
-
que o Google criou.
-
Então,
se você tem uma ferramenta
-
no seu celular
ou no seu desktop do Google,
-
ela foi criada com base nesse material
que eles mostram aqui.
-
E aqui você tem acesso a tudo.
-
Você pode começar por aqui, olha.
-
Ele vai te explicar o que é o material,
vai te mostrar projetos,
-
recursos para desenvolvedores,
para vários tipos de Android,
-
Flutter, web, enfim,
é um material bem completo
-
que você pode acessar
através desse link aqui:
-
"M3.material.io".
-
E temos também o Airbnb,
vamos acessá-lo.
-
Como vocês podem perceber,
o Airbnb utiliza um padrão de animação
-
consistente em toda a plataforma.
-
Aqui, por exemplo,
você pode ver um quadrado
-
que por dentro aparece imagens
em continuidade.
-
Isso aqui é o princípio
do mascaramento.
-
Mas também,
você pode perceber,
-
tem muito feedback visual
no estilo ease-in e ease-out.
-
Quando você clica no botão,
você pode perceber que ele reduz,
-
ele diminui em um processo
de transformação,
-
utilizando esse princípio
de transformation.
-
E ele é basicamente
ease-in, ease-out e mascaramento.
-
É uma ferramenta
muito bacana também
-
para você analisar as microinterações
-
e as animações utilizadas
nessa interface.
-
É um site muito bom para você
observar,
-
para você estudar e compreender
melhor essas interações
-
entre o usuário e a interface.
-
Então, a minha recomendação
é que você navegue na internet,
-
acesse os sites que você mais gosta
e faça essa análise
-
das animações ali utilizadas.
