Progetti selezionati
Sistema di animazione CryptoNow
Motion design e animazione dell'interfaccia per CryptoNow, realizzati con Trampolin a partire dal design di prodotto fornito.
Animazione dell’interfaccia
Come risponde l'interfaccia.
Wheels ha sviluppato esempi di animazione per i cambiamenti di stato di widget, navigazione e finestre CryptoNow. Le registrazioni mostrano motion design e animazione nel loro contesto, non un’implementazione software in funzione.
Animazione per diversi cambiamenti di stato.
-
01Mantenere visibile l’interfaccia circostante.
Il menu si apre mentre la dashboard resta ferma, mantenendo il collegamento tra il controllo e il contenuto mostrato.
-
02Collegare i passaggi della finestra.
La sequenza di investimento passa tra inserimento, conferma e feedback nella stessa finestra.
Sistema di animazione
Dai test di animazione alle regole di implementazione
Gli esempi sono stati sviluppati come una famiglia coerente di animazioni per stati dell’interfaccia, navigazione e finestre modali. La consegna finale ha tradotto l’animazione in tempi, ritardi e curve di Bézier cubiche precise per l’implementazione.
Navigazione mobile tra livelli diversi
Cambio di livello
Una curva a S netta accompagna la finestra tra i livelli. In uscita la direzione si inverte, mantenendo una relazione spaziale tra gli stati.
- Durata
- 500 ms
- Curva
- cubic-bezier(0.79, 0.00, 0.21, 1.00)
Ingresso di finestre modali e menu a discesa desktop
Assestamento della finestra modale
La visibilità arriva subito, mentre la scala prosegue in un assestamento più lungo dall’85% al 100%. L’interfaccia risponde immediatamente senza fermare il pannello bruscamente.
- Durata
- 1000 ms
- Curva
- cubic-bezier(0.02, 0.93, 0.01, 1.00)
Ingresso della finestra modale mobile
Salita su mobile
Su mobile la finestra modale mantiene la stessa gerarchia, ma cambia traiettoria. Invece di entrare in scala, il pannello sale dal basso e si assesta nella posizione finale.
- Durata
- 1000 ms
- Curva
- cubic-bezier(0.01, 0.88, 0.00, 0.98)
Transizione verticale mascherata
Variazione di prezzo
La transizione del valore usa un movimento verticale mascherato, con una direzione legata alla variazione di prezzo invece di una dissolvenza generica.
- Durata
- 500 ms
- Curva
- cubic-bezier(0.80, 0.00, 0.20, 1.00)
Regole di animazione coerenti rendono riconoscibili i cambiamenti di stato: transizioni familiari aiutano a seguire gerarchia, contesto e variazioni di valore senza dover imparare ogni volta un nuovo comportamento.
Navigazione su mobile.
La registrazione mobile mostra le transizioni tra sezioni nello spazio disponibile sullo schermo. Completa gli esempi desktop e mantiene l’animazione nel contesto dell’interfaccia.
Crediti del progetto
- Cliente
- CryptoNow
- Agenzia / partner di prodotto
- Trampolin d.o.o.
- Punto di partenza
- Interfaccia di prodotto e materiali UI forniti a Wheels da Trampolin d.o.o.
- Wheels Studio
- Motion design, animazione UI e riferimenti di animazione