Sdílet prostřednictvím

Shrnutí kapitoly 22. Animace

  • Článek

Poznámka:

Tato kniha byla publikována na jaře roku 2016 a od té doby nebyla aktualizována. Existuje mnoho v knize, která zůstává cenná, ale některé materiály jsou zastaralé a některá témata už nejsou zcela správná nebo úplná.

Viděli jste, že můžete vytvářet vlastní animace pomocí Xamarin.Forms časovače nebo Task.Delay, ale obecně je jednodušší pomocí animačních zařízení poskytovaných Xamarin.Forms. Tři třídy implementují tyto animace:

Obecně platí, že animace cílových vlastností, které jsou podporovány vlastnostmi s možností vazby. Nejedná se o požadavek, ale jedná se o jediné vlastnosti, které dynamicky reagují na změny.

Pro tyto animace neexistuje žádné rozhraní XAML, ale animace můžete integrovat do XAML pomocí technik probíraných v kapitole 23. Triggery a chování

Zkoumání základních animací

Základní animační funkce jsou rozšiřující metody nalezené ViewExtensions ve třídě. Tyto metody se vztahují na jakýkoli objekt, který je odvozen z VisualElement. Nejjednodušší animace cílí na vlastnosti transformací, které jsou popsány v Chapter 21. Transforms.

AnimationTryout ukazuje, jak Clicked obslužná rutina události pro Button RotateTo volání rozšiřující metody otočit tlačítko v kruhu.

Metoda RotateTo změní Rotation vlastnost Button z 0 na 360 v průběhu jedné čtvrtiny sekundy (ve výchozím nastavení). Pokud je Button však klepnutí znovu, nedělá nic, protože Rotation vlastnost je již 360 stupňů.

Nastavení doby trvání animace

Druhým argumentem RotateTo je doba trvání v milisekundách. Pokud je nastavená na velkou hodnotu, klepnutím Button na během animace spustíte novou animaci začínající aktuálním úhlem.

Relativní animace

Metoda RelRotateTo provádí relativní otočení přidáním zadané hodnoty k existující hodnotě. Tato metoda umožňuje Button vícekrát klepnout a pokaždé, Rotation když zvýšíte vlastnost o 360 stupňů.

Čekání na animace

Všechny metody animace ve ViewExtensions vrácených Task<bool> objektech. To znamená, že můžete definovat řadu sekvenčních animací pomocí ContinueWith nebo await. Návratová bool hodnota dokončení je false v případě, že animace byla dokončena bez přerušení nebo true pokud byla zrušena metodou CancelAnimation , která zruší všechny animace zahájené druhou metodou, která ViewExtensions je nastavena na stejném prvku.

Složené animace

Můžete kombinovat očekávané a nečekané animace pro vytváření složených animací. Jedná se o animace, ViewExtensions které cílí na TranslationXvlastnost , TranslationYa Scale transformovat vlastnosti:

Všimněte si, že TranslateTo potenciálně ovlivňuje vlastnosti TranslationX i TranslationY vlastnosti.

Task.WhenAll a Task.WhenAny

Je také možné spravovat souběžné animace pomocí Task.WhenAll, které signály, když je dokončeno více úkolů, a Task.WhenAny, které signály při prvním z několika úkolů skončily.

Otočení a ukotvení

Při volání ScaleTometody , , RotateToRelScaleToa RelRotateTo metody můžete nastavit AnchorX a AnchorY vlastnosti označující střed škálování a otočení.

CircleButton ukazuje tuto techniku otáčením Button kolem středu stránky.

Usnadnění funkcí

Obecně platí, že animace jsou lineární od počáteční hodnoty až po koncovou hodnotu. Usnadnění funkcí může způsobit zrychlení nebo zpomalení animací v průběhu jejich kurzu. Poslední volitelný argument metod animace je typu Easing, třída, která definuje 11 statických polí jen pro čtení typu Easing:

