-
E agora vamos analisar algumas
aplicações animadas
-
em interfaces web e mobile.
-
E aqui temos uma ferramenta
muito conhecida de 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.
-
Tá vendo?
-
Eu clicando nele
e alterando ele muda para mobile.
-
Provavelmente a sua versão
pode ser menor ou maior,
-
mas existe vários 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 um ease-in,
ease-out.
-
Você 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 uns 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 ó.
-
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
-
porque por dentro
aparece imagens em continuidade,
-
e isso aqui é o princípio do mascaramento.
-
Mas também, se você pode perceber,
tem muito feedback visual no estilo.
-
Isin, Isin, alt.
-
Então você.
-
Quando você clica no botão,
-
você pode perceber que ele reduz,
-
ele diminui no processo de transformação.
-
Utilizando este princípio
de transformar Transformation.
-
E ele
-
e ele é
basicamente isi isi alt mascaramento
-
é uma ferramenta muito bacana também
para você analisar as micro interaçõ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 usuário e interface.
-
Então a minha recomendação
é que você navegue
-
na internet,
acesse o sites que você mais gosta
-
e faça essa análise
das animações ali utilizadas.
