Udostępnij za pośrednictwem

Podsumowanie rozdziału 22. Animacja

  • Artykuł

Uwaga

Ta książka została opublikowana wiosną 2016 roku i od tego czasu nie została zaktualizowana. Jest wiele w książce, która pozostaje cenna, ale niektóre materiały są nieaktualne, a niektóre tematy nie są już całkowicie poprawne ani kompletne.

Wiesz już, że możesz tworzyć własne animacje przy użyciu Xamarin.Forms czasomierza lub Task.Delay, ale ogólnie łatwiej jest korzystać z obiektów animacji udostępnianych przez Xamarin.Formsprogram . Trzy klasy implementują te animacje:

Ogólnie rzecz biorąc, animacje są właściwościami docelowymi, które są wspierane przez właściwości możliwe do powiązania. Nie jest to wymagane, ale są to jedyne właściwości, które dynamicznie reagują na zmiany.

Nie ma interfejsu XAML dla tych animacji, ale można zintegrować animacje z XAML przy użyciu technik omówionych w rozdziale 23. Wyzwalacze i zachowania.

Eksplorowanie podstawowych animacji

Podstawowe funkcje animacji to metody rozszerzeń znajdujące się w ViewExtensions klasie . Te metody mają zastosowanie do dowolnego obiektu pochodzącego z VisualElementklasy . Najprostsze animacje są przeznaczone dla właściwości przekształceń omówionych w pliku Chapter 21. Transforms.

AnimacjaTryout pokazuje, jak Clicked program obsługi zdarzeń dla obiektu Button może wywołać RotateTo metodę rozszerzenia, aby uruchomić przycisk w okręgu.

Metoda RotateTo zmienia Rotation właściwość Button z zakresu od 0 do 360 w ciągu jednego kwartału (domyślnie). Button Jeśli obiekt jest ponownie zamapowany, nie robi nic, ponieważ Rotation właściwość jest już 360 stopni.

Ustawianie czasu trwania animacji

Drugi argument to RotateTo czas trwania w milisekundach. Jeśli jest ustawiona duża wartość, naciśnięcie Button wartości podczas animacji powoduje uruchomienie nowej animacji rozpoczynającej się pod bieżącym kątem.

Animacje względne

Metoda RelRotateTo wykonuje rotację względną przez dodanie określonej wartości do istniejącej wartości. Ta metoda umożliwia Button wielokrotne naciśnięcie elementu , a za każdym razem zwiększa Rotation właściwość o 360 stopni.

Oczekiwanie na animacje

Wszystkie metody animacji w ViewExtensions obiektach zwracanych Task<bool> . Oznacza to, że można zdefiniować serię sekwencyjnych animacji przy użyciu metody ContinueWith lub await. Wartość zwracana ukończenia tofalse, jeśli animacja bool zakończyła się bez przerwy lub true została anulowana przez CancelAnimation metodę, co spowoduje anulowanie wszystkich animacji zainicjowanych przez inną metodę, ViewExtensions która jest ustawiona na tym samym elemecie.

Animacje złożone

Możesz mieszać oczekiwane i nieoczekiwanych animacji, aby tworzyć złożone animacje. Są to animacje w ViewExtensions tym obiekcie docelowym TranslationXwłaściwości , TranslationYi Scale transform:

Zwróć uwagę, że TranslateTo potencjalnie wpływa na właściwości TranslationX i .TranslationY

Task.WhenAll i Task.WhenAny

Istnieje również możliwość zarządzania równoczesnych animacji przy użyciu funkcji Task.WhenAll, która sygnalizuje zakończenie wielu zadań i Task.WhenAny, które sygnalizuje zakończenie pierwszego z kilku zadań.

Rotacja i kotwice

Podczas wywoływania ScaleTometod , , RelScaleToRotateToi RelRotateTo można ustawić AnchorX właściwości iAnchorY, aby wskazać środek skalowania i obrotu.

CircleButton demonstruje tę technikę, obracając Button się wokół środka strony.

Funkcje easing

Zazwyczaj animacje są liniowe od wartości początkowej do wartości końcowej. Funkcje złagodzenia mogą spowodować przyspieszenie lub spowolnienie animacji w trakcie ich kursu. Ostatnim opcjonalnym argumentem metod animacji jest typ Easing, klasa, która definiuje 11 statycznych pól tylko do odczytu typu Easing:

