Sdílet prostřednictvím

Základní animace

  • Článek

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 určitém časovém období.

Základní animace lze vytvořit pomocí rozšiřujících metod poskytovaných ViewExtensions třídou, která pracuje s VisualElement objekty:

Ve výchozím nastavení bude každá animace trvat 250 milisekund. Při vytváření animace je však možné zadat dobu trvání každé animace.

Poznámka

Třída ViewExtensions také poskytuje metodu rozšíření LayoutTo. 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 pozice.

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

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

Animace v Androidu respektují nastavení systémové animace:

  • Pokud jsou animace systému zakázané (funkcemi přístupnosti nebo vývojářskými funkcemi), nové animace se okamžitě přesunou do stavu dokončení.
  • Pokud je režim úspory energie zařízení aktivován, zatímco animace probíhají, animace okamžitě přeskočí do stavu dokončení.
  • Pokud je doba trvání animace zařízení nastavená na nulu (zakázáno), zatímco animace probíhají a verze rozhraní API je 33 nebo vyšší, animace okamžitě přeskočí do stavu dokončení.

Jednotlivé animace

Každá rozšiřující metoda ve třídě ViewExtensions implementuje jednu animační operaci, která postupně mění vlastnost z jedné hodnoty na jinou hodnotu v určitém časovém období.

Rotace

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

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

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

Poznámka

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

Relativní otočení

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

await image.RelRotateTo(360, 2000);

V tomto příkladu je instance Image 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 potom otočí z této hodnoty na hodnotu plus její první argument (360). Tím zajistíte, že každá animace bude vždy otočení 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ňů.

Změna velikosti

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

await image.ScaleTo(2, 2000);

V tomto příkladu se instance Image vertikálně navýšila na dvojnásobek jeho velikosti po dobu 2 sekund (2000 milisekund). Metoda ScaleTo získá aktuální Scale hodnotu vlastnosti prvku pro začátek animace a potom š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ě metody ScaleTo existují také ScaleXTo a ScaleYTo metody, které animují ScaleX a ScaleY vlastnosti.

Relativní škálování

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

await image.RelScaleTo(2, 2000);

V tomto příkladu se instance Image vertikálně navýšila na dvojnásobek jeho velikosti po dobu 2 sekund (2000 milisekund). Metoda RelScaleTo získá aktuální Scale hodnotu vlastnosti prvku pro začátek animace a potom škáluje z této hodnoty na hodnotu plus její první argument. Tím zajistíte, že každá animace bude vždy měřítkem 2 od počáteční pozice.

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

Vlastnosti AnchorX a AnchorY prvku vizuálu nastaví střed škálování nebo otočení pro Rotation a Scale vlastnosti. Jejich hodnoty tedy ovlivňují také RotateTo a ScaleTo metody.

Vzhledem k Image, který byl umístěn ve středu rozložení, následující příklad kódu ukazuje, jak otočit obrázek kolem středu rozložení nastavením jeho vlastnosti AnchorY:

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

Chcete-li otočit instanci Image kolem středu rozložení, musí být vlastnosti AnchorX a AnchorY nastaveny na hodnoty relativní vzhledem k šířce a výšce Image. V tomto příkladu je střed Image definován tak, aby byl uprostřed rozložení, takže výchozí AnchorX hodnota 0,5 nevyžaduje změnu. Vlastnost AnchorY je však předefinována tak, aby byla hodnotou od horní hrany Image do středového bodu rozvržení. Tím zajistíte, že Image provede úplnou rotaci o 360 stupňů kolem středu rozložení.

Překlad

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

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

V tomto příkladu je objekt Image přeložen vodorovně a svisle za 1 sekundu (1000 milisekund). Metoda TranslateTo současně přesune obraz o 100 jednotek vlevo a 100 jednotek nahoru, přičemž tyto jednotky jsou nezávislé na zařízení. Důvodem je to, že první a druhý argument jsou záporná čísla. Poskytnutím kladných čísel by se obrázek posunul doprava a dolů.

Důležitý

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

Blednutí

Vyblednutí se provádí pomocí FadeTo metody, která postupně mění Opacity vlastnost prvku.

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

V tomto příkladu Image instance postupně zmizí za více než 4 sekundy (4000 milisekund). Metoda FadeTo získá aktuální Opacity hodnotu vlastnosti prvku pro začátek animace a potom se z této hodnoty zeslabí do prvního argumentu.

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 se instance Image přeloží během 6 sekund (6000 milisekund). Překlad Image používá pět animací s operátorem await označujícím, že se každá animace spouští postupně. Následné metody animace se proto spustí po dokončení předchozí metody.

Složené animace

Složená animace je kombinace animací, ve kterých 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 se škáluje instance Image a současně se otočí o 4 sekundy (4000 milisekund). Škálování Image používá 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ě vrátí, a první animace ScaleTo pak začne. Operátor await první metody ScaleTo zpožďuje druhou metodu ScaleTo, dokud se nedokončila první metoda ScaleTo. V tuto chvíli je animace RotateTo dokončena a Image se otočí o 180 stupňů. Během posledních 2 sekund (2000 milisekund) se druhá animace ScaleTo a RotateTo animace dokončily.

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

Metody Task.WhenAny a Task.WhenAll 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 vrací Task objekt a přijímají kolekci metod, které každý vrací Task objektu. Metoda Task.WhenAny se dokončí, když se spustí jakákoli metoda v jeho kolekci, 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 obsahuje metoda Task.WhenAny dva úkoly. První úkol otočí instanci Image za 4 sekundy (4000 milisekund) a druhý úkol škáluje obrázek po dobu 2 sekund (2000 milisekund). Po dokončení druhého úkolu se volání metody Task.WhenAny dokončí. I když je však metoda RotateTo stále spuštěná, druhá ScaleTo metoda může začít.

Metoda Task.WhenAll se dokončí po dokončení všech metod 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í více než 10 minut. Každý Task dělá jiný počet otočení o 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 zajišťují, že rotace nejsou synchronizované, a proto nebudou mít za následek opakované vzory.

Zrušení animací

Metoda rozšíření CancelAnimations slouží ke zrušení animací, jako je otočení, škálování, posunutí a postupné miznutí, které běží na konkrétním VisualElement.

image.CancelAnimations();

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