Animación básica

Las clases de animación .NET Multi-platform App UI (.NET MAUI) tienen como destino diferentes propiedades de elementos visuales, con una animación básica típica que cambia progresivamente una propiedad de un valor a otro durante un período de tiempo.

Las animaciones básicas se pueden crear con métodos de extensión proporcionados por la ViewExtensions clase , en el Microsoft.Maui.Controls espacio de nombres , que operan en VisualElement objetos :

• CancelAnimations cancela todas las animaciones.
• FadeTo anima la Opacity propiedad de un objeto VisualElement.
• RelScaleToaplica un aumento incremental animado o disminución a la Scale propiedad de .VisualElement
• RotateTo anima la Rotation propiedad de un objeto VisualElement.
• RelRotateToaplica un aumento incremental animado o disminución a la Rotation propiedad de .VisualElement
• RotateXTo anima la RotationX propiedad de un objeto VisualElement.
• RotateYTo anima la RotationY propiedad de un objeto VisualElement.
• ScaleTo anima la Scale propiedad de un objeto VisualElement.
• ScaleXTo anima la ScaleX propiedad de un objeto VisualElement.
• ScaleYTo anima la ScaleY propiedad de un objeto VisualElement.
• TranslateToanima las TranslationX propiedades y TranslationY de .VisualElement

De forma predeterminada, cada animación tardará 250 milisegundos. Sin embargo, se puede especificar una duración para cada animación al crear la animación.

Nota:

La ViewExtensions clase también proporciona un método de LayoutTo extensión. Sin embargo, este método está diseñado para ser utilizado por diseños para animar transiciones entre estados de diseño que contienen cambios de tamaño y posición.

Los métodos de extensión de animación de la ViewExtensions clase son asincrónicos y devuelven un Task<bool> objeto . El valor devuelto es false si la animación se completa y true si se cancela la animación. Por lo tanto, cuando las operaciones de animación se combinan con el await operador, es posible crear animaciones secuenciales con métodos de animación posteriores que se ejecutan una vez completado el método anterior. Para obtener más información, consulta Animaciones compuestas.

Si hay un requisito para permitir que una animación se complete en segundo plano, se puede omitir el await operador. En este escenario, los métodos de extensión de animación volverán rápidamente después de iniciar la animación, con la animación que se produce en segundo plano. Esta operación se puede aprovechar al crear animaciones compuestas. Para obtener más información, consulta Animaciones compuestas.

Animaciones únicas

Cada método de extensión de la ViewExtensions clase implementa una única operación de animación que cambia progresivamente una propiedad de un valor a otro durante un período de tiempo.

Rotación

La rotación se realiza con el RotateTo método , que cambia progresivamente la Rotation propiedad de un elemento:

await image.RotateTo(360, 2000);
image.Rotation = 0;

En este ejemplo, una Image instancia se gira hasta 360 grados durante 2 segundos (2000 milisegundos). El RotateTo método obtiene el valor de propiedad actual Rotation del elemento para el inicio de la animación y, a continuación, gira de ese valor a su primer argumento (360). Una vez completada la animación, la propiedad de Rotation la imagen se restablece a 0. Esto garantiza que la Rotation propiedad no permanezca en 360 después de que finalice la animación, lo que impediría rotaciones adicionales.

Nota:

Además del RotateTo método , también RotateXTo hay métodos y RotateYTo que animan las RotationX propiedades y RotationY , respectivamente.

Rotación relativa

La rotación relativa se realiza con el RelRotateTo método , que cambia progresivamente la Rotation propiedad de un elemento:

await image.RelRotateTo(360, 2000);

En este ejemplo, una Image instancia se gira 360 grados desde su posición inicial durante 2 segundos (2000 milisegundos). El RelRotateTo método obtiene el valor de propiedad actual Rotation del elemento para el inicio de la animación y, a continuación, gira de ese valor al valor más su primer argumento (360). Esto garantiza que cada animación siempre será un giro de 360 grados desde la posición inicial. Por lo tanto, si se invoca una nueva animación mientras una animación ya está en curso, comenzará desde la posición actual y puede terminar en una posición que no sea un incremento de 360 grados.

