Animação Animation
Animação é uma mudança visual planejada ao longo do tempo. Pode ter vários passos, estados ou repetições.
↗Movimento
Aprenda como o movimento pode mostrar uma mudança, guiar a atenção e ainda manter uma tela fácil de usar.
01 / Atlas
Todos os termos de Movimento
Abrir um termo para um significado simples, um exemplo, quando usá-lo, quão oficial ele é, e seu nome de código.
-
01 · Centro -
02 · Mais detalhes Animação de mola Spring Animation
A animação de mola segue um modelo físico. Rigidez, amortecimento, massa e velocidade inicial controlam como ela se move.
↗ -
03 · Centro Arrastar & Soltar Drag & Drop
Arrastar e soltar permite que as pessoas movam, reorderem ou transfiram um item diretamente. Deve mostrar quando o item é pegado e onde ele pode ser colocado.
↗ -
04 · Mais detalhes Embaralhar Texto Text Scramble
Uma mudança de texto decorativa que mostra símbolos aleatórios por um momento e, em seguida, mostra as palavras reais.
↗ -
05 · Mais detalhes Entrar, Sair & Crossfade Enter, Exit & Crossfade
Entrar, sair e crossfade adicionam, removem ou substituem conteúdo. Eles ajudam a mudança a parecer suave e conectada.
↗ -
06 · Centro Facilitação Easing
Easing é a curva de tempo que define como uma animação acelera e desacelera.
↗ -
07 · Mais detalhes Faixa de destaque Marquee
Uma faixa de conteúdo repetido que fica se movendo. Ela deve oferecer controles ou uma versão parada para pessoas sensíveis a movimento.
↗ -
08 · Centro Keyframes Keyframes
Keyframes são pontos nomeados em uma animação. Cada ponto define valores de propriedades para um momento escolhido.
↗ -
09 · Mais detalhes Microinteração Microinteraction
Uma microinteração é um pequeno ciclo de resposta para uma única ação. Ela tem um gatilho, uma regra, uma resposta e um estado que continua.
↗ -
10 · Centro Movimento Reduzido Reduced Motion
Movimento Reduzido é uma configuração de acessibilidade e modo de design. Ele remove ou simplifica movimentos que as pessoas não precisam.
↗ -
11 · Mais detalhes Rolagem Parallax Parallax Scrolling
A rolagem parallax faz as camadas se moverem em velocidades diferentes enquanto a página rola. A diferença de velocidade cria uma sensação de profundidade.
↗ -
12 · Centro Transição Transition
Uma transição se move entre dois estados visuais conhecidos durante um tempo definido.
↗