Animar elementos XAML con animaciones de composición
En este artículo se presentan nuevas propiedades que te permiten animar un UIElement XAML con el rendimiento de las animaciones de composición y la facilidad de establecer propiedades XAML.
Antes de Windows 10, versión 1809, tenías 2 opciones para compilar animaciones en tus aplicaciones para UWP:
- usa construcciones XAML como animaciones con guion gráfico o las clases *ThemeTransition y *ThemeAnimation en el espacio de nombres Windows.UI.Xaml.Media.Animation.
- usa animaciones de composición como se describe en Uso de la capa visual con XAML.
El uso de la capa visual proporciona un mejor rendimiento que el uso de las construcciones XAML. Pero el uso de ElementCompositionPreview para obtener el objeto visual de composición subyacente del elemento y, a continuación, animar el objeto visual con animaciones de composición, es más complejo de usar.
A partir de Windows 10, versión 1809, puedes animar propiedades en un UIElement directamente mediante animaciones de composición sin necesidad de obtener el objeto visual de composición subyacente.
Nota:
Para usar estas propiedades en UIElement, la versión de destino del proyecto para UWP debe ser 1809 o posterior. Para obtener más información sobre cómo configurar la versión del proyecto, consulta Aplicaciones adaptables de versiones.
Ejemplos
| WinUI 2 Gallery | |
|---|---|
 |
Si tienes instalada la aplicación Galería de WinUI 2, haz clic aquí para abrir la aplicación y ver Interoperabilidad de animación en acción. |
Las nuevas propiedades de representación reemplazan las propiedades de representación antiguas
En esta tabla se muestran las propiedades que puede usar para modificar la representación de un UIElement, que también se puede animar con compositionAnimation.
| Propiedad | Tipo | Descripción |
|---|---|---|
| Opacity | Double | Grado de opacidad del objeto |
| Traducción | Vector3 | Desplazar la posición X/Y/Z del elemento |
| TransformMatrix | Matrix4x4 | Matriz de transformación que se va a aplicar al elemento |
| Escala | Vector3 | Escalado del elemento, centrado en CenterPoint |
| Rotación | Flotante | Girar el elemento alrededor de RotationAxis y CenterPoint |
| RotationAxis | Vector3 | Eje de rotación |
| CenterPoint | Vector3 | El punto central de escala y rotación |
El valor de la propiedad TransformMatrix se combina con las propiedades Scale, Rotation y Translation en el orden siguiente: TransformMatrix, Scale, Rotation, Translation.
Estas propiedades no afectan al diseño del elemento, por lo que modificar estas propiedades no provoca un nuevo pase De organización de medida/.
Estas propiedades tienen el mismo propósito y comportamiento que las propiedades con nombre similar en la clase Visual de composición (excepto translation, que no está en Visual).
Ejemplo: Establecimiento de la propiedad Scale
En este ejemplo se muestra cómo establecer la propiedad Scale en un botón.
<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);
Exclusividad mutua entre las propiedades nuevas y antiguas
Nota:
La propiedad Opacity no exige la exclusividad mutua descrita en esta sección. Usas la misma propiedad Opacity tanto si usas animaciones xaml como de composición.
Las propiedades que se pueden animar con compositionAnimation son reemplazos de varias propiedades UIElement existentes:
Al establecer (o animar) cualquiera de las nuevas propiedades, no puede usar las propiedades antiguas. Por el contrario, si establece (o anima) cualquiera de las propiedades antiguas, no puede usar las nuevas propiedades.
Tampoco puede usar las nuevas propiedades si usa ElementCompositionPreview para obtener y administrar el objeto Visual usted mismo mediante estos métodos:
Importante
Si intenta mezclar el uso de los dos conjuntos de propiedades, se producirá un error en la llamada API y se producirá un mensaje de error.
Es posible cambiar de un conjunto de propiedades borrandolas, aunque por motivos de simplicidad no se recomienda. Si la propiedad está respaldada por dependencyProperty (por ejemplo, UIElement.Projection está respaldada por UIElement.ProjectionProperty), llame a ClearValue para restaurarla en su estado "sin usar". De lo contrario (por ejemplo, la propiedad Scale), establezca la propiedad en su valor predeterminado.
Animar las propiedades UIElement con CompositionAnimation
Puede animar las propiedades de representación enumeradas en la tabla con compositionAnimation. También se puede hacer referencia a estas propiedades mediante expressionAnimation.
Use los métodos StartAnimation y StopAnimation en UIElement para animar las propiedades UIElement.
Ejemplo: Animar la propiedad Scale con un Vector3KeyFrameAnimation
En este ejemplo se muestra cómo animar la escala de un botón.
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);
Ejemplo: Animar la propiedad Scale con expressionAnimation
Una página tiene dos botones. El segundo botón anima a ser el doble de grande (a través de la escala) como primer botón.
<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);
