Udostępnij za pośrednictwem

Animacja podstawowa

  • Artykuł

Klasy animacji .NET Multi-platform App UI (.NET MAUI) są przeznaczone dla różnych właściwości elementów wizualizacji, a typowa animacja podstawowa stopniowo zmienia właściwość z jednej wartości na drugą w danym okresie.

Podstawowe animacje można tworzyć za pomocą metod rozszerzeń udostępnianych przez klasę ViewExtensions, która działa na obiektach VisualElement:

Domyślnie każda animacja będzie trwać 250 milisekund. Jednak czas trwania każdej animacji można określić podczas tworzenia animacji.

Notatka

Klasa ViewExtensions udostępnia również metodę rozszerzenia LayoutTo. Jednak ta metoda ma być używana przez układy do animowania przejść między stanami układu, które zawierają zmiany rozmiaru i położenia.

Metody rozszerzenia animacji w klasie ViewExtensions są asynchroniczne i zwracają obiekt Task<bool>. Wartość zwracana jest false, jeśli animacja zostanie ukończona, a true, jeśli animacja zostanie anulowana. W związku z tym, gdy operacje animacji są łączone z operatorem await, można utworzyć sekwencyjne animacje z kolejnymi metodami animacji wykonywanymi po zakończeniu poprzedniej metody. Aby uzyskać więcej informacji, zobacz Animacje złożone.

Jeśli istnieje wymóg, aby animacja została ukończona w tle, można pominąć operator await. W tym scenariuszu metody rozszerzenia animacji szybko zakończą swoje działanie po zainicjowaniu animacji, która będzie przebiegać w tle. Tę operację można wykorzystać podczas tworzenia animacji złożonych. Aby uzyskać więcej informacji, zobacz animacje złożone.

W systemie Android animacje przestrzegają ustawień animacji systemu:

  • Jeśli animacje systemu są wyłączone (przez funkcje ułatwień dostępu lub funkcje dla deweloperów), nowe animacje będą natychmiast przechodzić do ich stanu zakończenia.
  • Jeśli tryb oszczędzania energii urządzenia jest aktywowany, gdy animacje są w toku, animacje natychmiast przeskoczą do stanu zakończenia.
  • Jeśli czasy trwania animacji urządzenia są ustawione na zero (wyłączone), podczas gdy animacje są w toku, a wersja interfejsu API wynosi 33 lub nowsza, animacje natychmiast przeskoczą do stanu zakończenia.

Pojedyncze animacje

Każda metoda rozszerzenia w klasie ViewExtensions implementuje pojedynczą operację animacji, która stopniowo zmienia właściwość z jednej wartości na inną w danym okresie.

Obrót

Rotacja jest wykonywana za pomocą metody RotateTo, która stopniowo zmienia właściwość Rotation elementu:

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

W tym przykładzie instancja Image jest obracana do 360 stopni w ciągu 2 sekund (2000 milisekund). Metoda RotateTo uzyskuje bieżącą wartość właściwości Rotation elementu na początku animacji, a następnie obraca się z tej wartości do pierwszego argumentu (360). Po zakończeniu animacji właściwość Rotation obrazu zostanie zresetowana do wartości 0. Gwarantuje to, że właściwość Rotation nie pozostaje na poziomie 360 po zakończeniu animacji, co uniemożliwiłoby dodatkowe rotacje.

Notatka

Oprócz metody RotateTo istnieją również metody RotateXTo i RotateYTo, które animują odpowiednio właściwości RotationX i RotationY.

Rotacja względna

Rotacja względna jest wykonywana przy użyciu metody RelRotateTo, która stopniowo zmienia właściwość Rotation elementu:

await image.RelRotateTo(360, 2000);