Sufiks In wskazuje, że efekt znajduje się na początku animacji, Out oznacza na końcu i InOut oznacza, że jest na początku i na końcu animacji.

W przykładzie BounceButton pokazano użycie funkcji złagodzenia.

Własne funkcje złagodzenia

Możesz również zdefiniować własne funkcje złagodzenia, przekazując element Func<double, double> do konstruktoraEasing. Easing Definiuje również niejawną konwersję z Func<double, double> na Easing. Argument funkcji złagodzenia jest zawsze w zakresie od 0 do 1, ponieważ animacja przechodzi liniowo od początku do końca. Funkcja zwykle zwraca wartość z zakresu od 0 do 1, ale może być krótko ujemna lub większa niż 1 (tak jak w przypadku SpringIn funkcji i SpringOut ) lub może spowodować przerwanie reguł, jeśli wiesz, co robisz.

Przykład UneasyScale demonstruje niestandardową funkcję złagodzenia, a customCubicEase demonstruje inną funkcję.

Przykład SwingButton demonstruje również niestandardową funkcję złagodzenia, a także technikę zmiany AnchorX właściwości i AnchorY w ramach sekwencji animacji rotacji.

Biblioteka Xamarin.FormsBook.Toolkit ma klasę JiggleButton , która używa niestandardowej funkcji luzowania do jiggle przycisku po kliknięciu. Przykład JiggleButtonDemo demonstruje go.

Animacje wejścia

Jeden popularny typ animacji występuje po pierwszym wyświetleniu strony. Taką animację można uruchomić w OnAppearing zastąpieniu strony. W przypadku tych animacji najlepiej skonfigurować kod XAML w celu wyświetlenia strony po animacji, a następnie zainicjować i animować układ z kodu.

Przykład FadingEntrance używa FadeTo metody rozszerzenia, aby zanikać w zawartości strony.

Przykład SlidingEntrance używa TranslateTo metody rozszerzenia do przesuwania zawartości strony po bokach.

Przykład SwingingEntrance używa RotateYTo metody rozszerzenia do animowania RotationY właściwości. Dostępna RotateXTo jest również metoda.

Animacje na zawsze

W drugiej skrajności animacje "na zawsze" są uruchamiane do momentu zakończenia programu. Są one zazwyczaj przeznaczone do celów demonstracyjnych.

Przykład FadingTextAnimation używa FadeTo animacji do zanikania dwóch fragmentów tekstu w i na out.

PalindromeAnimation wyświetla palindrome, a następnie sekwencyjnie obraca poszczególne litery o 180 stopni, aby były one do góry nogami. Następnie cały ciąg jest przerzucany o 180 stopni, aby odczytać taki sam jak oryginalny ciąg.

Próbka CopterAnimation obraca prosty BoxView śmigłowiec, obracając go wokół środka ekranu.

ObracanieSpokes obraca BoxView szprychy wokół środka ekranu, a następnie obraca każdą szprychę w celu utworzenia interesujących wzorców:

Potrójny zrzut ekranu przedstawiający obracające się szprychy

Jednak stopniowe zwiększanie Rotation właściwości elementu może nie działać w dłuższej perspektywie, jak pokazuje przykład RotationBreakdown .

Przykład SpinningImage używa elementu RotateTo, RotateXToi RotateYTo , aby wydawać się, że mapa bitowa obraca się w przestrzeni 3D.

Animowanie właściwości bounds

Jedyną metodą rozszerzenia, która ViewExtensions nie została jeszcze pokazana, jest LayoutTo, która skutecznie animuje właściwość tylko do Bounds odczytu przez wywołanie Layout metody . Ta metoda jest zwykle wywoływana przez Layout pochodne, zgodnie z opisem w rozdziale 26. Nakładki niestandardowe.

Metoda powinna być ograniczona LayoutTo do celów specjalnych. Program BouncingBox używa go do kompresowania i rozwijania BoxView , gdy odbija się od boków strony.

Przykład XamagonXuzzle używa LayoutTo do przenoszenia kafelków w implementacji klasycznej układanki 15-16, która wyświetla obraz zakodowany, a nie ponumerowane kafelki:

Potrójny zrzut ekranu platformy Xuzzle platformy Xamarin

Własne oczekiwane animacje

Przykład TryAwaitableAnimation tworzy oczekiwaną animację. Kluczowa klasa, która może zwrócić Task obiekt z metody i sygnał po zakończeniu animacji to TaskCompletionSource.

