Pokazywanie i ukrywanie widoku za pomocą animacji

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

Przenikanie → .

Podczas używania aplikacji na ekranie pojawiają się nowe informacje, a stare i stare zostały usunięte. Natychmiastowa zmiana tego, co pokazuje się na ekranie, przykuwają uwagę, przez co użytkownicy mogą przegapić nowe treści, które pojawiają się nagle. Animacje są wolne Porównuje zmiany i ruch, aby przyciągnąć uwagę użytkownika jest bardziej oczywiste.

Istnieją 3 popularne animacje, których można użyć do pokazania lub ukrycia widoku: ujawnianie animacje, animacje przenikania i cardflip.

Utwórz animację przenikania

Animacja przenikająca (nazywana też przenikaniem) stopniowo zanika jeden View lub ViewGroup jednocześnie znikają z innego. Ta animacja jest przydatna, gdy chcesz: przełączać treści lub widoki w aplikacji. Pokazana tutaj animacja przenikania korzysta z: ViewPropertyAnimator który jest dostępny na Androidzie 3.1 (poziom interfejsu API 12) i nowszym.

Oto przykład przejścia ze wskaźnika postępu na treść tekstową:

Tworzenie widoków

Utwórz dwa widoki, które będą zanikać. Ten przykład pozwala utworzyć wskaźnik postępu i przewijany widok tekstowy:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView style="?android:textAppearanceMedium"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum"
            android:padding="16dp" />

    </ScrollView>

    <ProgressBar android:id="@+id/loading_spinner"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

Konfigurowanie przenikania animacji

Aby skonfigurować animację przenikania, wykonaj te czynności:

1. Utwórz zmienne składowe dla widoków, które chcesz przenikać. Potrzebujesz te odwołania później podczas modyfikowania widoków w trakcie animacji.
2. Ustaw widoczność zaciemnianego widoku na GONE Spowoduje to zablokowanie wyświetlania nie korzysta z przestrzeni układu, co pomija go w obliczeniach układu, co przyspiesza przetwarzanie w górę
3. Pamięć podręczna config_shortAnimTime do właściwości systemowej. Ta właściwość definiuje standardowy „krótki” czas trwania animacji. Ten czas trwania jest odpowiedni w przypadku subtelnych animacji lub które często się pojawiają. config_longAnimTime oraz config_mediumAnimTime .

Oto przykład, w którym wykorzystano układ z poprzedniego fragmentu kodu jako widok treści aktywności:

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_crossfade)

        contentView = findViewById(R.id.content)
        loadingView = findViewById(R.id.loading_spinner)

        // Initially hide the content view.
        contentView.visibility = View.GONE

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = resources.getInteger(android.R.integer.config_shortAnimTime)
    }
    ...
}

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crossfade);

        contentView = findViewById(R.id.content);
        loadingView = findViewById(R.id.loading_spinner);

        // Initially hide the content view.
        contentView.setVisibility(View.GONE);

        // Retrieve and cache the system's default "short" animation time.
        shortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }
    ...
}

Przechodzenie między widokami

Gdy widoki są skonfigurowane prawidłowo, możesz je przełączać w ten sposób:

1. Dla widoku, który się zanika, ustaw wartość alfa na 0 i widoczność do VISIBLE od początkowego poziomu ustawienie GONE. Dzięki temu widok jest widoczny, ale przezroczysty.
2. Dla widoku, który zanika, animuj jego wartość alfa od 0 do 1. W przypadku atrybutu zanikający widok, należy animować wartość alfa od 1 do 0.
3. Zastosowanie onAnimationEnd() w Animator.AnimatorListener, ustaw widoczność zanikającego widoku na GONE. Mimo że wartość alfa wynosi 0, ustawienie widoczności widoku na GONE uniemożliwia jego wyświetlenie nie korzysta z przestrzeni układu, co pomija go w obliczeniach układu, co przyspiesza w trakcie przetwarzania.

Oto przykład:

class CrossfadeActivity : Activity() {

