Animação básica

As classes de animação da interface do usuário de aplicativo multiplataforma do .NET (.NET MAUI) visam propriedades diferentes de elementos visuais, com uma animação básica típica alterando progressivamente uma propriedade de um valor para outro durante um período de tempo.

Animações básicas podem ser criadas com métodos de extensão fornecidos pela ViewExtensions classe , que operam em VisualElement objetos:

• CancelAnimations cancela todas as animações.
• FadeTo anima a Opacity propriedade de um VisualElement.
• RelScaleTo aplica um aumento incremental animado ou diminuição à Scale propriedade de um VisualElement.
• RotateTo anima a Rotation propriedade de um VisualElement.
• RelRotateTo aplica um aumento incremental animado ou diminuição à Rotation propriedade de um VisualElement.
• RotateXTo anima a RotationX propriedade de um VisualElement.
• RotateYTo anima a RotationY propriedade de um VisualElement.
• ScaleTo anima a Scale propriedade de um VisualElement.
• ScaleXTo anima a ScaleX propriedade de um VisualElement.
• ScaleYTo anima a ScaleY propriedade de um VisualElement.
• TranslateTo anima as TranslationX propriedades e TranslationY de um VisualElement.

Por padrão, cada animação levará 250 milissegundos. No entanto, uma duração para cada animação pode ser especificada ao criar a animação.

Observação

A ViewExtensions classe também fornece um método de LayoutTo extensão. No entanto, esse método destina-se a ser usado por layouts para animar transições entre estados de layout que contêm alterações de tamanho e posição.

Os métodos de extensão de animação na ViewExtensions classe são todos assíncronos e retornam um Task<bool> objeto . O valor retornado será false se a animação for concluída e true se a animação for cancelada. Portanto, quando as operações de animação são combinadas com o await operador, torna-se possível criar animações sequenciais com métodos de animação subsequentes em execução após a conclusão do método anterior. Para obter mais informações, consulte Animações compostas.

Se houver um requisito para permitir que uma animação seja concluída em segundo plano, o await operador poderá ser omitido. Nesse cenário, os métodos de extensão de animação retornarão rapidamente após o início da animação, com a animação ocorrendo em segundo plano. Essa operação pode ser aproveitada ao criar animações compostas. Para obter mais informações, consulte Animações compostas.

Animações simples

Cada método de extensão na ViewExtensions classe implementa uma única operação de animação que altera progressivamente uma propriedade de um valor para outro durante um período de tempo.

Rotação

A rotação é executada com o RotateTo método , que altera progressivamente a Rotation propriedade de um elemento:

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

Neste exemplo, uma Image instância é girada até 360 graus em 2 segundos (2000 milissegundos). O RotateTo método obtém o valor da propriedade atual Rotation do elemento para o início da animação e gira desse valor para seu primeiro argumento (360). Depois que a animação for concluída, a propriedade da Rotation imagem será redefinida para 0. Isso garante que a Rotation propriedade não permaneça em 360 após a conclusão da animação, o que evitaria rotações adicionais.

Observação

Além do RotateTo método , também há RotateXTo métodos e RotateYTo que animam as RotationX propriedades e RotationY , respectivamente.

Rotação relativa

A rotação relativa é executada com o RelRotateTo método , que altera progressivamente a Rotation propriedade de um elemento:

await image.RelRotateTo(360, 2000);

Neste exemplo, uma Image instância é girada 360 graus de sua posição inicial em 2 segundos (2000 milissegundos). O RelRotateTo método obtém o valor da propriedade atual Rotation do elemento para o início da animação e gira desse valor para o valor mais seu primeiro argumento (360). Isso garante que cada animação sempre será uma rotação de 360 graus da posição inicial. Portanto, se uma nova animação for invocada enquanto uma animação já estiver em andamento, ela começará da posição atual e poderá terminar em uma posição que não seja um incremento de 360 graus.

Scaling

O dimensionamento é executado com o ScaleTo método , que altera progressivamente a Scale propriedade de um elemento:

await image.ScaleTo(2, 2000);

Neste exemplo, uma Image instância é dimensionada para o dobro de seu tamanho em 2 segundos (2000 milissegundos). O ScaleTo método obtém o valor da propriedade atual Scale do elemento para o início da animação e, em seguida, dimensiona desse valor para seu primeiro argumento. Isso tem o efeito de expandir o tamanho da imagem para o dobro de seu tamanho.

Observação

Além do ScaleTo método , também há ScaleXTo métodos e ScaleYTo que animam as ScaleX propriedades e ScaleY , respectivamente.

Dimensionamento relativo

O dimensionamento relativo é executado com o RelScaleTo método , que altera progressivamente a Scale propriedade de um elemento:

await image.RelScaleTo(2, 2000);

Neste exemplo, uma Image instância é dimensionada para o dobro de seu tamanho em 2 segundos (2000 milissegundos). O RelScaleTo método obtém o valor da propriedade atual Scale do elemento para o início da animação e, em seguida, dimensiona desse valor para o valor mais seu primeiro argumento. Isso garante que cada animação sempre será um dimensionamento de 2 da posição inicial.

