Android transition animation said

The so-called transition animation, popularly speaking, is an animation that jumps from one Activity to another.

The Activity of the animated transitions have long, 5.0 before using overridePendingTransition () this method. After 5.0, Google uses Material Design style, and then there is the birth of the new transition animation, the effect is quite cool, let’s take a look at the effect.

Effects prior to 5.0

Usage:

Add the following code after startActivity

StartActivity (Intent (this @ BeforeActivity BeforeTwoActivity: : class. Java) / / Fade (fades) overridePendingTransition(android.R.anim.fade_in, Android. State Richard armitage nim. Fade_out) / / Slide around (staggered) / / overridePendingTransition (android. The state Richard armitage nim. Slide_in_left, android.R.anim.slide_out_right)Copy the code

Then add the following code after Finish

Finish () / / Fade (fades) overridePendingTransition (android. The state Richard armitage nim. Fade_in, Android.r.nim.fade_out) //Slide //overridePendingTransition(android.R.anim.slide_in_left,android.R.anim.slide_out_right)Copy the code

Actually here is mainly rely on overridePendingTransition (int enterAnim, int exitAnim) to load the animation, just as its name implies the first parameter is the play animation, the second is the animation. These effects can be used interchangeably, such as Fade on entry and SLide on exit. You can also use custom effects, but I won’t go into detail here. Of course, after 5.0, effects like shared elements are a different story

Effects after 5.0 (Transition effects and shared elements)

Having said that, Google gave me the new ActivityOptions for transition animation in the 5.0MD design, as well as the compatible package ActivityOptionsCompat. Here are a few ways it can provide an overeffect

The first kind of

ActivityOptionsCompat makeCustomAnimation(Context Context,int enterResId, int exitResId).

Actually this method and the overridePendingTransition () method USES is actually about the same, the second parameter is in the movie, the third is the animation. (reference effect overridePendingTransition ()) to use as follows:

StartActivity:

ActivityCompat.startActivity(Intent(this@BeforeActivity,BeforeTwoActivity::class.java),
                ActivityOptionsCompat.makeCustomAnimation(this@BeforeActivity,
                android.R.anim.fade_in, android.R.anim.fade_out).toBundle())
Copy the code

#### Finish:

ActivityCompat.finishAfterTransition(this)
Copy the code

But when this method is called, there is no soft use, no exit animation. After debugging, it is found that:

public boolean startExitBackTransition(final Activity activity) {
    if (mEnteringNames == null || mCalledExitCoordinator != null) {
        return false;
    } else {
        ...
    }
}
Copy the code

This mEnteringNames is always null, and this variable is associated with the shared element:

/** * The shared elements that the calling Activity has said that they transferred to this * Activity. * */ private ArrayList<String> mEnteringNames; private ArrayList<String> mEnteringNames;Copy the code

Because this involves Shared between the two page elements, there is no use to, so if you want to play this come animation, or call the overridePendingTransition () to display (there is a better way please let us know, thank you very much)

The second,

ActivityOptionsCompat makeScaleUpAnimation(View source,int startX, int startY, int startWidth, int startHeight)

This effect shows a small area enlarged to full screen and looks like this:

The first parameters of this method are the target view(i.e. the view you want to zoom in on), the second and third parameters are the starting coordinates, and the fourth and fifth parameters are the width and height of the start of the transition effect.

StartActivity:

val options = ActivityOptionsCompat.makeScaleUpAnimation(view,view.width/2,view.height/2, 0, 0) ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle ())Copy the code

When you finish (there is no rollback effect, we haven’t found a solution yet, please inform us if there is a better solution, thanks a million) :

ActivityCompat.finishAfterTransition(this)
Copy the code

The second,

ActivityOptionsCompat makeScaleUpAnimation(View source,int startX, int startY, int startWidth, int startHeight)

This effect shows a small area enlarged to full screen and looks like this:

The first parameters of this method are the target view(i.e. the view you want to zoom in on), the second and third parameters are the starting coordinates, and the fourth and fifth parameters are the width and height of the start of the transition effect.