Přípona In označuje, že efekt je na začátku animace, Out znamená na konci a InOut znamená, že je na začátku a na konci animace.

Ukázka BounceButton demonstruje použití funkcí pro usnadnění.

Vlastní funkce pro usnadnění

Vlastní funkce můžete definovat také předáním Func<double, double> konstruktoruEasing. Easing definuje implicitní převod z Func<double, double> na Easing. Argument funkce pro usnadnění je vždy v rozsahu 0 až 1, protože animace pokračuje lineárně od začátku do konce. Funkce obvykle vrací hodnotu v rozsahu 0 až 1, ale může být krátce záporná nebo větší než 1 (stejně jako u SpringIn funkcí a SpringOut funkcí) nebo může pravidla přerušit, pokud víte, co děláte.

Ukázka UneasyScale demonstruje vlastní funkce easing a CustomCubicEase ukazuje další.

Ukázka SwingButtonu také demonstruje vlastní funkce pro usnadnění a také techniku změny AnchorX vlastností AnchorY v posloupnosti animací otočení.

Xamarin.FormsKnihovna Book.Toolkit má JiggleButton třídu, která používá vlastní funkci easingu k chytnutí tlačítka po kliknutí. Ukázka JiggleButtonDemo ukazuje.

Úvodní animace

K jednomu oblíbenému typu animace dochází při prvním zobrazení stránky. Takovou animaci lze spustit v OnAppearing přepsání stránky. U těchto animací je nejlepší nastavit XAML tak, aby se stránka zobrazovala po animaci a pak inicializovala a animovala rozložení z kódu.

Ukázka FadingEntrance používá metodu FadeTo rozšíření k prolnutí obsahu stránky.

Ukázka SlidingEntrance používá metodu TranslateTo rozšíření k posunutí obsahu stránky ze stran.

Ukázka SwingingEntrance používá rozšiřující metodu RotateYTo RotationY k animaci vlastnosti. K RotateXTo dispozici je také metoda.

Navždyné animace

V ostatních extrémních animacích "navždy" běží, dokud se program neukončí. Obvykle jsou určené pro demonstrační účely.

Ukázka FadingTextAnimation používá FadeTo animaci k prolnutí dvou částí textu.

PalindromeAnimation zobrazí palindrome a potom postupně otočí jednotlivá písmena o 180 stupňů, aby byly vzhůru nohama. Celý řetězec se pak překlopí o 180 stupňů, aby se přečetl stejný jako původní řetězec.

Vzorek CopterAnimation otočí jednoduchý BoxView vrtulník a otočí ho kolem středu obrazovky.

RotaceSpokes rotuje BoxView paprsky kolem středu obrazovky a pak otočí každou paprsku, aby vytvořil zajímavé vzory:

Trojitý snímek obrazovky s rotujícími paprsky

Postupné zvýšení Rotation vlastnosti prvku však nemusí fungovat v dlouhodobém horizontu, jak ukazuje ukázka RotationBreakdown .

Vzorek SpinningImage používá RotateTo, RotateXToa RotateYTo aby to vypadalo, jako by rastrový obrázek rotoval v 3D prostoru.

Animace vlastnosti bounds

Jedinou metodou rozšíření, která ViewExtensions dosud není ukázaná, je LayoutTo, která účinně animuje jen pro čtení Bounds vlastnost voláním Layout metody. Tato metoda se obvykle nazývá Layout deriváty, jak bude popsáno v kapitole 26. CustomLayouts.

Metoda LayoutTo by měla být omezena na speciální účely. Program BouncingBox ho používá ke komprimaci a rozbalení BoxView při odrazu ze stran stránky.

Ukázka XamagonXuzzle používá LayoutTo k přesouvání dlaždic v implementaci klasické puzzle 15-16, která místo očíslovaných dlaždic zobrazuje scrambled obrázek:

Triple screenshot of Xamarin Xuzzle

Vaše vlastní očekávané animace

Ukázka TryAwaitableAnimation vytvoří očekávanou animaci. Zásadní třída, která může vrátit Task objekt z metody a signál po dokončení animace je TaskCompletionSource.