Escala e rotação com âncoras

As AnchorX propriedades e AnchorY de um elemento visual definem o centro de escala ou rotação para as Rotation propriedades e Scale . Portanto, seus valores também afetam os RotateTo métodos e ScaleTo .

Dado um Image que foi colocado no centro de um layout, o exemplo de código a seguir demonstra a rotação da imagem ao redor do centro do layout definindo sua AnchorY propriedade:

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

Para girar a Image instância ao redor do centro do layout, as AnchorX propriedades e AnchorY devem ser definidas como valores relativos à largura e altura do Image. Neste exemplo, o centro do Image é definido como no centro do layout e, portanto, o valor padrão AnchorX de 0,5 não requer alteração. No entanto, a AnchorY propriedade é redefinida para ser um valor da parte superior do Image para o ponto central do layout. Isso garante que o Image faça uma rotação completa de 360 graus em torno do ponto central do layout.

Tradução

A tradução é executada com o TranslateTo método , que altera progressivamente as TranslationX propriedades e TranslationY de um elemento:

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

Neste exemplo, a Image instância é convertida horizontal e verticalmente em mais de 1 segundo (1000 milissegundos). O TranslateTo método converte simultaneamente a imagem 100 unidades independentes de dispositivo para a esquerda e 100 unidades independentes de dispositivo para cima. Isso ocorre porque o primeiro e o segundo argumentos são números negativos. Fornecer números positivos traduziria a imagem para a direita e para baixo.

Importante

Se um elemento for inicialmente colocado fora da tela e convertido na tela, após a tradução, o layout de entrada do elemento permanecerá fora da tela e o usuário não poderá interagir com ele. Portanto, é recomendável que uma exibição seja colocada em sua posição final e, em seguida, todas as traduções necessárias sejam executadas.

Esmaecimento

O desbotamento é executado com o FadeTo método , que altera progressivamente a Opacity propriedade de um elemento:

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

Neste exemplo, a Image instância desaparece em mais de 4 segundos (4000 milissegundos). O FadeTo método obtém o valor da propriedade atual Opacity do elemento para o início da animação e, em seguida, esmaece desse valor para seu primeiro argumento.

Animações compostas

Uma animação composta é uma combinação sequencial de animações e pode ser criada com o 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

Neste exemplo, a Image instância é convertida em 6 segundos (6000 milissegundos). A tradução do Image usa cinco animações, com o await operador indicando que cada animação é executada sequencialmente. Portanto, os métodos de animação subsequentes são executados após a conclusão do método anterior.

Animações compostas

Uma animação composta é uma combinação de animações em que duas ou mais animações são executadas simultaneamente. As animações compostas podem ser criadas combinando animações aguardadas e não aguardadas:

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

Neste exemplo, a Image instância é dimensionada e girada simultaneamente em 4 segundos (4000 milissegundos). O dimensionamento do Image usa duas animações sequenciais que ocorrem ao mesmo tempo que a rotação. O RotateTo método é executado sem um await operador e retorna imediatamente, com a primeira ScaleTo animação começando. O await operador no primeiro ScaleTo método atrasa o segundo ScaleTo método até que o primeiro ScaleTo método seja concluído. Neste ponto, a RotateTo animação é metade concluída e a Image será girada 180 graus. Durante os 2 segundos finais (2000 milissegundos), a segunda ScaleTo animação e a RotateTo animação são concluídas.

Executar várias animações simultaneamente

Os Task.WhenAny métodos e Task.WhenAll podem ser usados para executar vários métodos assíncronos simultaneamente e, portanto, podem criar animações compostas. Ambos os métodos retornam um Task objeto e aceitam uma coleção de métodos que retornam um Task objeto. O Task.WhenAny método é concluído quando qualquer método em sua coleção conclui a execução, conforme demonstrado no exemplo de código a seguir:

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

Neste exemplo, o Task.WhenAny método contém duas tarefas. A primeira tarefa gira uma Image instância em 4 segundos (4000 milissegundos) e a segunda tarefa dimensiona a imagem em 2 segundos (2.000 milissegundos). Quando a segunda tarefa for concluída, a chamada de Task.WhenAny método será concluída. No entanto, mesmo que o RotateTo método ainda esteja em execução, o segundo ScaleTo método pode começar.

O Task.WhenAll método é concluído quando todos os métodos em sua coleção são concluídos, conforme demonstrado no exemplo de código a seguir:

// 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)
);

Neste exemplo, o Task.WhenAll método contém três tarefas, cada uma executa mais de 10 minutos. Cada Task um faz um número diferente de rotações de 360 graus – 307 rotações para RotateTo, 251 rotações para RotateXToe 199 rotações para RotateYTo. Esses valores são números primos, garantindo, portanto, que as rotações não sejam sincronizadas e, portanto, não resultarão em padrões repetitivos.

Cancelando animações

Um aplicativo pode cancelar uma ou mais animações com uma chamada para o método de CancelAnimations extensão:

image.CancelAnimations();

Neste exemplo, todas as animações em execução na Image instância são canceladas imediatamente.