Share via

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 rozšiřující metodu 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 ViewExtensions třídě jsou všechny asynchronní a vrací Task<bool> objekt. Vrácená hodnota je false , pokud se animace dokončí a true pokud je animace zrušena. Proto když jsou operace animace kombinovány s await operátorem, je možné vytvořit sekvenční animace s následnými metodami animace spuštěné 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í, 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.

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 ViewExtensions třídě implementuje jednu animační operaci, která postupně mění vlastnost z jedné hodnoty na jinou hodnotu v určitém časovém 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 resetuje na 0. Tím zajistíte, že Rotation vlastnost po uzavření animace zůstane na 360, což by zabránilo dalším otočením.

Poznámka:

Kromě RotateTo této 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 elementu:

await image.RelRotateTo(360, 2000);

V tomto příkladu Image se instance otočí 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ňů.

Škálování

Š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 Image se instance škáluje 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 pak škáluje z této hodnoty na jeho první argument. To má vliv na zvětšení velikosti obrázku na dvojnásobek jeho velikosti.

Poznámka:

Kromě ScaleTo této 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 elementu:

await image.RelScaleTo(2, 2000);

V tomto příkladu Image se instance škáluje 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í

AnchorY Vlastnosti AnchorX vizuálního prvku nastavily střed škálování nebo otočení pro Rotation objekty a Scale vlastnosti. Proto jejich hodnoty 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);

Chcete-li instanci otočit Image kolem středu rozložení, AnchorX musí být vlastnosti nastaveny AnchorY na hodnoty, které jsou relativní vzhledem k šířce a výšce objektu 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 předdefinována tak, AnchorY aby byla hodnota od horní části Image do středu rozložení. Tím zajistíte, že Image se kolem středu rozložení plně otočí o 360 stupňů.

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 přes 1 sekundu (1000 milisekund). Metoda TranslateTo současně přeloží 100 jednotek nezávislých na zařízení vlevo a 100 jednotek nezávislých na zařízení nahoru. Důvodem je to, ž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 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í

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 prvku pro začátek animace a poté 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 Image se instance přeloží přes 6 sekund (6000 milisekund). Image Překlad 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 Image se instance škáluje a současně se otočí o 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 vrátí okamžitě, s první ScaleTo animací pak začíná. Operátor await první ScaleTo metody zpožďuje druhou ScaleTo metodu, dokud se nedokončila první ScaleTo metoda. V tomto okamžiku RotateTo je animace dokončena napůl a Image otočí se o 180 stupňů. Během posledních 2 sekund (2000 milisekund) se druhá ScaleTo animace i RotateTo animace dokončí.

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 vrací Task objekt a přijímají kolekci metod, které každý vrací Task objekt. Metoda Task.WhenAny se dokončí, když jakákoli metoda v jeho kolekci dokončí provádě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 otočí Image instanci o více než 4 sekundy (4000 milisekund) a druhý úkol škáluje obrázek po dobu 2 sekund (2000 milisekund). Po dokončení druhého úkolu se Task.WhenAny 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ž jsou dokončeny 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 obsahuje metoda tři úlohy, z nichž každá se provádí více než 10 minut. Každý Task z nich činí 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í

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

image.CancelAnimations();

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