Hlouběji do animací

Animační Xamarin.Forms systém může být trochu matoucí. Kromě Easing třídy se animační systém skládá z ViewExtensions, Animationa AnimationExtension třídy.

ViewExtensions – třída

Už jste viděli ViewExtensions. Definuje devět metod, které vrací Task<bool> a CancelAnimations. Sedm z devíti metod cílí na vlastnosti transformace. Další dvě jsou FadeTo, které cílí na Opacity vlastnost, a LayoutTo, která volá metodu Layout .

Animation – třída

Třída Animation má konstruktor s pěti argumenty pro definování zpětného volání a dokončených metod a parametrů animace.

Podřízené animace lze přidat pomocí Add, Insert, WithConcurrent, a přetížení .WithConcurrent

Objekt animace se pak spustí voláním Commit metody.

AnimationExtensions – třída

Třída AnimationExtensions obsahuje většinou rozšiřující metody. Existuje několik verzí Animate metody a obecná Animate metoda je tak všestranná, že je to skutečně jediná animační funkce, kterou potřebujete.

Práce s třídou Animace

Ukázka ConcurrentAnimations ukazuje Animation třídu s několika různými animacemi.

Podřízené animace

Ukázka ConcurrentAnimations také ukazuje podřízené animace, které využívají (velmi podobné) Add a Insert metody.

Nad rámec metod animace vysoké úrovně

Ukázka ConcurrentAnimations také ukazuje, jak provádět animace, které překračují vlastnosti cílené metodami ViewExtensions . V jednom příkladu je řada období delší; v jiném příkladu BackgroundColor je vlastnost animovaný.

Více vlastních očekávaných metod

Metoda TranslateTo ViewExtensions nefunguje s Easing.SpringOut funkcí. Zastaví se, když se zmírní výstup nad 1.

Knihovna Book.Toolkit obsahuje MoreViewExtensions třídu s metodami TranslateXTo rozšířeníTranslateYTo, které tento problém nemají, a CancelTranslateYTo CancelTranslateXTo metody pro zrušení těchto animací.Xamarin.Forms

SpringSlidingEntrance demonstruje metoduTranslateXTo.

Třída MoreExtensions obsahuje také rozšiřující metodu TranslateXYTo , která kombinuje překlad X a Y a metodu CancelTranslateXYTo .

Implementace animace Bezier

Je také možné vyvinout animaci, která přesune prvek podél cesty Bezierovy křivky. Xamarin.FormsKnihovna Book.Toolkit obsahuje BezierSpline strukturu, která zapouzdřuje bezierovou křivku a BezierTangent výčet pro řízení orientace.

Třída MoreViewExtensions obsahuje rozšiřující metodu BezierPathTo a metodu CancelBezierPathTo .

Ukázka BezierLoop ukazuje animování prvku podél cesty Beizer.

Práce s funkcemi AnimationExtensions

Jedním z typů chybějící animace ve standardní kolekci je barevná animace. Problémem je, že neexistuje žádný správný způsob interpolace mezi dvěma Color hodnotami. Je možné interpolovat jednotlivé hodnoty RGB, ale stejně jako platné je interpolace hodnot HSL.

Z tohoto důvodu MoreViewExtensions třída v knihovně Xamarin.FormsBook.Toolkit obsahuje dvě Color metody animace: RgbColorAnimation a .HslColorAnimation (Existují také dvě metody zrušení: CancelRgbColorAnimation a CancelHslColorAnimation).

Obě metody využívají ColorAnimation, který provádí animaci voláním rozsáhlé obecné Animate metody v AnimationExtensions.

Ukázka ColorAnimations ukazuje použití těchto dvou typů barevných animací.

Strukturování animací

Někdy je užitečné vyjádřit animace v JAZYCE XAML a používat je ve spojení s MVVM. To je popsáno v další kapitole kapitoly 23. Triggery a chování