Animazioni guidate dall'input

Questo articolo fornisce un'introduzione all'API InputAnimation nelle app WinUI e Windows App SDK e consiglia come usare questi tipi di animazioni nell'interfaccia utente.

Prerequisiti

In questo caso si presuppone che si abbia familiarità con i concetti illustrati in questi articoli:

• Animazioni basate sulle relazioni

Movimento uniforme basato sulle interazioni utente

Nel linguaggio Fluent Design, l'interazione tra utenti finali e app è della massima importanza. Le app non devono solo avere l'aspetto giusto, ma anche rispondere in modo naturale e dinamico agli utenti che interagiscono con loro. Ciò significa che quando un dito viene posizionato sullo schermo, l'interfaccia utente deve reagire in modo fluido alle variazioni dell'input; lo scorrimento dovrebbe risultare regolare e seguire il movimento del dito sullo schermo.

Creazione di un'interfaccia utente che risponde dinamicamente e fluidamente ai risultati dell'input dell'utente con un maggiore coinvolgimento degli utenti: il movimento ora non solo sembra buono, ma è naturale quando gli utenti interagiscono con le diverse esperienze dell'interfaccia utente. Ciò consente agli utenti finali di connettersi più facilmente con l'applicazione, rendendo l'esperienza più memorabile e deliziosa.

Espandere oltre il semplice tocco

Anche se il tocco è una delle interfacce più comuni usate dagli utenti finali per modificare il contenuto dell'interfaccia utente, useranno anche varie altre modalità di input, ad esempio mouse e penna. In questi casi, è importante che gli utenti finali percepiscano che l'interfaccia utente risponda dinamicamente al proprio input, indipendentemente dalla modalità di input che scelgono di usare. Dovresti essere consapevole delle diverse modalità di input durante la progettazione di esperienze di movimento basate su input.

Diverse esperienze di movimento guidate dall'input

Lo spazio InputAnimation offre diverse esperienze per creare un movimento in risposta dinamica. Come il resto del sistema di animazione di composizione di Windows App SDK, queste animazioni guidate dall'input operano su un thread indipendente, che contribuisce all'esperienza di movimento dinamica. Tuttavia, in alcuni casi in cui l'esperienza sfrutta i controlli e i componenti XAML esistenti, le parti di tali esperienze sono ancora associate al thread dell'interfaccia utente.

Quando si creano animazioni di movimento dinamiche basate su input, è possibile creare tre esperienze principali:

1. Miglioramento delle esperienze ScrollView esistenti: abilita la posizione di uno ScrollViewer XAML per guidare esperienze di animazione dinamica.
2. Esperienze basate sulla posizione del puntatore: usa la posizione di un cursore su un UIElement hit test per guidare esperienze di animazione dinamiche.
3. Esperienze di manipolazione personalizzate con InteractionTracker: consente di creare esperienze di manipolazione completamente personalizzate e fuori thread con InteractionTracker, ad esempio un'area di disegno di scorrimento/zoom.

Miglioramento delle esperienze ScrollViewer esistenti

Uno dei modi comuni per creare esperienze più dinamiche consiste nel costruire su un controllo ScrollViewer XAML esistente. In queste situazioni, puoi sfruttare la posizione di scorrimento di scrollViewer per creare componenti aggiuntivi dell'interfaccia utente che rendono più dinamica un'esperienza di scorrimento semplice. Alcuni esempi includono intestazioni fisse/automatiche e effetto parallasse.

Quando si creano questi tipi di esperienze, è disponibile una formula generale da seguire:

1. Accedi al ScrollManipulationPropertySet del controllo ScrollViewer XAML per generare un'animazione.
   • Operazione eseguita tramite l'API ElementCompositionPreview.GetScrollViewerManipulationPropertySet(elemento UIElement)
   • Restituisce un compositionPropertySet contenente una proprietà denominata Translation
2. Creare un'ExpressionAnimation di composizione con un'equazione che fa riferimento alla proprietà Translation.
3. Avviare l'animazione sulla proprietà di CompositionObject.

Per altre info sulla creazione di queste esperienze, vedi Migliorare le esperienze ScrollViewer esistenti.

Esperienze basate sulla posizione del puntatore

Un'altra esperienza dinamica comune che riguarda l'input consiste nell'guidare un'animazione in base alla posizione di un puntatore, ad esempio un cursore del mouse. In queste situazioni, gli sviluppatori sfruttano la posizione di un cursore quando viene eseguito il test all'interno di un UIElement XAML che rende possibile la creazione di esperienze come Spotlight Reveal.

Quando si creano questi tipi di esperienze, è disponibile una formula generale da seguire:

1. Accedi a PointerPositionPropertySet di un elemento UIElement XAML di cui vuoi conoscere la posizione del cursore quando viene testato il punto d'interesse.
   • Fatto tramite l'API ElementCompositionPreview.GetPointerPositionPropertySet(UIElement)
   • Restituisce un compositionPropertySet contenente una proprietà denominata Position
2. Creare un oggetto CompositionExpressionAnimation con un'equazione che fa riferimento alla proprietà Position.
3. Avvia l'animazione sulla proprietà di CompositionObject.

Esperienze di manipolazione personalizzate con InteractionTracker

Uno dei problemi con l'utilizzo di uno ScrollViewer XAML è che è vincolato al thread dell'interfaccia utente. Di conseguenza, l'esperienza di scorrimento e zoom può spesso subire ritardi e instabilità se il thread dell'interfaccia utente diventa occupato, determinando un'esperienza poco piacevole. Inoltre, non è possibile personalizzare molti aspetti dell'esperienza ScrollViewer. InteractionTracker è stato creato per risolvere entrambi i problemi fornendo un set di blocchi predefiniti per creare esperienze di manipolazione personalizzate eseguite su un thread indipendente.

Quando si creano esperienze con InteractionTracker, è disponibile una formula generale da seguire:

1. Creare l'oggetto InteractionTracker e definirne le proprietà.
2. Creare VisualInteractionSources per qualsiasi CompositionVisual che deve acquisire l'input da utilizzare per InteractionTracker.
3. Creare un'ExpressionAnimation di composizione con un'equazione che fa riferimento alla proprietà Position di InteractionTracker.
4. Avvia l'animazione sulla proprietà visiva di composizione che desideri essere guidata da InteractionTracker.