    private lateinit var contentView: View
    private lateinit var loadingView: View
    private var shortAnimationDuration: Int = 0
    ...
    private fun crossfade() {
        contentView.apply {
            // Set the content view to 0% opacity but visible, so that it is
            // visible but fully transparent during the animation.
            alpha = 0f
            visibility = View.VISIBLE

            // Animate the content view to 100% opacity and clear any animation
            // listener set on the view.
            animate()
                    .alpha(1f)
                    .setDuration(shortAnimationDuration.toLong())
                    .setListener(null)
        }
        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration.toLong())
                .setListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator) {
                        loadingView.visibility = View.GONE
                    }
                })
    }
}

public class CrossfadeActivity extends Activity {

    private View contentView;
    private View loadingView;
    private int shortAnimationDuration;
    ...
    private void crossfade() {

        // Set the content view to 0% opacity but visible, so that it is
        // visible but fully transparent during the animation.
        contentView.setAlpha(0f);
        contentView.setVisibility(View.VISIBLE);

        // Animate the content view to 100% opacity and clear any animation
        // listener set on the view.
        contentView.animate()
                .alpha(1f)
                .setDuration(shortAnimationDuration)
                .setListener(null);

        // Animate the loading view to 0% opacity. After the animation ends,
        // set its visibility to GONE as an optimization step so it doesn't
        // participate in layout passes.
        loadingView.animate()
                .alpha(0f)
                .setDuration(shortAnimationDuration)
                .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        loadingView.setVisibility(View.GONE);
                    }
                });
    }
}

Utwórz animację odwrócenia karty

Odwrócenia karty przełączają się między widokami treści, pokazując animację, która emuluje odwraca się kartę. Animacja odwrócenia karty wykorzystuje FragmentTransaction

Tak wygląda odwrócenie karty:

Tworzenie obiektów animacji

Aby utworzyć animację odwrócenia karty, potrzebujesz 4 animatorów. Dwóch animatorów gdy przód karty przesuwa się na zewnątrz i w lewo oraz gdy jest animowana. do lewej i od lewej. Pozostałe dwa animacje są używane, gdy tył karty pojawia się w ruchu i w prawo oraz w prawo i na zewnątrz.

card_flip_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_left_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 1. See startOffset. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

card_flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="@integer/card_flip_time_full" />

    <!-- Halfway through the rotation, set the alpha to 0. See startOffset. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="@integer/card_flip_time_half"
        android:duration="1" />
</set>

Tworzenie widoków

Każda strona karty to oddzielny układ, który może zawierać dowolne treści, , np. dwa widoki tekstu, dwa obrazy lub dowolną kombinację widoków między nimi. Korzystaj z dwóch układów we fragmentach, które będziesz później animować. ten układ tworzy jedną stronę karty z tekstem:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#a6c"
    android:padding="16dp"
    android:gravity="bottom">

    <TextView android:id="@android:id/text1"
        style="?android:textAppearanceLarge"
        android:textStyle="bold"
        android:textColor="#fff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_title" />

    <TextView style="?android:textAppearanceSmall"
        android:textAllCaps="true"
        android:textColor="#80ffffff"
        android:textStyle="bold"
        android:lineSpacingMultiplier="1.2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/card_back_description" />

</LinearLayout>

Kolejny układ tworzy drugą stronę karty, ImageView:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/image1"
    android:scaleType="centerCrop"
    android:contentDescription="@string/description_image_1" />

Tworzenie fragmentów

Utwórz klasy fragmentów dla przedniej i tylnej strony karty. We fragmencie klas, zwraca układy utworzone przez onCreateView() . Można następnie utworzyć wystąpienia tego fragmentu w aktywności nadrzędnej przy których chcesz ją wyświetlić.

Przykład poniżej pokazuje zagnieżdżone klasy fragmentów w aktywności nadrzędnej który z nich korzysta:

