Animazione di elementi XAML con animazioni di composizione
Questo articolo presenta nuove proprietà che consentono di animare un OGGETTO UIElement XAML con le prestazioni delle animazioni di composizione e la facilità di impostazione delle proprietà XAML.
Prima di Windows 10, versione 1809, hai avuto 2 opzioni per creare animazioni nelle tue app UWP:
- usa costrutti XAML come animazioni con storyboard o le classi *ThemeTransition e *ThemeAnimation nello spazio dei nomi Windows.UI.Xaml.Media.Animation.
- usare animazioni di composizione come descritto in Uso del livello visivo con XAML.
L'uso del livello visivo offre prestazioni migliori rispetto all'uso dei costrutti XAML. Tuttavia, l'uso di ElementCompositionPreview per ottenere l'oggetto Visivo di composizione sottostante dell'elemento e quindi l'animazione dell'oggetto Visivo con le animazioni di composizione, è più complesso da usare.
A partire da Windows 10, versione 1809, puoi animare le proprietà in un oggetto UIElement direttamente usando animazioni di composizione senza dover ottenere l'oggetto visivo di composizione sottostante.
Nota
Per usare queste proprietà in UIElement, la versione di destinazione del progetto UWP deve essere 1809 o successiva. Per altre informazioni sulla configurazione del progetto di Visual Studio, vedi App adattive per la versione.
Esempi
| Raccolta WinUI 2 | |
|---|---|
 |
Se è installata l'app WinUI 2 Gallery, fare clic qui per aprire l'app e vedere il controllo Animation Interop stato attivo in azione. |
Le nuove proprietà di rendering sostituiscono le proprietà di rendering precedenti
Questa tabella mostra le proprietà che è possibile usare per modificare il rendering di un UIElement, che può anche essere animato con CompositionAnimation.
| Proprietà | Type | Descrizione |
|---|---|---|
| Opacità | Double | Grado di opacità dell'oggetto |
| Traduzione | Vector3 | Spostare la posizione X/Y/Z dell'elemento |
| TransformMatrix | Matrix4x4 | Matrice di trasformazione da applicare all'elemento |
| Ridimensiona | Vector3 | Ridimensionare l'elemento, centrato su CenterPoint |
| Rotazione | Float | Ruotare l'elemento intorno a RotationAxis e CenterPoint |
| RotationAxis | Vector3 | Asse di rotazione |
| Centerpoint | Vector3 | Il punto centrale della scala e della rotazione |
Il valore della proprietà TransformMatrix viene combinato con le proprietà Scale, Rotation e Translation nell'ordine seguente: TransformMatrix, Scale, Rotation, Translation.
Queste proprietà non influiscono sul layout dell'elemento, quindi la modifica di queste proprietà non causa un nuovo passaggio Measure/Arrange.
Queste proprietà hanno lo stesso scopo e lo stesso comportamento delle proprietà con nome simile nella classe Visual di composizione (ad eccezione di Translation, che non si trova in Visual).
Esempio: Impostazione della proprietà Scale
In questo esempio viene illustrato come impostare la proprietà Scale su un controllo Button.
<Button Scale="2,2,1" Content="I am a large button" />
var button = new Button();
button.Content = "I am a large button";
button.Scale = new Vector3(2.0f,2.0f,1.0f);
Esclusività reciproca tra proprietà nuove e vecchie
Nota
La proprietà Opacity non applica l'esclusività reciproca descritta in questa sezione. Usa la stessa proprietà Opacity se usi animazioni XAML o di composizione.
Le proprietà che possono essere animate con compositionAnimation sono sostituzioni per diverse proprietà UIElement esistenti:
Quando si imposta (o si anima) una delle nuove proprietà, non è possibile utilizzare le proprietà precedenti. Al contrario, quando si imposta (o si anima) una delle vecchie proprietà, non è possibile utilizzare quelle nuove.
Non è inoltre possibile utilizzare le nuove proprietà se si usa ElementCompositionPreview per ottenere e gestire manualmente l'oggetto Visivo usando questi metodi:
Importante
Se si tenta di combinare l'uso dei due set di proprietà, la chiamata API avrà esito negativo e genererà un messaggio di errore.
È possibile passare da un set di proprietà cancellandole, anche se per semplicità non è consigliabile. Se la proprietà è supportata da dependencyProperty (ad esempio, UIElement.Projection è supportata da UIElement.ProjectionProperty), chiama ClearValue per ripristinarlo nello stato "inutilizzato". In caso contrario, ad esempio la proprietà Scale, impostare la proprietà sul valore predefinito.
Animazione delle proprietà UIElement con CompositionAnimation
È possibile animare le proprietà di rendering elencate nella tabella con compositionAnimation. Queste proprietà possono anche essere referenziate da ExpressionAnimation.
Usare i metodi StartAnimation e StopAnimation in UIElement per animare le proprietà UIElement.
Esempio: Animazione della proprietà Scale con Vector3KeyFrameAnimation
In questo esempio viene illustrato come animare la scala di un pulsante.
var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(1.0f, new Vector3(2.0f,2.0f,1.0f));
animation.Duration = TimeSpan.FromSeconds(1);
animation.Target = "Scale";
button.StartAnimation(animation);
Esempio: Animazione della proprietà Scale con expressionAnimation
Una pagina ha due pulsanti. Il secondo pulsante viene animato per essere due volte più grande (tramite scala) come primo pulsante.
<Button x:Name="sourceButton" Content="Source"/>
<Button x:Name="destinationButton" Content="Destination"/>
var compositor = Window.Current.Compositor;
var animation = compositor.CreateExpressionAnimation("sourceButton.Scale*2");
animation.SetExpressionReferenceParameter("sourceButton", sourceButton);
animation.Target = "Scale";
destinationButton.StartAnimation(animation);
