Animazioni di composizione

Le API Windows.UI.Composition consentono di creare, animare, trasformare e modificare oggetti compositor in un livello API unificato. Le animazioni di composizione offrono un modo potente ed efficiente per eseguire animazioni nell'interfaccia utente dell'applicazione. Sono state progettate da zero per garantire che le animazioni vengano eseguite a 60 FPS indipendentemente dal thread dell'interfaccia utente e per offrire la flessibilità di creare esperienze straordinarie usando non solo il tempo, ma l'input e altre proprietà, per guidare le animazioni.

Movimento in Windows

Progetta il movimento come in un film. Le transizioni lineari mantengono l'attenzione sulla storia e danno vita alle esperienze. Possiamo trasferire queste sensazioni nei nostri progetti, consentendo agli utenti di passare da un'attività a un'altra con effetti cinematografici. Il movimento è spesso il fattore di differenziazione tra un semplice interfaccia utente e un'esperienza utente.

Come blocco predefinito fondamentale della piattaforma dell'interfaccia utente di Windows, CompositionAnimation offre un modo potente ed efficiente per creare esperienze di movimento nell'interfaccia utente dell'applicazione. Il motore di animazione è stato progettato da zero per garantire che il movimento venga eseguito a 60 FPS, indipendentemente dal thread dell'interfaccia utente. Queste animazioni sono progettate per offrire la flessibilità necessaria per creare esperienze di movimento innovative basate su tempo, input e altre proprietà.

Esempi di movimento

Ecco alcuni esempi di movimento in un'app.

In questo caso, un'app usa un'animazione connessa per animare un'immagine dell'elemento mentre "continua" per diventare parte dell'intestazione della pagina successiva. L'effetto consente di mantenere il contesto utente durante la transizione.

An example of Connected Animation

In questo caso, un effetto parallasse visivo sposta oggetti diversi a velocità diverse quando l'interfaccia utente scorre o esegue la panoramica per creare una sensazione di profondità, prospettiva e movimento.

An example of parallax with a list and background image

Uso di CompositionAnimation per creare il movimento

Per generare movimento nell'interfaccia utente, gli sviluppatori possono accedere alle animazioni in XAML o nel livello visivo. Le animazioni al livello visivo offrono agli sviluppatori una serie di vantaggi:

  • Prestazioni: anziché creare un'animazione tradizionale con associazione a thread dell'interfaccia utente, le animazioni sulla piattaforma dell'interfaccia utente di Windows operano a 60 FPS su un thread indipendente, consentendo esperienze di movimento fluide.
  • Modello di creazione di modelli: le animazioni nel livello dell'interfaccia utente di Windows sono modelli, ovvero possono usare un'unica animazione su più oggetti e modificare proprietà o parametri senza preoccuparsi di ostacolare gli usi precedenti.
  • Personalizzazione: il livello dell'interfaccia utente di Windows non solo semplifica la creazione di un'interfaccia utente accattivante, ma con una gamma completa di tipi di animazione è possibile creare esperienze nuove e straordinarie con una sfumatura di personalizzazioni

Gli sviluppatori che creano esperienze a livello di interfaccia utente di Windows hanno accesso a una grande varietà di concetti di animazione per dare vita ai progetti. È possibile usare uno di questi concetti per animare una proprietà o un componente sottocanale (se applicabile) di qualsiasi CompositionObject.

Nota

Non tutte le proprietà di un CompositionObject sono animabili. Fare riferimento alla documentazione del singolo CompositionObject per determinare se una proprietà è animabile.

Nota

Il termine sottocanale fa riferimento a una forma di componente di una proprietà. Ad esempio, il sottocanale X o XY di una proprietà Vector3 Offset.

Concetto di animazione Descrizione
Movimento basato sul tempo con KeyFrameAnimation KeyFrameAnimation vengono usate per controllare direttamente l'intera esperienza di movimento in un periodo di tempo. Gli sviluppatori descrivono l'inizio, la fine, l'interpolazione di un movimento e la durata in una tradizionale modalità con fotogrammi chiave.
Movimento relativo con ExpressionAnimation Le ExpressionAnimation vengono usate per descrivere il modo in cui un movimento della proprietà di un oggetto deve essere guidato rispetto alla proprietà di un altro oggetto. Gli sviluppatori definiscono un'equazione matematica che definisce la relazione basata sui riferimenti.
ImplicitAnimations Queste animazioni sono basate su trigger e vengono definite separatamente dalla logica principale dell'app. Le ImplicitAnimation vengono usate per descrivere come e quando si verificano animazioni come risposta alle modifiche dirette delle proprietà.
Movimento basato su input con animazioni di input Le animazioni di input illustrano un set di scenari che consentono agli sviluppatori di descrivere il movimento basato sulla manipolazione tramite tocco o altre modalità di input. Queste animazioni sono basate sull'input o sugli input dell'utente attivi.
Movimento basato sulla fisica con NaturalMotionAnimation Le NaturalMotionAnimation vengono usate per descrivere esperienze di movimento naturali e familiari basate sul movimento guidato dalla forza reale. Invece di definire il tempo, gli sviluppatori definiscono le caratteristiche del movimento (ad esempio, il rapporto di smorzamento per le molle)