Android transition animation, let your APP instantly gorgeous up

Friendly interactive experience can attract eyeball, Android API 21 (5.0) system built-in animation between activities, not only can make users look comfortable, but also very easy to implement.

A, by overridePendingTransition animated transitions

This is probably the easiest way to implement it. It allows for transitions including zooming, panning, and alpha (transparency) changes. It is also very customizable and is recommended for projects.

1.1. Implementation of page Entry

First we jump to the page add overridePendingTransition (one front anim admission for the new page of animation, is behind the old an animation of the page).

// Turn up
    public void click_up(View v! [Insert picture description here](https://img-blog.csdnimg.cn/20200222171648743.gif)iew) {
        Intent intent = new Intent(TransitionAnimationActivity.this, FlowLayoutActivity.class);
        startActivity(intent);
        overridePendingTransition(R.anim.pageup_enter, R.anim.pageup_exit);
    }
Copy the code

This gives us a very large number of types that we can combine:

1.2, page return implementation

In the same way, we need to add overridePendingTransition method before returning. The first anIM is the entry animation of the previous page, and the second one is the exit animation of the current page.

@Override
    protected void onPause(a) {
        overridePendingTransition(R.anim.pagedown_enter, R.anim.pagedown_exit);
        super.onPause();
    }
Copy the code

If you have a long animation to draw before finish and the app is having problems, consider using it

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) finishAfterTransition(); else finish();
Copy the code

1.3 no animation

In some special cases, we may not need any animation, so we can do this

Intent intent = new Intent(getActivity(),SearchListActivity.class);
startActivity(intent);
getActivity().overridePendingTransition(0.0);

@Override
protected void onPause(a) {
	overridePendingTransition(0.0);
	super.onPause();
}
Copy the code

1.4 Preparation of ANIM files

pageup_enter.xml

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
	<translate
		android:duration="700"
		android:fromYDelta="100%p"
		android:toYDelta="0" />
	<alpha
		android:duration="700"
		android:fromAlpha="0.0"
		android:toAlpha="1.0" />
</set>
Copy the code

pageup_exit.xml

<? xml version="1.0" encoding="utf-8"? > <set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="700"
        android:fromYDelta="0"
        android:toYDelta="-100%p" />
    <alpha
        android:duration="700"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

Copy the code

There are too many style files here to post one, more diversified visible demo

Two, through the setEnterTransition to achieve transition animation

SetEnterTransition can realize decomposition, sliding into the animation, fades, don’t return to the page set up again, this implementation style custom sex without overridePendingTransition is strong.

2.1 Implementation mode

First, when we jump to the page to add a fixed identity ActivityOptions. MakeSceneTransitionAnimation (this). ToBundle ()

startActivity(new Intent(this, ExplodeActivity.class), ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
Copy the code

Then add the properties of Explode, Slide, and Fade to the page you jump to.

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_resolve);
        // Enter and exit the effect and notice that the effect object is Explode()
        getWindow().setEnterTransition(new Explode().setDuration(2000));
        getWindow().setExitTransition(new Explode().setDuration(2000));
    }
Copy the code

Here the Transition object can also be specified through an XML resource

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.activity_resolve);
        Transition explode = TransitionInflater.from(this).inflateTransition(R.transition.explode);
        // Used when exiting
        getWindow().setExitTransition(explode);
        // Used on first entry
        getWindow().setEnterTransition(explode);
        // Used on re-entry
        getWindow().setReenterTransition(explode);
    }
Copy the code

2.2. Res/Transition resource file

explode.xml

<? xml version="1.0" encoding="utf-8"? > <explode xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300" />
Copy the code

fade.xml

<? xml version="1.0" encoding="utf-8"? > <fade xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300" />
Copy the code

slide.xml

<? xml version="1.0" encoding="utf-8"? > <slide xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:slideEdge="end"> <! -- If you don't want the status bar at the top to be animated with the navigation bar at the bottom, you can specify this in XML --> <targets> <target android:excludeId="@android:id/navigationBarBackground" />
        <target android:excludeId="@android:id/statusBarBackground" />
    </targets>
</slide>
Copy the code

2.3. The renderings are as follows

Third, through sharedElement shared elements to achieve transition animation

SharedElement Shared elements can be implemented deformation, displacement and other animation, before and after the page continuity is very strong.

3.1 Implementation mode

First we need to set the transitionName attribute for the element to be shared, and both elements must have the same transitionName. That is, in the XML layout on both sides

android:transitionName="myButton1"
Copy the code

This is then processed in the activity

// The buttons on the next page of the shared element are bound to each other
    public void sharedElements1(View view) {
        startActivity(new Intent(this, SharedElementsActivity.class),
                ActivityOptions.makeSceneTransitionAnimation
                        (this, view, "myButton1")
                        .toBundle());
    }
Copy the code

A shared element for multiple elements

// Share elements
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public void sharedElements2(View view) {
        startActivity(new Intent(this, SharedElementsActivity.class),
                ActivityOptions.makeSceneTransitionAnimation(this,
                        Pair.create(view, "myButton2"),
                        Pair.create(view, "myButton3")
                ).toBundle());
    }
Copy the code

3.2. Renderings

Fourth, the appendix

Android native animations (excluding Airbnb/Lottie-Android here) can be summarized as follows:

View animation
Frame animation (Frame animation, Drawable animation)
Attribute animation
Ripple Effect Touch feedback animation
Reveal Effect
Transition animation & Shared Elements (Activity switch animation)
Animate View State Changes
Vector animation
ConstraintSet animation: ConstraintSet animation
Others (such as RecyclerView item animation)

In addition, the detailed Android Animation Series tutorial is attached. The tutorial is also very detailed. I hope you can study hard and go out less to fight COVID-19.

The demo address download.csdn.net/download/li…