Escalado

El escalado se realiza con el ScaleTo método , que cambia progresivamente la Scale propiedad de un elemento:

await image.ScaleTo(2, 2000);

En este ejemplo, una Image instancia se escala verticalmente hasta dos veces su tamaño durante 2 segundos (2000 milisegundos). El ScaleTo método obtiene el valor de propiedad actual Scale del elemento para el inicio de la animación y, a continuación, escala de ese valor a su primer argumento. Esto tiene el efecto de expandir el tamaño de la imagen al doble de su tamaño.

Nota:

Además del ScaleTo método , también ScaleXTo hay métodos y ScaleYTo que animan las ScaleX propiedades y ScaleY , respectivamente.

Escalado relativo

El escalado relativo se realiza con el RelScaleTo método , que cambia progresivamente la Scale propiedad de un elemento:

await image.RelScaleTo(2, 2000);

En este ejemplo, una Image instancia se escala verticalmente hasta dos veces su tamaño durante 2 segundos (2000 milisegundos). El RelScaleTo método obtiene el valor de propiedad actual Scale del elemento para el inicio de la animación y, a continuación, escala de ese valor al valor más su primer argumento. Esto garantiza que cada animación siempre será un escalado de 2 desde la posición inicial.

Escalado y rotación con anclajes

Las AnchorX propiedades y AnchorY de un elemento visual establecen el centro de escalado o rotación de las Rotation propiedades y Scale . Por lo tanto, sus valores también afectan a los RotateTo métodos y ScaleTo .

Dado que Image se ha colocado en el centro de un diseño, el siguiente ejemplo de código muestra la rotación de la imagen alrededor del centro del diseño estableciendo su AnchorY propiedad :

double radius = Math.Min(absoluteLayout.Width, absoluteLayout.Height) / 2;
image.AnchorY = radius / image.Height;
await image.RotateTo(360, 2000);

Para girar la Image instancia alrededor del centro del diseño, las AnchorX propiedades y AnchorY deben establecerse en valores relativos al ancho y al alto de Image. En este ejemplo, el centro de Image se define para que esté en el centro del diseño, por lo que el valor predeterminado AnchorX de 0,5 no requiere cambiar. Sin embargo, la AnchorY propiedad se vuelve a definir para que sea un valor desde la parte superior del Image hasta el punto central del diseño. Esto garantiza que Image realiza un giro completo de 360 grados alrededor del punto central del diseño.

Traducción

La traducción se realiza con el TranslateTo método , que cambia progresivamente las TranslationX propiedades y TranslationY de un elemento :

await image.TranslateTo(-100, -100, 1000);

En este ejemplo, la Image instancia se traduce horizontal y verticalmente más de 1 segundo (1000 milisegundos). El TranslateTo método traduce simultáneamente las unidades independientes del dispositivo de la imagen 100 a la izquierda y 100 unidades independientes del dispositivo hacia arriba. Esto se debe a que los argumentos primero y segundo son números negativos. Proporcionar números positivos traduciría la imagen a la derecha y hacia abajo.

Importante

Si un elemento se coloca inicialmente fuera de la pantalla y luego se traduce en la pantalla, después de traducir el diseño de entrada del elemento permanece fuera de la pantalla y el usuario no puede interactuar con él. Por lo tanto, se recomienda disponer una vista en su posición final y, a continuación, realizar las traducciones necesarias.

Corrección selectiva

La atenuación se realiza con el FadeTo método , que cambia progresivamente la Opacity propiedad de un elemento:

image.Opacity = 0;
await image.FadeTo(1, 4000);

En este ejemplo, la Image instancia se atenua en más de 4 segundos (4000 milisegundos). El FadeTo método obtiene el valor de propiedad actual Opacity del elemento para el inicio de la animación y, a continuación, desaparece de ese valor a su primer argumento.

