We can overanimate the entry and exit of activities, as well as specify custom animations for shared elements when transitioning between activities, where:

  • Enter – controls how the view in the Activity enters the scene. For example, an “explosion” effect allows the view to come in from the outfield and fly to the center of the screen.

  • Exit – Controls how the view in the Activity exits the scene. For example, use an “explosion” effect to move the view away from the center of the screen.

  • Shared element – controls how views shared by two activities transition between those activities. For example, if two activities use the same image (but in different positions and sizes), a changeImageTransform enables shared elements to smoothly pan and scale the image during transitions between activities.

Android supports the following entry and exit transitions:

  • Explosive – Moves the view into or out of the center of the scene.
  • Slide – Moves the view in and out of one edge of the scene.
  • Fade in and out – Add or remove a view from a scene by changing its opacity.

Android also supports the following shared element transitions:

  • ChangeBounds – Animates changes to the layout boundaries of the target view.
  • ChangeClipBounds – Animates changes to clipping bounds for the target view.
  • ChangeTransform – Animates the zoom and rotation changes to the target view.
  • ChangeImageTransform – Animates changes in the size and scale of the target image.

Let’s look at the effect of entering transition-explosive mode as an example:

Enter over implementation

  1. We enable the window content transition, and note that the Activity transition API only supports Android 5.0 (API 21) and later. We can code this directly in Activity#onCreate:
    /* ActivityB.java */
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        // Enable window content overload
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        // Set the transition effect to explosive
        getWindow().setEnterTransition(new Explode());
        // The default transition effect is used when returning from the current Activity to the previous Activity
        getWindow().setReturnTransition(new AutoTransition());
    }
Copy the code

We can also set values-v21/styles. XML directly:

    <item name="android:windowActivityTransitions">true</item> <! -- specify enter and exit transitions --> <item name="android:windowEnterTransition">@transition/explode_transition</item>
    <item name="android:windowExitTransition">@transition/explode</item>
Copy the code

Res /transition/explode_transition.xml

    <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
        <explode/>
    </transitionSet>
Copy the code

Res /transition/auto_transition.xml

    <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
        <autoTransition/>
    </transitionSet>
Copy the code
  1. To start an Activity using a transition, in this case we go from ActivityA->ActivityB, which has code:
    /* ActivityA.java */
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
    }
Copy the code

Exit overimplementation

The exit transition implementation, like the entry transition implementation, is not repeated. The exit/explosion method is as follows:

    getWindow().setExitTransition(new Explode());
Copy the code

This is ActivityA->ActivityB when ActivityA exits the transition effect:

Overimplementation of shared elements

To animate a screen transition between two activities that have shared elements, do the following:

  1. Enable window content transitions in the theme background.

  2. Specifies the shared element transition effect in the style.

  3. XML resources that define the corresponding transition effects.

  4. Use the Android :transitionName attribute to specify a common name for shared elements in both layouts.

  5. Call ActivityOptions. MakeSceneTransitionAnimation () function.

Let’s start with a shared element transition:

In values-v21/styles. XML, enable window content transitions and specify shared element transitions:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">... <item name="android:windowActivityTransitions">true</item>
        
        <item name="android:windowSharedElementEnterTransition">
            @transition/change_bounds_image_transition
        </item>
        <item name="android:windowSharedElementExitTransition">
            @transition/change_bounds_image_transition
        </item>
    </style>
Copy the code

Next we define change_bounds_image_transition.xml:

<! -- res/transition/change_bounds_image_transition.xml --> <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
        <changeBounds />
        <changeImageTransform />
    </transitionSet>
Copy the code

We then use the Android :transitionName attribute to specify a common name for the shared elements in both layouts, as shown in ActivityA:

    /* Activitya.java and give its Layout imageView and TextView names */
    @SuppressWarnings("unchecked")
    ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
            IndexActivity.this./* imageview_item : "detail:header:image" */
            new Pair<>(view.findViewById(R.id.imageview_item),
                            DetailActivity.VIEW_NAME_HEADER_IMAGE),
            /* textview_name : "detail:header:title" */
            new Pair<>(view.findViewById(R.id.textview_name),
                            DetailActivity.VIEW_NAME_HEADER_TITLE));
   
Copy the code

Let’s also specify the same name for the shared elements within ActivityB:

    /* activityb.java, specify the shared element name, same as ActivityA */
    mHeaderImageView = findViewById(R.id.imageview_header);
    mHeaderTitle = findViewById(R.id.textview_title);

    /* mHeaderImageView : "detail:header:image" */
    ViewCompat.setTransitionName(mHeaderImageView, VIEW_NAME_HEADER_IMAGE);
    /* mHeaderTitle : "detail:header:title" */
    ViewCompat.setTransitionName(mHeaderTitle, VIEW_NAME_HEADER_TITLE);
Copy the code

Jump to ActivityA->ActivityB:

    ActivityCompat.startActivity(IndexActivity.this, intent, activityOptions.toBundle());
Copy the code

note

If you don’t set transition to the shared element, it doesn’t matter. Transition = Transition

    final Transition transition = getWindow().getSharedElementEnterTransition();
    // transition.mTranstions size = 4 : 
    // 1.ChangeBounds@9784d13
    // 2.ChangeTransform@f66cb50
    // 3.ChangeClipBounds@972149
    // 4.ChangeImageTransform@3f39a4e
Copy the code

This should be within the source code of android. R.s tyleable# Window_windowSharedElementEnterTransition has a default implementation.

I have all the code on Github, but if you want to get a more detailed look at the transition animation, you can also check out Google Developer. Stay tuned for more details on how Lottie animation libraries are implemented in the next section.

That’s the end of this article. If this article is useful to you, give it a thumbs up. Everyone’s affirmation is also the motivation for Dumb I to keep writing.