W tym przykładzie wystąpienie Image jest obracane o 360 stopni od pozycji początkowej w ciągu 2 sekund (2000 milisekund). Metoda RelRotateTo uzyskuje bieżącą wartość właściwości Rotation elementu na początku animacji, a następnie obraca się z tej wartości na wartość plus jej pierwszy argument (360). Dzięki temu każda animacja będzie zawsze obracać się o 360 stopni od pozycji początkowej. W związku z tym, jeśli nowa animacja jest wywoływana, gdy animacja jest już w toku, rozpocznie się od bieżącej pozycji i może kończyć się pozycją, która nie jest przyrostem 360 stopni.

Skalowanie

Skalowanie jest wykonywane za pomocą metody ScaleTo, która stopniowo zmienia właściwość Scale elementu:

await image.ScaleTo(2, 2000);

W tym przykładzie wystąpienie Image jest powiększane do podwójnego rozmiaru w ciągu 2 sekund (2000 milisekund). Metoda ScaleTo uzyskuje bieżącą wartość właściwości Scale elementu na początku animacji, a następnie skaluje z tej wartości do pierwszego argumentu. Ma to wpływ na rozszerzenie rozmiaru obrazu do dwukrotnego rozmiaru.

Notatka

Oprócz metody ScaleTo istnieją również metody ScaleXTo i ScaleYTo, które animują odpowiednio właściwości ScaleX i ScaleY.

Skalowanie względne

Skalowanie względne jest wykonywane za pomocą metody RelScaleTo, która stopniowo zmienia właściwość Scale elementu:

await image.RelScaleTo(2, 2000);

W tym przykładzie wystąpienie Image jest powiększane do dwukrotności swojego rozmiaru w ciągu 2 sekund (2000 milisekund). Metoda RelScaleTo uzyskuje bieżącą wartość właściwości Scale elementu na początku animacji, a następnie skaluje z tej wartości do wartości plus jej pierwszy argument. To zapewnia, że każda animacja będzie zawsze skalowana o 2 od pozycji początkowej.

Skalowanie i obracanie za pomocą kotwic

Właściwości AnchorX i AnchorY elementu wizualnego określają środek skalowania lub obracania w odniesieniu do właściwości Rotation i Scale. W związku z tym ich wartości wpływają również na metody RotateTo i ScaleTo.

Biorąc pod uwagę Image, który został umieszczony w środku układu, poniższy przykład kodu pokazuje obracanie obrazu wokół środka układu poprzez ustawienie jego właściwości AnchorY.

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

Aby obrócić wystąpienie Image wokół środka układu, właściwości AnchorX i AnchorY należy ustawić na wartości, które są w odniesieniu do szerokości i wysokości Image. W tym przykładzie środek Image jest definiowany jako środek układu, dlatego domyślna wartość AnchorX 0,5 nie wymaga zmiany. Jednak właściwość AnchorY jest ponownie określona na wartość pochodzącą z góry Image do punktu środkowego układu. Gwarantuje to, że Image wykonuje pełną rotację 360 stopni wokół punktu środkowego układu.

Tłumaczenie

Tłumaczenie jest wykonywane za pomocą metody TranslateTo, która stopniowo zmienia właściwości TranslationX i TranslationY elementu:

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

W tym przykładzie wystąpienie Image jest przesuwane w poziomie i w pionie przez 1 sekundę (1000 milisekund). Metoda TranslateTo jednocześnie przesuwa obraz o 100 jednostek niezależnych od urządzenia w lewo oraz 100 jednostek niezależnych od urządzenia w górę. Jest to spowodowane tym, że pierwsze i drugie argumenty są zarówno liczbami ujemnymi. Podanie liczb dodatnich spowoduje przesunięcie obrazu w prawo i w dół.

Ważny

Jeśli element jest początkowo rozmieszczony poza ekranem, a następnie przetłumaczony na ekran, po przetłumaczeniu układu wejściowego elementu pozostaje poza ekranem i użytkownik nie może z nim korzystać. W związku z tym zaleca się, aby widok został ułożony w jego ostatecznej pozycji, a następnie wszelkie wymagane tłumaczenia wykonywane.

