Základní animace

Třídy animace .NET Multi-Platform App UI (.NET MAUI) cílí na různé vlastnosti vizuálních prvků, přičemž typická základní animace postupně mění vlastnost z jedné hodnoty na jinou v průběhu časového období.

Základní animace lze vytvořit pomocí rozšiřujících metod poskytovaných ViewExtensions třídou v Microsoft.Maui.Controls oboru názvů, který pracuje s VisualElement objekty:

• CancelAnimations zruší všechny animace.
• FadeTo animuje Opacity vlastnost objektu VisualElement.
• RelScaleTo použije animované přírůstkové zvýšení nebo snížení Scale vlastnosti VisualElement.
• RotateTo animuje Rotation vlastnost objektu VisualElement.
• RelRotateTo použije animované přírůstkové zvýšení nebo snížení Rotation vlastnosti VisualElement.
• RotateXTo animuje RotationX vlastnost objektu VisualElement.
• RotateYTo animuje RotationY vlastnost objektu VisualElement.
• ScaleTo animuje Scale vlastnost objektu VisualElement.
• ScaleXTo animuje ScaleX vlastnost objektu VisualElement.
• ScaleYTo animuje ScaleY vlastnost objektu VisualElement.
• TranslateTo animuje TranslationX vlastnosti TranslationY a vlastnosti VisualElement.

Ve výchozím nastavení bude každá animace trvat 250 milisekund. Při vytváření animace se ale dá určit doba trvání jednotlivých animací.

Poznámka

Třída ViewExtensions také poskytuje metodu LayoutTo rozšíření. Tato metoda je však určena k použití rozložení k animaci přechodů mezi stavy rozložení, které obsahují změny velikosti a umístění.

Metody rozšíření animace ve ViewExtensions třídě jsou všechny asynchronní a vrací Task<bool> objekt. Vrácená hodnota je false , pokud se animace dokončí a true pokud se animace zruší. Proto když jsou operace animace kombinovány s operátorem await , je možné vytvořit sekvenční animace s následnými metodami animace spouštěné po dokončení předchozí metody. Další informace najdete v tématu Složené animace.

Pokud je potřeba nechat animaci na pozadí dokončit, await můžete operátor vynechat. V tomto scénáři se metody rozšíření animace rychle vrátí po zahájení animace s animací na pozadí. Tuto operaci můžete využít při vytváření složených animací. Další informace najdete v tématu Složené animace.

Jednotlivé animace

Každá metoda rozšíření ve ViewExtensions třídě implementuje jednu animační operaci, která postupně mění vlastnost z jedné hodnoty na jinou hodnotu v průběhu časového období.

Obměna

Rotace se provádí pomocí RotateTo metody, která postupně mění Rotation vlastnost prvku:

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

V tomto příkladu Image se instance otočí o 360 stupňů za 2 sekundy (2000 milisekund). Metoda RotateTo získá aktuální Rotation hodnotu vlastnosti prvku pro začátek animace a potom otočí od této hodnoty k prvnímu argumentu (360). Po dokončení animace se vlastnost obrázku Rotation obnoví na hodnotu 0. Tím zajistíte, že Rotation vlastnost po dokončení animace zůstane na 360, což by zabránilo dalším otočením.

Poznámka

Kromě RotateTo metody existují také RotateXTo metody RotateYTo , které animují RotationX vlastnosti a RotationY vlastnosti.

Relativní otočení

Relativní otočení se provádí pomocí RelRotateTo metody, která postupně mění Rotation vlastnost prvku:

await image.RelRotateTo(360, 2000);

V tomto příkladu Image je instance otočena o 360 stupňů od počáteční pozice za 2 sekundy (2000 milisekund). Metoda RelRotateTo získá aktuální Rotation hodnotu vlastnosti prvku pro začátek animace a pak otočí od této hodnoty na hodnotu plus první argument (360). Tím zajistíte, že každá animace bude vždy otočit o 360 stupňů od počáteční pozice. Proto pokud je vyvolána nová animace, zatímco animace již probíhá, začne od aktuální pozice a může končit na pozici, která není přírůstkem 360 stupňů.

Škálování

Škálování se provádí pomocí ScaleTo metody, která postupně mění Scale vlastnost prvku:

await image.ScaleTo(2, 2000);

V tomto příkladu Image se instance škáluje až dvakrát nad 2 sekundy (2000 milisekund). Metoda ScaleTo získá aktuální Scale hodnotu vlastnosti prvku pro začátek animace a potom se škáluje z této hodnoty na první argument. To má vliv na zvětšení velikosti obrázku na dvojnásobek jeho velikosti.

Poznámka

Kromě ScaleTo metody existují také ScaleXTo metody ScaleYTo , které animují ScaleX vlastnosti a ScaleY vlastnosti.

Relativní škálování

Relativní škálování se provádí pomocí RelScaleTo metody, která postupně mění Scale vlastnost prvku:

await image.RelScaleTo(2, 2000);

V tomto příkladu Image se instance škáluje až dvakrát nad 2 sekundy (2000 milisekund). Metoda RelScaleTo získá aktuální Scale hodnotu vlastnosti prvku pro začátek animace a pak škáluje z této hodnoty na hodnotu plus jeho první argument. Tím zajistíte, že každá animace bude vždy měřítkem 2 z počáteční pozice.

