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ń dostarczanych przez klasę ViewExtensions , która działa na VisualElement obiektach:

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

Uwaga

Klasa ViewExtensions udostępnia również metodę LayoutTo rozszerzenia. 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 ViewExtensions klasie są asynchroniczne i zwracają Task<bool> obiekt. Wartość zwracana jest false wtedy, gdy animacja zostanie ukończona, a true 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, await operator może zostać pominięty. W tym scenariuszu metody rozszerzenia animacji zostaną szybko zwrócone po zainicjowaniu animacji z animacją występującą 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 ViewExtensions klasie implementuje pojedynczą operację animacji, która stopniowo zmienia właściwość z jednej wartości na inną w danym okresie.

Wymiana

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

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

W tym przykładzie Image wystąpienie jest obracane do 360 stopni w ciągu 2 sekund (2000 milisekund). Metoda RotateTo uzyskuje bieżącą Rotation wartość właściwości 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ść obrazu Rotation zostanie zresetowana do wartości 0. Rotation Dzięki temu właściwość nie pozostanie na poziomie 360 po zakończeniu animacji, co uniemożliwiłoby dodatkowe rotacje.

Uwaga

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

Rotacja względna

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

await image.RelRotateTo(360, 2000);

W tym przykładzie Image wystąpienie jest obracane o 360 stopni od pozycji początkowej w ciągu 2 sekund (2000 milisekund). Metoda RelRotateTo uzyskuje bieżącą Rotation wartość właściwości elementu na początku animacji, a następnie obraca się z tej wartości do wartości 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ą ScaleTo metody , która stopniowo zmienia Scale właściwość elementu:

await image.ScaleTo(2, 2000);

W tym przykładzie Image wystąpienie jest skalowane w górę do dwukrotnie większego rozmiaru w ciągu 2 sekund (2000 milisekund). Metoda ScaleTo uzyskuje bieżącą Scale wartość właściwości 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.

Uwaga

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

Skalowanie względne

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

await image.RelScaleTo(2, 2000);

W tym przykładzie Image wystąpienie jest skalowane w górę do dwukrotnie większego rozmiaru w ciągu 2 sekund (2000 milisekund). Metoda RelScaleTo uzyskuje bieżącą Scale wartość właściwości elementu na początku animacji, a następnie skaluje z tej wartości do wartości plus jej pierwszy argument. Dzięki temu każda animacja będzie zawsze skalować 2 z pozycji początkowej.

Skalowanie i obracanie za pomocą kotwic

Właściwości AnchorX i AnchorY elementu wizualizacji ustawiają środek skalowania lub rotacji właściwości Rotation i Scale . W związku z tym ich wartości wpływają również na RotateTo metody i ScaleTo .

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

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

Aby obrócić Image wystąpienie wokół środka układu, AnchorX właściwości i AnchorY muszą być ustawione na wartości, które są względem szerokości i wysokości Imageobiektu . W tym przykładzie środek obiektu jest definiowany jako środek Image układu, dlatego wartość domyślna AnchorX 0,5 nie wymaga zmiany. AnchorY Jednak właściwość jest ponownie definiowana jako wartość od góry Image do środka układu. Dzięki Image temu funkcja zapewnia pełny obrót 360 stopni wokół punktu środkowego układu.

Tłumaczenie

Tłumaczenie jest wykonywane przy użyciu TranslateTo metody , która stopniowo zmienia TranslationX właściwości i TranslationY elementu:

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

W tym przykładzie Image wystąpienie jest tłumaczone w poziomie i w pionie ponad 1 sekundę (1000 milisekund). Metoda TranslateTo jednocześnie tłumaczy obraz 100 jednostek niezależnych od urządzenia po lewej stronie i 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 przetłumaczenie obrazu po prawej stronie i w dół.

Ważne

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ą FadeTo metody , która stopniowo zmienia Opacity właściwość elementu:

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

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

Animacje złożone

Animacja złożona jest sekwencyjną kombinacją animacji i można ją utworzyć za await pomocą operatora :

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 Image wystąpienie jest tłumaczone przez 6 sekund (6000 milisekund). Translacja 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 Image wystąpienie jest skalowane i jednocześnie obracane w ciągu 4 sekund (4000 milisekund). Skalowanie obiektu Image używa dwóch sekwencyjnych animacji, które występują w tym samym czasie co obrót. Metoda RotateTo wykonuje bez operatora i zwraca natychmiast, z pierwszą ScaleTo animacjąawait, a następnie rozpoczynając. Operator await w pierwszej ScaleTo metodzie opóźnia drugą ScaleTo metodę do momentu ukończenia pierwszej ScaleTo metody. W tym momencie animacja RotateTo zostanie ukończona w połowie i Image zostanie obrócona o 180 stopni. W ciągu ostatnich 2 sekund (2000 milisekund) druga ScaleTo animacja 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ą Task obiekt i akceptują kolekcję metod, które każdy zwraca Task obiekt. Metoda kończy się, gdy dowolna Task.WhenAny metoda w kolekcji zakończy wykonywanie, 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 Task.WhenAny metoda zawiera dwa zadania. Pierwsze zadanie obraca Image wystąpienie 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 zostanie zakończone Task.WhenAny . Jednak mimo że RotateTo metoda jest nadal uruchomiona, druga ScaleTo metoda może się rozpocząć.

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 Task.WhenAll metoda zawiera trzy zadania, z których każda wykonuje ponad 10 minut. Każda Task z nich wykonuje inną liczbę obrotu 360 stopni – 307 obrotów dla RotateTo, 251 obrotów dla RotateXTo, i 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

Aplikacja może anulować jedną lub więcej animacji za pomocą wywołania CancelAnimations metody rozszerzenia:

image.CancelAnimations();

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