Udostępnij za pośrednictwem

Grafika i animacja systemu Android

  • Artykuł

System Android oferuje bardzo bogatą i zróżnicowaną platformę do obsługi grafiki i animacji 2D. W tym temacie przedstawiono te struktury i omówiono sposób tworzenia niestandardowych grafiki i animacji do użycia w aplikacji platformy Xamarin.Android.

Omówienie

Pomimo uruchamiania na urządzeniach, które tradycyjnie mają ograniczoną moc, najlepiej oceniane aplikacje mobilne często mają zaawansowane środowisko użytkownika (UX), wraz z wysokiej jakości grafiką i animacjami, które zapewniają intuicyjne, dynamiczne działanie. W miarę jak coraz bardziej zaawansowane aplikacje mobilne, użytkownicy zaczęli oczekiwać coraz więcej z aplikacji.

Na szczęście nowoczesne platformy mobilne mają bardzo zaawansowane platformy do tworzenia zaawansowanych animacji i niestandardowej grafiki przy zachowaniu łatwości użycia. Dzięki temu deweloperzy mogą dodawać bogatą interakcyjność przy bardzo niewielkim nakładzie pracy.

Struktury interfejsu API interfejsu użytkownika w systemie Android można podzielić na dwie kategorie: Grafika i Animacja.

Grafika jest dodatkowo podzielona na różne podejścia do wykonywania grafiki 2D i 3D. Grafika 3D jest dostępna za pośrednictwem wielu wbudowanych struktur, takich jak OpenGL ES (mobilna wersja OpenGL) i platform innych firm, takich jak MonoGame (zestaw narzędzi międzyplatformowych zgodny z zestawem narzędzi XNA). Chociaż grafika 3D nie mieści się w zakresie tego artykułu, przeanalizujemy wbudowane techniki rysowania 2D.

System Android udostępnia dwa różne interfejsy API do tworzenia grafiki 2D. Jednym z nich jest podejście deklaratywne wysokiego poziomu, a drugi programowy interfejs API niskiego poziomu:

  • Zasoby z możliwością rysowania — służą one do programowego tworzenia niestandardowej grafiki lub (zwykle) przez osadzanie instrukcji rysowania w plikach XML. Zasoby do rysowania są zwykle definiowane jako pliki XML zawierające instrukcje lub akcje dla systemu Android w celu renderowania grafiki 2D.

  • Kanwa — jest to interfejs API niskiego poziomu, który obejmuje rysowanie bezpośrednio na bazowej mapie bitowej. Zapewnia bardzo szczegółową kontrolę nad tym, co jest wyświetlane.

Oprócz tych technik graficznych 2D system Android udostępnia również kilka różnych sposobów tworzenia animacji:

  • Animacje z możliwością rysowania — system Android obsługuje również animacje ramek po klatce znane jako Animacja rysowalna. Jest to najprostszy interfejs API animacji. System Android sekwencyjnie ładuje i wyświetla zasoby z możliwością rysowania w sekwencji (podobnie jak kreskówka).

  • Wyświetl animacje — animacje widoku są oryginalnym interfejsem API animacji w systemie Android i są dostępne we wszystkich wersjach systemu Android. Ten interfejs API jest ograniczony, ponieważ będzie działać tylko z obiektami View i może wykonywać tylko proste przekształcenia w tych widokach. Animacje widoku są zwykle definiowane w plikach XML znajdujących się w folderze /Resources/anim .

  • Animacje właściwości — system Android 3.0 wprowadził nowy zestaw interfejsu API animacji znany jako animacje właściwości. Ten nowy interfejs API wprowadził rozszerzalny i elastyczny system, który może służyć do animowania właściwości dowolnego obiektu, a nie tylko Wyświetl obiekty. Ta elastyczność umożliwia hermetyzację animacji w różnych klasach, które ułatwią udostępnianie kodu.

Animacje widoku są bardziej odpowiednie dla aplikacji, które muszą obsługiwać starsze interfejsy API w wersji starszej niż Android 3.0 (poziom interfejsu API 11). W przeciwnym razie aplikacje powinny używać nowszych interfejsów API animacji właściwości z powodów wymienionych powyżej.