Więcej informacji na temat animacji

System Xamarin.Forms animacji może być nieco mylący. Oprócz Easing klasy system animacji składa się z ViewExtensionsklas , Animationi AnimationExtension .

ViewExtensions, klasa

Znasz już plik ViewExtensions. Definiuje dziewięć metod zwracanych Task<bool> i CancelAnimations. Siedem z dziewięciu metod docelowych właściwości przekształcania. Pozostałe dwa to FadeTo, która jest przeznaczona dla Opacity właściwości , i LayoutTo, która wywołuje metodę Layout .

Animacja, klasa

Klasa Animation ma konstruktor z pięcioma argumentami służącymi do definiowania metod wywołania zwrotnego i zakończonych oraz parametrów animacji.

Animacje podrzędne można dodawać z Addprzeciążeniem WithConcurrent, , InsertWithConcurrenti .

Obiekt animacji jest następnie uruchamiany z wywołaniem Commit metody .

AnimationExtensions, klasa

Klasa AnimationExtensions zawiera głównie metody rozszerzenia. Istnieje kilka wersji Animate metody, a metoda ogólna Animate jest tak wszechstronna, że jest to naprawdę jedyna potrzebna funkcja animacji.

Praca z klasą Animacja

Przykład ConcurrentAnimations demonstruje klasę Animation z kilkoma różnymi animacjami.

Animacje podrzędne

Przykład ConcurrentAnimations demonstruje również animacje podrzędne, które korzystają z (bardzo podobnych) Add i Insert metod.

Poza metodami animacji wysokiego poziomu

Przykład ConcurrentAnimations pokazuje również, jak wykonywać animacje wykraczające poza właściwości objęte metodami ViewExtensions . W jednym przykładzie seria okresów jest dłuższa; w innym przykładzie BackgroundColor właściwość jest animowana.

Więcej własnych, oczekujących metod

Metoda TranslateTo polecenia ViewExtensions nie działa z funkcją Easing.SpringOut . Zatrzymuje się, gdy dane wyjściowe złagodzenia są wyższe niż 1.

Biblioteka Xamarin.FormsBook.Toolkit zawiera klasę MoreViewExtensions z metodami TranslateYTo TranslateXTo i rozszerzeniami, które nie mają tego problemu, a także CancelTranslateXTo CancelTranslateYTo metody anulowania tych animacji.

Funkcja SpringSlidingEntrance demonstruje metodę TranslateXTo .

Klasa MoreExtensions zawiera również metodę TranslateXYTo rozszerzenia, która łączy tłumaczenie X i Y oraz metodę CancelTranslateXYTo .

Implementowanie animacji Beziera

Istnieje również możliwość opracowania animacji, która przenosi element wzdłuż ścieżki krzywej Beziera. Biblioteka Xamarin.FormsBook.Toolkit zawiera BezierSpline strukturę, która hermetyzuje krzywą Beziera i BezierTangent wyliczenie do sterowania orientacją.

Klasa MoreViewExtensions zawiera metodę BezierPathTo rozszerzenia i metodę CancelBezierPathTo .

W przykładzie BezierLoop pokazano animowanie elementu wzdłuż ścieżki beizera.

Praca z rozszerzeniami AnimationExtensions

Jednym z typów animacji brakujących w standardowej kolekcji jest animacja koloru. Problem polega na tym, że nie ma właściwego sposobu interpolacji między dwiema Color wartościami. Istnieje możliwość interpolacji poszczególnych wartości RGB, ale tak samo jak prawidłowa jest interpolacja wartości HSL.

Z tego powodu MoreViewExtensions klasa w Xamarin.Formsbibliotece Book.Toolkit zawiera dwie Color metody animacji: RgbColorAnimation i .HslColorAnimation (Istnieją również dwie metody anulowania: CancelRgbColorAnimation i CancelHslColorAnimation).

Obie metody korzystają z ColorAnimationmetody , która wykonuje animację, wywołując obszerną metodę ogólną Animate w metodzie .AnimationExtensions

W przykładzie ColorAnimations pokazano użycie tych dwóch typów animacji kolorów.

Tworzenie struktury animacji

Czasami przydatne jest wyrażanie animacji w języku XAML i używanie ich w połączeniu z maszyną MVVM. Opisano to w następnym rozdziale rozdział 23. Wyzwalacze i zachowania.