Animazioni di movimento naturale

Questo articolo fornisce una breve panoramica dello spazio NaturalMotionAnimation e come considerare concettualmente l'uso di questi tipi di animazioni nell'interfaccia utente.

Rendere il movimento familiare e naturale

Le grandi app sono quelle che creano esperienze che catturano e mantengono l'attenzione dell'utente e aiutano gli utenti attraverso le attività. Il movimento è il fattore chiave di differenziazione che separa un'interfaccia utente da un'esperienza utente, che elicita una connessione tra gli utenti e l'applicazione con cui interagiscono. Migliore è la connessione, maggiore coinvolgimento e soddisfazione degli utenti finali.

Un modo in cui il movimento può aiutare a creare questa connessione consiste nel creare esperienze che sembrano familiari agli utenti. Gli utenti hanno un'aspettativa inconscia di come percepiscono il movimento che si basa su esperienze di vita reale. Vediamo come gli oggetti scivolano sul pavimento, cadono fuori dal tavolo, rimbalzano l'uno nell'altro e oscillano con una molla. Movimento che sfrutta questa aspettativa basandosi sulla fisica reale sembra e si sente più naturale nei nostri occhi. Il movimento diventa più naturale e interattivo, ma più importante, l'intera esperienza diventa più memorabile e deliziosa.

Il risultato netto è un maggiore coinvolgimento e una maggiore fidelizzazione degli utenti con l'app.

Bilanciamento del controllo e del dinamismo

Nell'interfaccia utente tradizionale, KeyFrameAnimations sono il modo predominante per descrivere il movimento. I KeyFrames hanno fornito il massimo controllo ai progettisti e agli sviluppatori per definire l'inizio, la fine e l'interpolazione. Anche se questo è molto utile in molti casi, le animazioni con fotogrammi chiave non sono molto dinamiche; il movimento non è adattivo e sembra uguale in qualsiasi condizione.

All'altra estremità dello spettro, ci sono simulazioni spesso viste nei motori di gioco e fisica. Queste esperienze sono spesso le esperienze più simili alla vita e dinamiche con cui gli utenti interagiscono, creando quel senso di atmosfera e casualità che gli utenti vedono ogni giorno. Anche se questo rende il movimento più vivo e dinamico, i progettisti e gli sviluppatori hanno meno controllo, rendendo quindi più difficile l'integrazione nell'interfaccia utente tradizionale.

NaturalMotionAnimations esiste per aiutare a colmare questa divisione, consentendo un equilibrio di controllo per gli elementi importanti di un'animazione come inizio/fine, ma mantenendo il movimento che sembra naturale e dinamico.

Uso di NaturalMotionAnimations

In WinUI e Windows App SDK è possibile accedere a un'esperienza di movimento naturale: animazioni a molla. Vedi Animazioni a molla per una procedura più dettagliata e approfondita delle molle.

Questo tipo di movimento viene ottenuto usando il nuovo NaturalMotionAnimation : un nuovo tipo di animazione incentrato sull'abilitazione degli sviluppatori di creare un movimento di sensazione più familiare e naturale nell'interfaccia utente, con un equilibrio di controllo e dinamismo. Espongono le funzionalità seguenti:

• Definire i valori iniziale e finale.
• Definire InitialVelocity e associare l'input con InteractionTracker.
• Definisci proprietà specifiche del movimento (ad esempio DampingRatio per le molle).

Formula generale per iniziare:

1. Creare NaturalMotionAnimation da Compositor usando uno dei metodi Create .
2. Definire le proprietà dell'animazione.
3. Passare NaturalMotionAnimation come parametro alla chiamata StartAnimation di un CompositionObject.
   • In alternativa, impostare la proprietà Motion di un InertiaModifier di InteractionTracker.

Esempio di base che utilizza una NaturalMotionAnimation a molla per far "rimbalzare" un oggetto visivo verso una nuova posizione di offset X.

_springAnimation = _compositor.CreateSpringScalarAnimation();
_springAnimation.Period = TimeSpan.FromSeconds(0.07);
_springAnimation.DelayTime = TimeSpan.FromSeconds(1);
_springAnimation.EndPoint = 500f;
sectionNav.StartAnimation("Offset.X", _springAnimation);