Wszystkie te struktury są realnymi opcjami, jednak jeśli to możliwe, preferencje powinny być podane animacjom właściwości, ponieważ jest to bardziej elastyczny interfejs API do pracy. Animacje właściwości umożliwiają hermetyzację logiki animacji w różnych klasach, co ułatwia udostępnianie kodu i upraszcza konserwację kodu.

Ułatwienia dostępu

Grafika i animacje pomagają uczynić aplikacje dla systemu Android atrakcyjnymi i zabawnymi do użycia; należy jednak pamiętać, że niektóre interakcje występują za pośrednictwem czytników ekranu, alternatywnych urządzeń wejściowych lub z wspomaganym powiększeniem. Ponadto niektóre interakcje mogą wystąpić bez możliwości dźwięku.

Aplikacje są bardziej użyteczne w takich sytuacjach, jeśli zostały zaprojektowane z myślą o ułatwieniach dostępu: zapewnianie wskazówek i pomocy nawigacji w interfejsie użytkownika oraz zapewnienie zawartości tekstowej lub opisów elementów piktorialnych interfejsu użytkownika.

Aby uzyskać więcej informacji na temat korzystania z interfejsów API ułatwień dostępu systemu Android, zapoznaj się z przewodnikiem dotyczącym ułatwień dostępu firmy Google.

Grafika 2D

Zasoby do rysowania to popularna technika w aplikacjach systemu Android. Podobnie jak w przypadku innych zasobów, zasoby z możliwością rysowania są deklaratywne — są definiowane w plikach XML. Takie podejście umożliwia czyste oddzielenie kodu od zasobów. Może to uprościć programowanie i konserwację, ponieważ nie jest konieczne zmianę kodu w celu zaktualizowania lub zmiany grafiki w aplikacji systemu Android. Jednak chociaż zasoby z możliwością rysowania są przydatne w przypadku wielu prostych i typowych wymagań graficznych, nie mają możliwości i kontroli interfejsu API kanwy.

Druga technika, korzystając z obiektu Kanwy , jest bardzo podobna do innych tradycyjnych struktur interfejsu API, takich jak Rysunek System.Drawing lub Rysunek podstawowy systemu iOS. Użycie obiektu Kanwy zapewnia największą kontrolę nad sposobem tworzenia grafiki 2D. Jest to odpowiednie w sytuacjach, w których zasób z możliwością rysowania nie będzie działać lub będzie trudny do pracy. Na przykład może być konieczne narysowanie niestandardowej kontrolki suwaka, której wygląd zmieni się na podstawie obliczeń związanych z wartością suwaka.

Najpierw przyjrzyjmy się zasobom z możliwością rysowania. Są one prostsze i obejmują najbardziej typowe niestandardowe przypadki rysunku.

Zasoby z możliwością rysowania

Zasoby możliwe do rysowania są definiowane w pliku XML w katalogu /Resources/drawable. W przeciwieństwie do osadzania plików PNG lub JPEG nie jest konieczne zapewnienie wersji zasobów z możliwością rysowania specyficznych dla gęstości. W czasie wykonywania aplikacja systemu Android załaduje te zasoby i użyje instrukcji zawartych w tych plikach XML, aby utworzyć grafikę 2D. System Android definiuje kilka różnych typów zasobów możliwych do rysowania:

  • ShapeDrawable — jest to obiekt rysowalny , który rysuje pierwotny kształt geometryczny i stosuje ograniczony zestaw efektów graficznych dla tego kształtu. Są one bardzo przydatne w przypadku elementów, takich jak dostosowywanie przycisków lub ustawianie tła elementów TextView. Zobaczymy przykład użycia ShapeDrawable w dalszej części tego artykułu.

  • StateListDrawable — jest to zasób z możliwością rysowania, który zmieni wygląd na podstawie stanu widżetu/kontrolki. Na przykład przycisk może zmienić jego wygląd w zależności od tego, czy jest naciśnięty, czy nie.

  • LayerDrawable — ten zasób z możliwością rysowania, który będzie stosem kilku innych elementów rysowalnych jeden na drugim. Przykład elementu LayerDrawable przedstawiono na poniższym zrzucie ekranu:

    Przykład warstwowyDrawable

  • TransitionDrawable — jest to warstwaDrawable, ale z jedną różnicą. Element TransitionDrawable może animować jedną warstwę widoczną nad drugą.

  • LevelListDrawable — jest to bardzo podobne do elementu StateListDrawable , w przypadku którego obraz będzie wyświetlany w oparciu o określone warunki. Jednak w przeciwieństwie do elementu StateListDrawable element LevelListDrawable wyświetla obraz na podstawie wartości całkowitej. Przykładem elementu LevelListDrawable jest wyświetlenie siły sygnału Wi-Fi. W miarę zmiany siły sygnału Wi-Fi, wyświetlane dane będą odpowiednio zmieniane.

  • ScaleDrawable ClipDrawable/ — jak implikuje ich nazwa, te elementy Drawable zapewniają zarówno funkcje skalowania, jak i wycinków. Funkcja ScaleDrawable będzie skalowana w inny element Drawable, a element ClipDrawable będzie wyciąć inny obiekt Drawable.

  • InsetDrawable — ten element Drawable będzie stosować zestawy po bokach innego zasobu drawable. Jest on używany, gdy widok wymaga tła mniejszego niż rzeczywiste granice widoku.

  • Xml BitmapDrawable — ten plik jest zestawem instrukcji w formacie XML, które mają być wykonywane na rzeczywistej mapie bitowej. Niektóre akcje, które system Android może wykonać, to tiling, dithering i anty aliasing. Jednym z bardzo typowych zastosowań jest kafelek mapy bitowej w tle układu.

