Animuj rysowalne grafiki

Wypróbuj sposób tworzenia wiadomości
Jetpack Compose to zalecany zestaw narzędzi UI na Androida. Dowiedz się, jak korzystać z animacji w Compose
Animuj elementy rysunkowe wektorowe → .
Rysunek 1. Animowany element rysowalny.

Czasami obrazy muszą być animowane. Przydaje się to, gdy chcesz wyświetlać niestandardowej animacji wczytywania złożonej z kilku obrazów lub jeśli chcesz, aby ikona zmieniała się po działania. Android udostępnia 2 opcje animowania elementów, które można rysować.

Pierwszą opcją jest użycie AnimationDrawable. Ten pozwala określić kilka statycznych pliki rysowalne, które wyświetlają się pojedynczo w utworzyć animację. Druga opcja to użycie AnimatedVectorDrawable, która umożliwia animowanie właściwości obiektu rysowalnego wektorowego.

Użyj obiektu AnimationDrawable

Jednym ze sposobów utworzenia animacji jest wczytanie sekwencji zasobów, które można narysować, takich jak rolka kliszy. Zajęcia AnimationDrawable jest podstawą tego rodzaju animacji.

Klatki animacji możesz zdefiniować w kodzie za pomocą parametru AnimationDrawable klasy API, ale łatwiej jest zdefiniować je w pojedynczym pliku XML z listą ramek, które tworząc animację. Plik XML tego rodzaju animacji znajduje się w: res/drawable/ w katalogu projektu Androida. W tym przypadku instrukcje zawierają informacje o zamówieniu i czasie trwania dla każdej klatki animacji.

Plik XML składa się z elementu <animation-list> stanowiącego węzeł główny i elementu seria podrzędnych węzłów <item>, z których każdy definiuje ramkę – zasób rysowalny i czasu 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>

Ta animacja wyświetla się w 3 klatkach. Ustawiam android:oneshot atrybutu listy na true sprawia, że cykl zmienia się raz, a następnie zatrzymuje i przytrzymuje w ostatniej klatce. Jeśli ustawisz wartość false na android:oneshot, animacja będzie zapętlona.

Jeśli zapiszesz ten plik XML jako rocket_thrust.xml w res/drawable/ projektu, możesz dodać go jako obraz tła do View, a następnie Zadzwoń do start(), by włączyć odtwarzanie. Oto przykład działania, w którym animacja jest dodawana do ImageView i potem animowany po dotknięciu ekranu:

Kotlin

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() })
}

Java

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();
      }
  });
}

Warto zauważyć, że metoda start() wywoływana Nie można wywołać funkcji AnimationDrawable podczas metody onCreate() na Activity, ponieważ AnimationDrawable nie jest jeszcze w pełni połączony z okno. Aby odtworzyć animację od razu (bez konieczności interakcji), możesz ją wywołać z onStart() w Activity, która jest wywoływana, gdy Android udostępni widok na ekranie.

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

Użyj obiektu AnimatedVectorDrawable

Obiekt rysowalny wektorowo to typ elementu rysowalnego, który można skalować bez rozpikselowania ani rozmycia. AnimatedVectorDrawable zajęcia – oraz AnimatedVectorDrawableCompat, aby zapewnić zgodność wsteczną – pozwala animować właściwości obiektu rysowalnego wektora, takich jak obrót lub zmiana danych ścieżki w taki sposób, aby przekształcić je w inny obraz.

Animowane obiekty rysunkowe wektorowe zwykle definiuje się w trzech plikach XML:

  • Obiekt rysowalny wektorowo z elementem <vector> w res/drawable/
  • Animowany wektor rysowalny z elementem <animated-vector> w res/drawable/
  • Co najmniej jeden animator obiektów z elementem <objectAnimator> w res/animator/

Animowane obiekty rysunkowe wektorowe mogą animować atrybuty atrybutów <group> i <path> elementów. Element <group> definiuje zbiór ścieżek lub podgrup, a element <path> wskazuje ścieżki do narysowania.

Aby animować wektorowy obiekt rysowany w formie wektorowej, użyj komponentu android:name pozwalają nadać im unikalne nazwy, dzięki czemu możesz odwołać się do nich od animatora. definicji. Na 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 animacji wektorów rysowalnych odnosi się do grup i ścieżek w rysowaniu wektorowym pod ich imionami i nazwiskami:

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 przedstawiają ObjectAnimator lub AnimatorSet obiektów. pierwszy animator w tym przykładzie obraca grupę docelową o 360 stopni:

res/animator/rotation.xml

<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

Drugi animator w tym przykładzie przekształca ścieżkę obiektu rysowanego wektora z jednego kształtu na innego użytkownika. Ścieżki muszą być zgodne z przekształcaniem: muszą zawierać tę samą liczbę poleceń i tę samą liczbę parametrów dla każdego polecenia.

res/animator/ścieżka_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 wynik AnimatedVectorDrawable:

Rysunek 2. AnimatedVectorDrawable.

Podgląd animowanego wektora rysowalnego (AVD)

Narzędzie Animated Vector Drawable w Android Studio pozwala wyświetlić podgląd animacji rysowalne zasoby. To narzędzie pozwala wyświetlić podgląd <animation-list>, <animated-vector> i <animated-selector> zasoby związane z pracą Android Studio i ułatwia dopracowywanie animacji niestandardowych.

Użytkownik wyświetlający podgląd i odtwarzający animację w Android Studio
Rysunek 3. Narzędzie do rysowania wektorów animowanego w Android Studio.

Więcej informacji znajdziesz w dokumentacji interfejsu API w sekcji AnimatedVectorDrawable