Projetos selecionados
Sistema de animação CryptoNow
Motion design e animação de interface para a CryptoNow, produzidos com a Trampolin a partir do design de produto fornecido.
Animação de interface
Como responde a interface.
A Wheels desenvolveu exemplos de animação para as mudanças de estado dos widgets, da navegação e das janelas CryptoNow. As gravações mostram motion design e animação em contexto, não uma implementação de software em funcionamento.
Animação para diferentes mudanças de estado.
-
01Manter a interface envolvente visível.
O menu abre enquanto o painel permanece no lugar, mantendo a ligação entre o controlo e o conteúdo apresentado.
-
02Ligar os passos da janela.
A sequência de investimento passa entre introdução de dados, confirmação e feedback na mesma janela.
Sistema de animação
Dos testes de animação às regras de implementação
Os exemplos foram desenvolvidos como uma família coerente de animações para estados da interface, navegação e janelas modais. A entrega final traduziu a animação em timings, atrasos e curvas cúbicas de Bézier exatos para implementação.
Navegação móvel entre níveis diferentes
Mudança de nível
Uma curva em S firme conduz a janela entre níveis. Na saída, a direção inverte-se, mantendo a relação espacial entre estados.
- Duração
- 500 ms
- Curva
- cubic-bezier(0.79, 0.00, 0.21, 1.00)
Entrada de janelas modais e menus suspensos no computador
Assentamento da janela modal
A visibilidade surge depressa, enquanto a escala continua num assentamento mais longo, de 85% a 100%. A interface responde de imediato sem travar o painel de forma abrupta.
- Duração
- 1000 ms
- Curva
- cubic-bezier(0.02, 0.93, 0.01, 1.00)
Entrada da janela modal em telemóvel
Subida no telemóvel
No telemóvel, a janela modal mantém a mesma hierarquia, mas muda de trajetória. Em vez de ganhar escala, o painel sobe de baixo e assenta na posição final.
- Duração
- 1000 ms
- Curva
- cubic-bezier(0.01, 0.88, 0.00, 0.98)
Transição vertical com máscara
Mudança de preço
A transição do valor usa movimento vertical com máscara, com uma direção ligada à variação de preço em vez de um simples crossfade.
- Duração
- 500 ms
- Curva
- cubic-bezier(0.80, 0.00, 0.20, 1.00)
Regras de animação consistentes tornam as mudanças de estado reconhecíveis: transições familiares ajudam a acompanhar hierarquia, contexto e alterações de valor sem obrigar o utilizador a reaprender o comportamento de cada componente.
Navegação no telemóvel.
A gravação móvel mostra transições entre secções no espaço disponível do ecrã. Complementa os exemplos de computador e mantém a animação no contexto da interface.
Créditos do projeto
- Cliente
- CryptoNow
- Agência / parceiro de produto
- Trampolin d.o.o.
- Ponto de partida
- Interface de produto e materiais UI fornecidos à Wheels pela Trampolin d.o.o.
- Wheels Studio
- Motion design, animação UI e referências de animação