Przykład z możliwością rysowania

Przyjrzyjmy się krótkiemu przykładowi sposobu tworzenia grafiki 2D przy użyciu elementu ShapeDrawable. Element ShapeDrawable może definiować jeden z czterech podstawowych kształtów: prostokąt, owalny, liniowy i pierścień. Istnieje również możliwość zastosowania podstawowych efektów, takich jak gradient, kolor i rozmiar. Poniższy kod XML jest elementem, który można znaleźć w projekcie towarzyszącym ShapeDrawable AnimationsDemo (w pliku Resources/drawable/shape_rounded_blue_rect.xml). Definiuje prostokąt z fioletowym tłem gradientu i zaokrąglonymi rogami:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- Specify a gradient for the background -->
<gradient android:angle="45"
          android:startColor="#55000066"
          android:centerColor="#00000000"
          android:endColor="#00000000"
          android:centerX="0.75" />

<padding android:left="5dp"
          android:right="5dp"
          android:top="5dp"
          android:bottom="5dp" />

<corners android:topLeftRadius="10dp"
          android:topRightRadius="10dp"
          android:bottomLeftRadius="10dp"
          android:bottomRightRadius="10dp" />
</shape>

Możemy odwoływać się do tego zasobu rysowalnego deklaratywnie w układzie lub innym rysunku, jak pokazano w poniższym kodzie XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#33000000">
    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerInParent="true"
              android:background="@drawable/shape_rounded_blue_rect"
              android:text="@string/message_shapedrawable" />
</RelativeLayout>

Zasoby możliwe do rysowania można również stosować programowo. Poniższy fragment kodu pokazuje, jak programowo ustawić tło kontrolki TextView:

TextView tv = FindViewById<TextView>(Resource.Id.shapeDrawableTextView);
tv.SetBackgroundResource(Resource.Drawable.shape_rounded_blue_rect);

Aby zobaczyć, jak to wygląda, uruchom projekt AnimationsDemo i wybierz element Rysuj kształt z menu głównego. Powinien zostać wyświetlony komunikat podobny do poniższego zrzutu ekranu:

Widok tekstowy z niestandardowym tłem, rysowany z gradientem i zaokrąglonymi rogami

Aby uzyskać więcej informacji na temat elementów XML i składni zasobów z możliwością rysowania, zapoznaj się z dokumentacją firmy Google.

Korzystanie z interfejsu API rysunku kanwy

Rysowalne są potężne, ale mają swoje ograniczenia. Niektóre elementy nie są możliwe lub bardzo złożone (na przykład zastosowanie filtru do obrazu, który został wykonany przez aparat na urządzeniu). Bardzo trudno byłoby zastosować redukcję czerwonego oka przy użyciu zasobu rysowalnego. Zamiast tego interfejs API kanwy umożliwia aplikacji bardzo precyzyjną kontrolę w celu selektywnego zmieniania kolorów w określonej części obrazu.