Škálování a otočení pomocí ukotvení

Vlastnosti AnchorXAnchorY vizuálního prvku nastavily střed škálování nebo otočení pro Rotation objekty a Scale vlastnosti. Jejich hodnoty tedy také ovlivňují RotateTo a ScaleTo metody.

Image Vzhledem k tomu, že byl umístěn uprostřed rozložení, následující příklad kódu ukazuje otočení obrázku kolem středu rozložení nastavením jeho AnchorY vlastnosti:

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

Pokud chcete instanci otočit Image kolem středu rozložení, AnchorX musí být vlastnosti AnchorY nastaveny na hodnoty, které jsou relativní vzhledem k šířce a výšce Image. V tomto příkladu je středem Image definovaného středu rozložení, takže výchozí AnchorX hodnota 0,5 nevyžaduje změnu. Vlastnost je však redefinována tak, AnchorY aby byla hodnota od horního okraje Image do středu rozložení. Tím zajistíte, že Image se celé otočení 360 stupňů kolem středového bodu rozložení.

Překlad

Překlad se provádí pomocí TranslateTo metody, která postupně mění TranslationX a TranslationY vlastnosti elementu:

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

V tomto příkladu Image je instance přeložena vodorovně a svisle nad 1 sekundu (1000 milisekund). Metoda TranslateTo současně přeloží 100 jednotek nezávislých na zařízení nalevo a 100 jednotek nezávislých na zařízení směrem nahoru. Důvodem je, že první a druhý argument jsou záporná čísla. Poskytnutí kladných čísel by přeložilo obrázek doprava a dolů.

Důležité

Pokud je prvek původně rozložený mimo obrazovku a přeloží se na obrazovku, zůstane po překladu rozložení vstupu prvku mimo obrazovku a uživatel s ním nemůže pracovat. Proto se doporučuje, aby zobrazení bylo rozloženo do konečné pozice a pak všechny požadované překlady provedené.

Blednutí

Fading se provádí s metodou FadeTo , která postupně mění Opacity vlastnost prvku:

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

V tomto příkladu Image instance zmizí za více než 4 sekundy (4000 milisekund). Metoda FadeTo získá aktuální Opacity hodnotu vlastnosti elementu pro začátek animace a pak se z této hodnoty zmizí na první argument.

Složené animace

Složená animace je sekvenční kombinace animací a lze ji vytvořit pomocí operátoru await :

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

V tomto příkladu Image se instance přeloží více než 6 sekund (6000 milisekund). Image Překlad používá pět animací s operátoremawait, který označuje, že se každá animace spouští postupně. Následné animační metody se proto spustí po dokončení předchozí metody.

Složené animace

Složená animace je kombinace animací, kde se současně spouštějí dvě nebo více animací. Složené animace je možné vytvořit kombinací očekávaných a nečekaných animací:

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

V tomto příkladu Image se instance škáluje a současně se otočí o více než 4 sekundy (4000 milisekund). Škálování používá Image dvě sekvenční animace, ke kterým dochází ve stejnou dobu jako otočení. Metoda RotateTo se spustí bez operátoru await a okamžitě se vrátí s první ScaleTo animací a pak začíná. Operátor await první ScaleTo metody zpozdí druhou ScaleTo metodu, dokud ScaleTo první metoda nedokončila. V tomto okamžiku RotateTo se animace dokončí napůl a Image otočí se o 180 stupňů. Během posledních 2 sekund (2000 milisekund) se dokončí druhá ScaleTo animace a RotateTo animace.

Souběžné spouštění více animací

Metody Task.WhenAny a Task.WhenAll metody lze použít ke souběžnému spouštění více asynchronních metod, a proto mohou vytvářet složené animace. Obě metody vracejí Task objekt a přijímají kolekci metod, které každý vrací Task objekt. Metoda Task.WhenAny se dokončí, když se jakákoli metoda v jeho kolekci dokončí spuštění, jak je znázorněno v následujícím příkladu kódu:

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

V tomto příkladu Task.WhenAny obsahuje metoda dva úkoly. První úkol obměňuje Image instanci za 4 sekundy (4000 milisekund) a druhý úkol škáluje obrázek za 2 sekundy (2000 milisekund). Po dokončení Task.WhenAny druhého úkolu se volání metody dokončí. I když RotateTo je však metoda stále spuštěná, druhá ScaleTo metoda může začít.

Metoda Task.WhenAll se dokončí, když se dokončí všechny metody v jeho kolekci, jak je znázorněno v následujícím příkladu kódu:

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

V tomto příkladu Task.WhenAll metoda obsahuje tři úlohy, z nichž každá se provádí za 10 minut. Každý Task z nich dělá jiný počet otočení 360 stupňů – 307 otočení pro RotateTo, 251 otočení pro RotateXToa 199 otočení pro RotateYTo. Tyto hodnoty jsou primárními čísly, a proto zajistíte, aby se rotace nesynchronizovat, a proto nebudou mít za následek opakující se vzory.

Zrušení animací

Aplikace může zrušit jednu nebo více animací voláním CancelAnimations metody rozšíření:

image.CancelAnimations();

V tomto příkladu se okamžitě zruší všechny animace spuštěné v Image instanci.