Blaknięcie

Zanikanie jest wykonywane za pomocą metody FadeTo, która stopniowo zmienia właściwość Opacity elementu:

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

W tym przykładzie wystąpienie Image zanika w ciągu ponad 4 sekund (4000 milisekund). Metoda FadeTo uzyskuje bieżącą wartość właściwości Opacity elementu na początku animacji, a następnie zanika z tej wartości do pierwszego argumentu.

Animacje złożone

Animacja złożona jest sekwencyjną kombinacją animacji i można ją utworzyć za pomocą operatora 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

W tym przykładzie wystąpienie Image jest tłumaczone przez ponad 6 sekund (6000 milisekund). Tłumaczenie Image używa pięciu animacji z operatorem await wskazującym, że każda animacja jest wykonywana sekwencyjnie. W związku z tym kolejne metody animacji są wykonywane po zakończeniu poprzedniej metody.

Animacje złożone

Animacja złożona to kombinacja animacji, w których jednocześnie są uruchamiane co najmniej dwie animacje. Animacje złożone można tworzyć, łącząc oczekiwane i nieoczekane animacje:

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

W tym przykładzie wystąpienie Image jest skalowane i jednocześnie obracane w ciągu 4 sekund (4000 milisekund). Skalowanie Image używa dwóch sekwencyjnych animacji, które występują w tym samym czasie co obrót. Metoda RotateTo jest wykonywana bez operatora await i zwraca natychmiast, a następnie rozpoczyna się pierwsza animacja ScaleTo. Operator await w pierwszej metodzie ScaleTo opóźnia drugą metodę ScaleTo do momentu ukończenia pierwszej metody ScaleTo. W tym momencie animacja RotateTo zostanie ukończona w połowie, a Image zostanie obrócony o 180 stopni. Podczas ostatnich 2 sekund (2000 milisekund) druga animacja ScaleTo i animacja RotateTo są ukończone.

Równoczesne uruchamianie wielu animacji

Metody Task.WhenAny i Task.WhenAll mogą służyć do jednoczesnego uruchamiania wielu metod asynchronicznych i w związku z tym mogą tworzyć animacje złożone. Obie metody zwracają obiekt Task i akceptują kolekcję metod, z których każda zwraca obiekt Task. Metoda Task.WhenAny kończy się po zakończeniu wykonywania dowolnej metody w kolekcji, jak pokazano w poniższym przykładzie kodu:

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

W tym przykładzie metoda Task.WhenAny zawiera dwa zadania. Pierwsze zadanie obraca instancję Image w ciągu 4 sekund (4000 milisekund), a drugie zadanie skaluje obraz w ciągu 2 sekund (2000 milisekund). Po zakończeniu drugiego zadania, wywołanie metody Task.WhenAny zostanie zakończone. Jednak mimo że metoda RotateTo jest nadal uruchomiona, można rozpocząć drugą metodę ScaleTo.

Metoda Task.WhenAll kończy się po zakończeniu wszystkich metod w kolekcji, jak pokazano w poniższym przykładzie kodu:

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

W tym przykładzie metoda Task.WhenAll zawiera trzy zadania, z których każde wykonuje ponad 10 minut. Każda Task wykonuje inną liczbę rotacji 360 stopni — 307 obrotów dla RotateTo, 251 obrotów dla RotateXToi 199 obrotów dla RotateYTo. Te wartości są liczbami głównymi, dlatego zapewniają, że rotacje nie są synchronizowane i dlatego nie będą powodować powtarzających się wzorców.

Anulowanie animacji

Metoda rozszerzenia CancelAnimations służy do anulowania wszelkich animacji, takich jak rotacja, skalowanie, przesunięcie i zanikanie, które są aktywne na określonym VisualElement.

image.CancelAnimations();

W tym przykładzie wszystkie animacje uruchomione w wystąpieniu Image są natychmiast anulowane.