class CardFlipActivity : FragmentActivity() {
    ...
    /**

                    *   A fragment representing the front of the card.
     */
    class CardFrontFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_front, container, false)
    }

    /**
    *   A fragment representing the back of the card.
    */
    class CardBackFragment : Fragment() {

    override fun onCreateView(
                inflater: LayoutInflater,
                container: ViewGroup?,
                savedInstanceState: Bundle?
    ): View = inflater.inflate(R.layout.fragment_card_back, container, false)
    }
}

public class CardFlipActivity extends FragmentActivity {
    ...
    /**
    *   A fragment representing the front of the card.
    */
    public class CardFrontFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_front, container, false);
    }
    }

    /**
    *   A fragment representing the back of the card.
    */
    public class CardBackFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            return inflater.inflate(R.layout.fragment_card_back, container, false);
    }
    }
}

Animuj odwrócenie karty

Wyświetl fragmenty w aktywności nadrzędnej. Aby to zrobić, utwórz układ za Twoją aktywność. Ten przykład pozwala utworzyć FrameLayout, które możesz dodać fragmentami do pliku w czasie działania:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

W kodzie aktywności ustaw widok treści na utworzony przez siebie układ. Warto pokazywać domyślny fragment podczas tworzenia aktywności. Z przykładu poniżej dowiesz się, jak wyświetlić przód karty według: domyślnie:

class CardFlipActivity : FragmentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_activity_card_flip)
        if (savedInstanceState == null) {
            supportFragmentManager.beginTransaction()
                    .add(R.id.container, CardFrontFragment())
                    .commit()
        }
    }
    ...
}

public class CardFlipActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_activity_card_flip);

        if (savedInstanceState == null) {
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.container, new CardFrontFragment())
                    .commit();
        }
    }
    ...
}

Gdy przód karty jest widoczny, możesz pokazać jej tylną część oraz w odpowiednim momencie odwrócić animację. Utwórz metodę pokazania drugiej strony dokumentu która umożliwia:

• Ustawia niestandardowe animacje utworzone dla przejść fragmentów.
• Zastępuje wyświetlany fragment nowym fragmentem i animuje to zdarzenie z Twoimi niestandardowymi animacjami.
• Dodaje poprzednio wyświetlany fragment do stosu fragmentów z tyłu, więc po użytkownik klika przycisk Wstecz, a karta odwraca się z powrotem.

class CardFlipActivity : FragmentActivity() {
    ...
    private fun flipCard() {
        if (showingBack) {
            supportFragmentManager.popBackStack()
            return
        }

        // Flip to the back.

        showingBack = true

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        supportFragmentManager.beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is tapped.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out
                )

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // the Back button to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit()
    }
}

public class CardFlipActivity extends FragmentActivity {
    ...
    private void flipCard() {
        if (showingBack) {
            getSupportFragmentManager().popBackStack();
            return;
        }

        // Flip to the back.

        showingBack = true;

        // Create and commit a new fragment transaction that adds the fragment
        // for the back of the card, uses custom animations, and is part of the
        // fragment manager's back stack.

        getSupportFragmentManager()
                .beginTransaction()

                // Replace the default fragment animations with animator
                // resources representing rotations when switching to the back
                // of the card, as well as animator resources representing
                // rotations when flipping back to the front, such as when the
                // system Back button is pressed.
                .setCustomAnimations(
                        R.animator.card_flip_right_in,
                        R.animator.card_flip_right_out,
                        R.animator.card_flip_left_in,
                        R.animator.card_flip_left_out)

                // Replace any fragments in the container view with a fragment
                // representing the next page, indicated by the just-incremented
                // currentPage variable.
                .replace(R.id.container, new CardBackFragment())

                // Add this transaction to the back stack, letting users press
                // Back to get to the front of the card.
                .addToBackStack(null)

                // Commit the transaction.
                .commit();
    }
}

Tworzenie animacji wyświetlania kołowego