Jedną z klas, która jest często używana z kanwą , jest klasa Paint . Ta klasa zawiera informacje o kolorze i stylu na temat rysowania. Służy do zapewniania takich kolorów i przezroczystości.

Interfejs API kanwy używa modelu malarza do rysowania grafiki 2D. Operacje są stosowane w kolejnych warstwach na siebie. Każda operacja obejmie jakiś obszar bazowej mapy bitowej. Gdy obszar nakłada się na wcześniej malowany obszar, nowa farba częściowo lub całkowicie zasłoni starą. Jest to taki sam sposób, w jaki działa wiele innych interfejsów API rysunku, takich jak System.Drawing i Core Graphics systemu iOS.

Istnieją dwa sposoby uzyskania Canvas obiektu. Pierwszy sposób polega na zdefiniowaniu obiektu mapy bitowej, a następnie utworzeniu Canvas wystąpienia obiektu. Na przykład poniższy fragment kodu tworzy nową kanwę z bazową mapą bitową:

Bitmap bitmap = Bitmap.CreateBitmap(100, 100, Bitmap.Config.Argb8888);
Canvas canvas = new Canvas(b);

Innym sposobem uzyskania obiektu jest metoda wywołania zwrotnego Canvas OnDraw, która jest udostępniana klasie bazowej View. System Android wywołuje tę metodę, gdy decyduje, że widok musi rysować się i przechodzi do obiektu, z który Canvas ma pracować widok.

Klasa Canvas uwidacznia metody programowo udostępniające instrukcje rysowania. Na przykład:

  • Canvas.DrawPaint — wypełnia mapę bitową całej kanwy za pomocą określonej farby.

  • Canvas.DrawPath — rysuje określony kształt geometryczny przy użyciu określonej farby.

  • Canvas.DrawText — rysuje tekst na kanwie z określonym kolorem. Tekst jest rysowany w lokalizacji x,y .

Rysowanie za pomocą interfejsu API kanwy

Oto przykład działania interfejsu API kanwy. Poniższy fragment kodu pokazuje, jak narysować widok:

public class MyView : View
{
    protected override void OnDraw(Canvas canvas)
    {
        base.OnDraw(canvas);
        Paint green = new Paint {
            AntiAlias = true,
            Color = Color.Rgb(0x99, 0xcc, 0),
        };
        green.SetStyle(Paint.Style.FillAndStroke);

        Paint red = new Paint {
            AntiAlias = true,
            Color = Color.Rgb(0xff, 0x44, 0x44)
        };
        red.SetStyle(Paint.Style.FillAndStroke);

        float middle = canvas.Width * 0.25f;
        canvas.DrawPaint(red);
        canvas.DrawRect(0, 0, middle, canvas.Height, green);
    }
}

Powyższy kod najpierw tworzy czerwoną farbę i zielony obiekt farby. Wypełnia zawartość kanwy czerwoną, a następnie nakazuje kanwie narysować zielony prostokąt, który wynosi 25% szerokości kanwy. Przykład tej funkcji można zobaczyć w AnimationsDemo projekcie dołączonym do kodu źródłowego tego artykułu. Uruchamiając aplikację i wybierając element Rysunek z menu głównego, powinien zostać wyświetlony ekran podobny do następującego:

Ekran z czerwoną farbą i zielonymi obiektami farby

Animacja

Użytkownicy lubią rzeczy przenoszone w swoich aplikacjach. Animacje to doskonały sposób na ulepszenie środowiska użytkownika aplikacji i ułatwienie jej wyróżniania. Najlepsze animacje to te, które użytkownicy nie zauważają, ponieważ czują się naturalni. System Android udostępnia następujące trzy interfejsy API dla animacji:

  • Wyświetl animację — jest to oryginalny interfejs API. Te animacje są powiązane z określonym widokiem i mogą wykonywać proste przekształcenia zawartości widoku. Ze względu na prostotę ten interfejs API jest nadal przydatny w przypadku takich elementów jak animacje alfa, rotacje itd.

  • Animacja właściwości — animacje właściwości zostały wprowadzone w systemie Android 3.0. Umożliwiają one aplikacji animowanie prawie niczego. Animacje właściwości mogą służyć do zmiany dowolnej właściwości dowolnego obiektu, nawet jeśli ten obiekt nie jest widoczny na ekranie.

  • Animacja z możliwością rysowania — jest to specjalny zasób z możliwością rysowania, który służy do stosowania bardzo prostego efektu animacji do układów.

