Animuj rysowalne grafiki

Wypróbuj metodę Compose

Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak używać animacji w Compose.

Animowanie rysunków wektorowych →

W niektórych sytuacjach obrazy muszą być animowane. Jest to przydatne, jeśli chcesz wyświetlać niestandardową animację wczytywania złożoną z kilku obrazów lub jeśli chcesz, aby ikona zmieniała się po działaniu użytkownika. Android oferuje 2 opcje animowania elementów rysowalnych.

Pierwszą opcją jest użycie AnimationDrawable. Dzięki temu możesz określić kilka statycznych obiektów rysowalnych, które będą wyświetlane kolejno, aby utworzyć animację. Drugą opcją jest użycie AnimatedVectorDrawable, które umożliwia animowanie właściwości obiektu rysowalnego wektorowo.

Używanie klasy AnimationDrawable

Jednym ze sposobów tworzenia animacji jest wczytanie sekwencji zasobów rysowalnych, takich jak rolka filmu. AnimationDrawableKlasa jest podstawą tego rodzaju animacji rysowalnych.

Klatki animacji możesz zdefiniować w kodzie za pomocą interfejsu API klasy AnimationDrawable, ale łatwiej jest zdefiniować je za pomocą jednego pliku XML, który zawiera listę klatek składających się na animację. Plik XML tego rodzaju animacji powinien znajdować się w katalogu res/drawable/ projektu aplikacji na Androida. W tym przypadku instrukcje określają kolejność i czas trwania każdej klatki animacji.

Plik XML składa się z elementu <animation-list> jako węzła głównego i serii węzłów podrzędnych <item>, z których każdy definiuje klatkę – obiekt rysowalny i jego czas trwania. Oto przykładowy plik XML animacji Drawable:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

Animacja trwa 3 klatki. Ustawienie atrybutu android:oneshot listy na true powoduje, że lista jest odtwarzana w pętli tylko raz, a następnie zatrzymuje się i wyświetla ostatnią klatkę. Jeśli ustawisz wartość android:oneshot na false, animacja będzie się zapętlać.

Jeśli zapiszesz ten plik XML jako rocket_thrust.xml w katalogu res/drawable/ projektu, możesz dodać go jako obraz tła do elementu View, a następnie wywołać funkcję start(), aby go odtworzyć. Oto przykład aktywności, w której animacja jest dodawana do elementu ImageView, a następnie animowana po dotknięciu ekranu:

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

Pamiętaj, że metody start() wywoływanej w AnimationDrawable nie można wywołać podczas metody onCreate() w Activity, ponieważ AnimationDrawable nie jest jeszcze w pełni dołączony do okna. Aby odtworzyć animację od razu, bez konieczności interakcji, możesz wywołać ją z metody onStart() w obiekcie Activity, która jest wywoływana, gdy Android wyświetla widok na ekranie.

Więcej informacji o składni XML oraz dostępnych tagach i atrybutach znajdziesz w artykule Zasoby animacji.

Używanie klasy AnimatedVectorDrawable

Obiekt rysowalny wektorowo to typ obiektu rysowalnego, który można skalować bez pikselizacji i rozmycia. Klasa AnimatedVectorDrawable– i  AnimatedVectorDrawableCompat dla zachowania zgodności wstecznej – umożliwia animowanie właściwości rysunku wektorowego, takich jak obracanie go lub zmiana danych ścieżki w celu przekształcenia go w inny obraz.

Animowane rysunki wektorowe są zwykle definiowane w 3 plikach XML:

• Obiekt rysowalny wektorowo z elementem <vector> w res/drawable/.
• Animowany obiekt rysowalny wektorowo z elementem <animated-vector> w res/drawable/.
• Co najmniej 1 animator obiektu z elementem <objectAnimator> w res/animator/.

Animowane rysunki wektorowe mogą animować atrybuty elementów <group> i <path>. Element <group> definiuje zestaw ścieżek lub podgrup, a element <path> definiuje ścieżki do narysowania.

Gdy definiujesz obiekt rysowalny wektorowo, który chcesz animować, użyj atrybutu android:name, aby przypisać unikalną nazwę do grup i ścieżek. Dzięki temu będziesz się do nich odwoływać w definicjach animatora. Przykład:

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

Definicja animowanego rysunku wektorowego odwołuje się do grup i ścieżek w rysunku wektorowym za pomocą ich nazw:

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

Definicje animacji reprezentują obiekty ObjectAnimator lub AnimatorSet. Pierwszy animator w tym przykładzie obraca grupę docelową o 360 stopni:

res/animator/rotation.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

Drugi animator w tym przykładzie przekształca ścieżkę obiektu rysowalnego wektorowo z jednego kształtu w inny. Ścieżki muszą być zgodne pod względem przekształcania: muszą mieć tę samą liczbę poleceń i tę samą liczbę parametrów dla każdego polecenia.

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

Oto wynikowy AnimatedVectorDrawable:

Podgląd animowanego obiektu rysowalnego wektorowo (AVD)

Narzędzie Animated Vector Drawable w Android Studio umożliwia wyświetlanie podglądu animowanych zasobów rysowalnych. To narzędzie pomaga wyświetlać podgląd zasobów <animation-list>, <animated-vector> i <animated-selector> w Android Studio oraz ułatwia dopracowywanie animacji niestandardowych.

Więcej informacji znajdziesz w dokumentacji interfejsu API AnimatedVectorDrawable.