Pokazuj animacje, które zapewniają użytkownikom ciągłość wizualną po wyświetleniu lub ukryciu grupy. elementów interfejsu. ViewAnimationUtils.createCircularReveal() umożliwia animowanie okręgu przycinania w celu odsłonięcia lub ukrycia widoku. Ten animacja jest udostępniana w ViewAnimationUtils zajęcia, który jest dostępny na Androidzie 5.0 (poziom interfejsu API 21) i nowszym.

Oto przykład, jak pokazać, jak wyświetlić wcześniej niewidoczny widok:

// A previously invisible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the final radius for the clipping circle.
    val finalRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animator for this view. The start radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius)
    // Make the view visible and start the animation.
    myView.visibility = View.VISIBLE
    anim.start()
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.INVISIBLE
}

// A previously invisible view.
View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // Get the final radius for the clipping circle.
    float finalRadius = (float) Math.hypot(cx, cy);

    // Create the animator for this view. The start radius is 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0f, finalRadius);

    // Make the view visible and start the animation.
    myView.setVisibility(View.VISIBLE);
    anim.start();
} else {
    // Set the view to invisible without a circular reveal animation below
    // Android 5.0.
    myView.setVisibility(View.INVISIBLE);
}

Animacja ViewAnimationUtils.createCircularReveal() ma 5 parametrów. Pierwszy parametr to widok, który chcesz ukryć lub pokazać na ekranie. dwa następne parametry to współrzędne X i Y środka klipu. kręgu znajomych. Zazwyczaj jest to środek widoku, ale możesz też użyć i klikaj ją, aby animacja zaczynała się w wybranym miejscu. czwarty parametr jest promieniem początkowym okręgu przycinającego.

W poprzednim przykładzie początkowy promień jest ustawiony na zero, aby widok jest zasłaniana przez okrąg. Ostatni parametr to końcowy promień jego okręgu. Podczas wyświetlania widoku ustaw końcowy promień większy niż co pozwala wyświetlić pełny widok jeszcze przed zakończeniem animacji.

Aby ukryć widok widoczny wcześniej, wykonaj te czynności:

// A previously visible view.
val myView: View = findViewById(R.id.my_view)

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    val cx = myView.width / 2
    val cy = myView.height / 2

    // Get the initial radius for the clipping circle.
    val initialRadius = Math.hypot(cx.toDouble(), cy.toDouble()).toFloat()

    // Create the animation. The final radius is 0.
    val anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f)

    // Make the view invisible when the animation is done.
    anim.addListener(object : AnimatorListenerAdapter() {

        override fun onAnimationEnd(animation: Animator) {
            super.onAnimationEnd(animation)
            myView.visibility = View.INVISIBLE
        }
    })

    // Start the animation.
    anim.start()
} else {
    // Set the view to visible without a circular reveal animation below
    // Android 5.0.
    myView.visibility = View.VISIBLE
}

// A previously visible view.
final View myView = findViewById(R.id.my_view);

// Check whether the runtime version is at least Android 5.0.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Get the center for the clipping circle.
    int cx = myView.getWidth() / 2;
    int cy = myView.getHeight() / 2;

    // Get the initial radius for the clipping circle.
    float initialRadius = (float) Math.hypot(cx, cy);

    // Create the animation. The final radius is 0.
    Animator anim = ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0f);

    // Make the view invisible when the animation is done.
    anim.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            myView.setVisibility(View.INVISIBLE);
        }
    });

    // Start the animation.
    anim.start();
} else {
    // Set the view to visible without a circular reveal animation below Android
    // 5.0.
    myView.setVisibility(View.VISIBLE);
}

W tym przypadku początkowy promień okręgu przycinania jest ustawiony na taki aby widok był widoczny przed rozpoczęciem animacji. Finał promień jest ustawiony na zero, by po zakończeniu animacji widok był ukryty. Dodaj do animacji detektor, aby widoczność widoku mogła być ustawiona na INVISIBLE, gdy animacja .

Dodatkowe materiały

• Animacje w Jetpack Compose.
• Gesty w Jetpack Compose.