Ogólnie rzecz biorąc, animacja właściwości jest preferowanym systemem do użycia, ponieważ jest bardziej elastyczny i oferuje więcej funkcji.

Wyświetlanie animacji

Animacje wyświetlania są ograniczone do widoków i mogą wykonywać tylko animacje na wartościach, takich jak punkty początkowe i końcowe, rozmiar, rotacja i przezroczystość. Te typy animacji są zwykle określane jako animacje animowane. Animacje wyświetlania można definiować na dwa sposoby — programowo w kodzie lub przy użyciu plików XML. Pliki XML są preferowanym sposobem deklarowania animacji wyświetlania, ponieważ są bardziej czytelne i łatwiejsze do utrzymania.

Pliki XML animacji będą przechowywane w /Resources/anim katalogu projektu Xamarin.Android. Ten plik musi mieć jeden z następujących elementów jako element główny :

  • alpha – animacja zanikania lub zanikania.

  • rotate – animacja rotacji.

  • scale — animacja zmiany rozmiaru.

  • translate – ruch poziomy i/lub pionowy.

  • set — kontener, który może zawierać co najmniej jeden z innych elementów animacji.

Domyślnie wszystkie animacje w pliku XML będą stosowane jednocześnie. Aby animacje miały miejsce sekwencyjnie, ustaw android:startOffset atrybut na jednym z elementów zdefiniowanych powyżej.

Istnieje możliwość wpływania na szybkość zmian w animacji przy użyciu interpolatora. Interpolator umożliwia przyspieszenie, powtarzanie lub zmniejszanie efektów animacji. Platforma Android udostępnia kilka interpolatorów z pudełka, takich jak (ale nie tylko):

  • AccelerateInterpolator / DecelerateInterpolator – te interpolatory zwiększają lub zmniejszają szybkość zmian w animacji.

  • BounceInterpolator – zmiana odbija się na końcu.

  • LinearInterpolator — szybkość zmian jest stała.

Poniższy kod XML przedstawia przykład pliku animacji, który łączy niektóre z tych elementów:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android=http://schemas.android.com/apk/res/android
     android:shareInterpolator="false">

    <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator"
           android:fromXScale="1.0"
           android:toXScale="1.4"
           android:fromYScale="1.0"
           android:toYScale="0.6"
           android:pivotX="50%"
           android:pivotY="50%"
           android:fillEnabled="true"
           android:fillAfter="false"
           android:duration="700" />

    <set android:interpolator="@android:anim/accelerate_interpolator">
        <scale android:fromXScale="1.4"
               android:toXScale="0.0"
               android:fromYScale="0.6"
               android:toYScale="0.0"
               android:pivotX="50%"
               android:pivotY="50%"
               android:fillEnabled="true"
               android:fillBefore="false"
               android:fillAfter="true"
               android:startOffset="700"
               android:duration="400" />

        <rotate android:fromDegrees="0"
                android:toDegrees="-45"
                android:toYScale="0.0"
                android:pivotX="50%"
                android:pivotY="50%"
                android:fillEnabled="true"
                android:fillBefore="false"
                android:fillAfter="true"
                android:startOffset="700"
                android:duration="400" />
    </set>
</set>

Ta animacja będzie wykonywać wszystkie animacje jednocześnie. Pierwsza animacja skalowania rozciągnie obraz w poziomie i zmniejszy go w pionie, a następnie obraz zostanie jednocześnie obrócony w 45 stopni w kierunku przeciwnym do wskazówek zegara i zmniejszy się, znikając z ekranu.

Animacja może być stosowana programowo do widoku przez zawyżanie animacji, a następnie zastosowanie jej do widoku. System Android udostępnia klasę Android.Views.Animations.AnimationUtils pomocnika, która zawyża zasób animacji i zwraca wystąpienie klasy Android.Views.Animations.Animation. Ten obiekt jest stosowany do widoku przez wywołanie StartAnimation i przekazanie Animation obiektu. Poniższy fragment kodu przedstawia przykład tego kodu:

