-
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 Mocha
-
para o animador,
mas que é muito bem avaliada
-
e nesse quesito
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 aqui por aqui,
-
ele vai 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 ponto o material, ponto e o E.
-
Temos também o web. Vamos acessá lo.
-
Como vocês podem perceber, web
-
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.