Animaciones compuestas

Una animación compuesta es una combinación secuencial de animaciones y se puede crear con el await operador :

await image.TranslateTo(-100, 0, 1000);    // Move image left
await image.TranslateTo(-100, -100, 1000); // Move image diagonally up and left
await image.TranslateTo(100, 100, 2000);   // Move image diagonally down and right
await image.TranslateTo(0, 100, 1000);     // Move image left
await image.TranslateTo(0, 0, 1000);       // Move image up

En este ejemplo, la Image instancia se traduce en 6 segundos (6000 milisegundos). La traducción de Image utiliza cinco animaciones, con el await operador que indica que cada animación se ejecuta secuencialmente. Por lo tanto, los métodos de animación posteriores se ejecutan una vez completado el método anterior.

Animaciones compuestas

Una animación compuesta es una combinación de animaciones donde dos o más animaciones se ejecutan simultáneamente. Las animaciones compuestas se pueden crear combinando animaciones esperadas y no esperadas:

image.RotateTo(360, 4000);
await image.ScaleTo(2, 2000);
await image.ScaleTo(1, 2000);

En este ejemplo, la Image instancia se escala y gira simultáneamente durante 4 segundos (4000 milisegundos). El escalado de Image utiliza dos animaciones secuenciales que se producen al mismo tiempo que la rotación. El RotateTo método se ejecuta sin un await operador y devuelve inmediatamente, con la primera ScaleTo animación que comienza. El await operador del primer ScaleTo método retrasa el segundo ScaleTo método hasta que se haya completado el primer ScaleTo método. En este momento, la RotateTo animación se completa a la mitad y Image se girará 180 grados. Durante los 2 segundos finales (2000 milisegundos), la segunda ScaleTo animación y la RotateTo animación se completan.

Ejecutar varias animaciones simultáneamente

Los Task.WhenAny métodos y Task.WhenAll se pueden usar para ejecutar varios métodos asincrónicos simultáneamente y, por tanto, pueden crear animaciones compuestas. Ambos métodos devuelven un Task objeto y aceptan una colección de métodos que devuelven un Task objeto. El Task.WhenAny método se completa cuando cualquier método de su colección completa la ejecución, como se muestra en el ejemplo de código siguiente:

await Task.WhenAny<bool>
(
  image.RotateTo(360, 4000),
  image.ScaleTo(2, 2000)
);
await image.ScaleTo(1, 2000);

En este ejemplo, el Task.WhenAny método contiene dos tareas. La primera tarea gira una Image instancia de más de 4 segundos (4000 milisegundos) y la segunda tarea escala la imagen durante 2 segundos (2000 milisegundos). Cuando se completa la segunda tarea, se completa la llamada al Task.WhenAny método . Sin embargo, aunque el RotateTo método todavía se está ejecutando, el segundo ScaleTo método puede comenzar.

El Task.WhenAll método se completa cuando se han completado todos los métodos de su colección, como se muestra en el ejemplo de código siguiente:

// 10 minute animation
uint duration = 10 * 60 * 1000;
await Task.WhenAll
(
  image.RotateTo(307 * 360, duration),
  image.RotateXTo(251 * 360, duration),
  image.RotateYTo(199 * 360, duration)
);

En este ejemplo, el Task.WhenAll método contiene tres tareas, cada una de las cuales se ejecuta durante más de 10 minutos. Cada Task uno realiza un número diferente de rotaciones de 360 grados: 307 rotaciones para RotateTo, 251 rotaciones para RotateXToy 199 rotaciones para RotateYTo. Estos valores son números primos, por lo tanto, garantizando que las rotaciones no están sincronizadas y, por lo tanto, no dará lugar a patrones repetitivos.

Cancelación de animaciones

Una aplicación puede cancelar una o varias animaciones con una llamada al método de CancelAnimations extensión:

image.CancelAnimations();

En este ejemplo, todas las animaciones que se ejecutan en la Image instancia se cancelan inmediatamente.