Animation myAnimation = AnimationUtils.LoadAnimation(Resource.Animation.MyAnimation);
ImageView myImage = FindViewById<ImageView>(Resource.Id.imageView1);
myImage.StartAnimation(myAnimation);

Teraz, gdy mamy podstawową wiedzę na temat sposobu działania animacji widoku, przejdźmy do animacji właściwości.

Animacje właściwości

Animatorzy nieruchomości to nowy interfejs API, który został wprowadzony w systemie Android 3.0. Zapewniają one bardziej rozszerzalny interfejs API, który może służyć do animowania dowolnej właściwości na dowolnym obiekcie.

Wszystkie animacje właściwości są tworzone przez wystąpienia podklasy Animator . Aplikacje nie korzystają bezpośrednio z tej klasy, zamiast tego używają jednej z jej podklas:

  • ValueAnimator — ta klasa jest najważniejszą klasą w całym interfejsie API animacji właściwości. Oblicza wartości właściwości, które należy zmienić. Element ViewAnimator nie aktualizuje bezpośrednio tych wartości. Zamiast tego wywołuje zdarzenia, których można użyć do aktualizowania animowanych obiektów.

  • ObjectAnimator — ta klasa jest podklasą .ValueAnimator Ma to uprościć proces animowania obiektów, akceptując obiekt docelowy i właściwość do aktualizacji.

  • AnimationSet — ta klasa jest odpowiedzialna za organizowanie sposobu działania animacji względem siebie. Animacje mogą być uruchamiane jednocześnie, sekwencyjnie lub z określonym opóźnieniem między nimi.

Ewaluatory to specjalne klasy, które są używane przez animatorów do obliczania nowych wartości podczas animacji. Poza tym system Android udostępnia następujące ewaluatory:

  • IntEvaluator — oblicza wartości właściwości liczb całkowitych.

  • FloatEvaluator — oblicza wartości właściwości zmiennoprzecinkowych.

  • ArgbEvaluator — oblicza wartości właściwości kolorów.

Jeśli właściwość, która jest animowana, nie jest ani koloremfloatint, aplikacje mogą tworzyć własne ewaluatora przez zaimplementowanie interfejsuITypeEvaluator. (Implementowanie niestandardowych ewaluatorów wykracza poza zakres tego tematu).

Korzystanie z klasy ValueAnimator

Istnieją dwie części do dowolnej animacji: obliczanie animowanych wartości, a następnie ustawianie tych wartości we właściwościach w niektórych obiektach. Funkcja ValueAnimator oblicza tylko wartości, ale nie będzie działać bezpośrednio na obiektach. Zamiast tego obiekty zostaną zaktualizowane wewnątrz programów obsługi zdarzeń, które będą wywoływane w ciągu cyklu życia animacji. Ten projekt umożliwia zaktualizowanie kilku właściwości z jednej animowanej wartości.

Wystąpienie klasy ValueAnimator można uzyskać, wywołując jedną z następujących metod fabryki:

  • ValueAnimator.OfInt
  • ValueAnimator.OfFloat
  • ValueAnimator.OfObject

Po wykonaniu ValueAnimator tej czynności wystąpienie musi mieć ustawiony czas trwania, a następnie można go uruchomić. W poniższym przykładzie pokazano, jak animować wartość z zakresu od 0 do 1 w przedziale 1000 milisekund:

ValueAnimator animator = ValueAnimator.OfInt(0, 100);
animator.SetDuration(1000);
animator.Start();

Ale sam fragment kodu powyżej nie jest bardzo przydatny — animacja zostanie uruchomiona, ale nie ma miejsca docelowego dla zaktualizowanej wartości. Klasa Animator zgłosi zdarzenie Update, gdy zdecyduje, że konieczne jest informowanie odbiorników o nowej wartości. Aplikacje mogą zapewnić procedurę obsługi zdarzeń, aby reagować na to zdarzenie, jak pokazano w poniższym fragmencie kodu:

MyCustomObject myObj = new MyCustomObject();
myObj.SomeIntegerValue = -1;