StartActivity:

val options = ActivityOptionsCompat.makeScaleUpAnimation(view,view.width/2,view.height/2, 0, 0) ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle ())Copy the code

When you finish (there is no rollback effect, we haven’t found a solution yet, please inform us if there is a better solution, thanks a million) :

ActivityCompat.finishAfterTransition(this)
Copy the code

The third kind of

ActivityOptionsCompat makeThumbnailScaleUpAnimation(View source,Bitmap thumbnail, int startX, int startY)

This effect shows a stretch animation of a piece of Bitmpat as follows:

The first parameter of this method is the target view(i.e. the view to be enlarged), the second parameter is the image to be enlarged, and the fourth and fifth parameters are the starting coordinates as follows:

StartActivity:

var bitmap = BitmapFactory.decodeResource(resources,effect.uri) val options = ActivityOptionsCompat.makeThumbnailScaleUpAnimation(view, bitmap, view.width/2, view.height/2) ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle ())Copy the code

When you finish (there is no rollback effect, we haven’t found a solution yet, please inform us if there is a better solution, thanks a million) :

ActivityCompat.finishAfterTransition(this)
Copy the code

A fourth

ActivityOptionsCompat makeClipRevealAnimation(View source,int startX, int startY, int width, int height)

This effect shows a circle gradient from one point to the full screen. It looks like this:

The first parameters of this method are the target view(i.e. the view you want to zoom in on), the second and third parameters are the starting coordinates, and the fourth and fifth parameters are the width and height of the start of the transition effect.

StartActivity:

Val options = ActivityOptionsCompat. MakeClipRevealAnimation (view, the width / 2, the height / 2, 0, 0) ActivityCompat.startActivity(this@AfterActivity,Intent(this@AfterActivity,AfterTwoActivity::class.java),options.toBundle ())Copy the code

When you finish (there is no rollback effect, we haven’t found a solution yet, please inform us if there is a better solution, thanks a million) :

ActivityCompat.finishAfterTransition(this)
Copy the code

The fifth

####ActivityOptions CompatmakeSceneTransitionAnimation(Activity activity,Pair<View, String>… sharedElements)

The various effects shown here are as follows:

The first argument to this method is the target view(that is, the view you want to zoom in on), and the second argument is required to share elements (the effect is not involved here) using the following:

StartActivity:

startActivity(Intent(this@AfterActivity, AfterTwoActivity::class.java),
	ActivityOptionsCompat.makeSceneTransitionAnimation(this@AfterActivity).toBundle())
Copy the code

Then set the effect on the page after the jump (in this case AfterTwoActivity):

//Explode
window.enterTransition = Explode()
window.exitTransition = Explode()
//Slide
window.enterTransition = Slide()
window.exitTransition = Slide()
//Fade
window.enterTransition = Fade()
window.exitTransition = Fade()
Copy the code

Shared elements

A shared element is A smooth transition between A View in Activity A and A View in Activity B.

Effect display (similar to the image enlargement effect of wechat moments) :

Let’s see how to transition the View between two pages:

1. Set two identical Androids in the layout of A and B for the View to be transitioned :transitionName = “Identity name”

2.1 In startActivity (single View transition):

// The second argument is passed to the transition view, StartActivity (Intent(this@ShareElementActivity, ShareElementTwoActivity::class.java), ActivityOptions.makeSceneTransitionAnimation(this@ShareElementActivity,view,"shareImg").toBundle())Copy the code

2.2 In startActivity (multiple View transitions):

/ / is actually have a need to transition the View set up var. One = android support. The v4. Util. Pair < View, String > (img5, "shareImg5") var two = android.support.v4.util.Pair<View, String>(img6, "shareImg6") var pairs = arrayOf(one,two) val transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this, *pairs) startActivity(Intent(this@ShareElementActivity, ShareElementThreeActivity::class.java), transitionActivityOptions.toBundle())Copy the code

Android transition animation said