animator.Update += (object sender, ValueAnimator.AnimatorUpdateEventArgs e) =>
{
    int newValue = (int) e.Animation.AnimatedValue;
    // Apply this new value to the object being animated.
    myObj.SomeIntegerValue = newValue;
};

Teraz, po zapoznaniu się z tematem ValueAnimator, dowiedz się więcej o systemie ObjectAnimator.

Korzystanie z obiektu ObjectAnimator

ObjectAnimator to podklasa ViewAnimator , która łączy aparat chronometrażu i obliczenia ValueAnimator wartości obiektu z logiką wymaganą do łączenia procedur obsługi zdarzeń. Aplikacja ValueAnimator wymaga jawnego połączenia programu obsługi zdarzeń — ObjectAnimator zajmie się tym krokiem.

Interfejs API dla ObjectAnimator programu jest bardzo podobny do interfejsu API dla ViewAnimatorelementu , ale wymaga podania obiektu i nazwy właściwości do zaktualizowania. W poniższym przykładzie pokazano przykład użycia elementu ObjectAnimator:

MyCustomObject myObj = new MyCustomObject();
myObj.SomeIntegerValue = -1;

ObjectAnimator animator = ObjectAnimator.OfFloat(myObj, "SomeIntegerValue", 0, 100);
animator.SetDuration(1000);
animator.Start();

Jak widać w poprzednim fragmencie kodu, ObjectAnimator można zmniejszyć i uprościć kod niezbędny do animowania obiektu.

Animacje z możliwością rysowania

Końcowy interfejs API animacji to interfejs API animacji z możliwością rysowania. Animacje z możliwością rysowania ładują serię zasobów z możliwością rysowania jeden po drugim i wyświetlają je sekwencyjnie, podobnie jak kreskówka flip-it.

Zasoby możliwe do rysowania są definiowane w pliku XML, który ma <animation-list> element jako element główny i serię <item> elementów, które definiują każdą ramkę w animacji. Ten plik XML jest przechowywany w /Resource/drawable folderze aplikacji. Poniższy kod XML jest przykładem animacji z możliwością rysowania:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/asteroid01" android:duration="100" />
  <item android:drawable="@drawable/asteroid02" android:duration="100" />
  <item android:drawable="@drawable/asteroid03" android:duration="100" />
  <item android:drawable="@drawable/asteroid04" android:duration="100" />
  <item android:drawable="@drawable/asteroid05" android:duration="100" />
  <item android:drawable="@drawable/asteroid06" android:duration="100" />
</animation-list>

Ta animacja będzie działać przez sześć klatek. Atrybut android:duration deklaruje, jak długo będzie wyświetlana każda ramka. Następny fragment kodu przedstawia przykład tworzenia animacji z możliwością rysowania i uruchamiania go po kliknięciu przycisku na ekranie przez użytkownika:

AnimationDrawable _asteroidDrawable;

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);
    SetContentView(Resource.Layout.Main);

    _asteroidDrawable = (Android.Graphics.Drawables.AnimationDrawable)
    Resources.GetDrawable(Resource.Drawable.spinning_asteroid);

    ImageView asteroidImage = FindViewById<ImageView>(Resource.Id.imageView2);
    asteroidImage.SetImageDrawable((Android.Graphics.Drawables.Drawable) _asteroidDrawable);

    Button asteroidButton = FindViewById<Button>(Resource.Id.spinAsteroid);
    asteroidButton.Click += (sender, e) =>
    {
        _asteroidDrawable.Start();
    };
}

W tym momencie omówiliśmy podstawy interfejsów API animacji dostępnych w aplikacji systemu Android.

Podsumowanie

W tym artykule przedstawiono wiele nowych pojęć i interfejsów API, które ułatwiają dodawanie grafiki do aplikacji systemu Android. Najpierw omówiliśmy różne interfejsy API grafiki 2D i pokazano, jak system Android umożliwia aplikacjom rysowanie bezpośrednio na ekranie przy użyciu obiektu Kanwy. Widzieliśmy również kilka alternatywnych technik, które umożliwiają deklaratywne tworzenie grafiki przy użyciu plików XML. Następnie omówiliśmy stare i nowe interfejsy API do tworzenia animacji w systemie Android.