During the transition between activities, an Activity is simply an animation in both the “enter” and “exit” scenarios. “Enter” is divided into “first enter Activity” and “return to current Activity”. In addition, the system also provides a kind of animation, namely shared element, which allows the View between the two activities to have a transition effect. The state of the animation is as follows:

Enter: used to determine the animation when the current Activity is first started exit: Used to determine the animation when the current Activity is quit reenter: Shared Elements: Used to specify the transition effect between views of two activities when switching between them

So how do you use an Activity to switch between animations? 1. The setContentView() command is executed before the setContentView() command, which tells the Window that an animation is required for the switch

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);Copy the code

R.transition. Explode is an XML file in the RES/Transition directory. Explode is the animation you want to execute. We’ll do that in the next section.

  Transition explode = TransitionInflater.from(this).inflateTransition(R.transition.explode);Copy the code

Now that we’ve created a toggle animation, we need to tell the current Window when to use the animation. You can choose different effects for different toggle scenarios according to your needs:

// Used when exiting
getWindow().setExitTransition(explode);
// It is used when entering for the first time
getWindow().setEnterTransition(explode);
// Use it when re-entering
getWindow().setReenterTransition(explode); Copy the code

Of course, you can also not use the code way, directly in the theme you use

<item name="android:windowExitTransition">@transition/explode</item>
<item name="android:windowEnterAnimation">@transition/explode</item>
<item name="android:windowReenterTransition">@transition/explode</item>Copy the code

StartActivity (Intent Intent); Bundle, one more parameter, we are the first through the makeSceneTransitionAnimation function creates a ActivityOptions object, it into a Bundle object:

startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());Copy the code

Integral use step is above these, very simple? Next we will learn how to use built-in animation ~

Explode is a simple way to use Explode. Create a new XML file (Explode. XML) from res/transition.

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

Among themdurationExplode: indicates the duration of an animation. If you Explode, do not set the animation time to 200 to 500 milliseconds.

Let’s see the effect

Slide is similar to Explode. Create a new XML file (slide.xml) in the res/transition directory.

<slide xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:slideEdge="end"/>Copy the code

SlideEdge is the starting position of the slide, end is the right side, start is the left side, top is the top, and bottom is the bottom side

GIF effect to see the more rigid, you can download my source code to actually run ~

If you don’t want the top status bar and the bottom navigation bar to animate together, you can specify it in the XML:

<slide xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:slideEdge="end">
    <targets>
        <target android:excludeId="@android:id/navigationBarBackground" />
        <target android:excludeId="@android:id/statusBarBackground" />
    </targets>
</slide>Copy the code

Fade is a Fade effect. It is still easy to use Fade effect. In the RES/Transition directory, create an XML file (such as Fade.

<fade xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300" />Copy the code

Fade effect is the View gradually Fade, here no longer paste effect, want to see the effect can download my source code to run a look ~

The shared element effect is different from the previous several effects. The shared element effect is a transition effect between a child View of an Activity in front and a child View of an Activity behind. Let’s take a look at the dynamic diagram to feel it:

As you can see from the dynamic diagram, there is a transition effect between the small green square of the first Activity and the large green square of the second Activity

Let’s see how to do this:

1. Add the View to transition between the two activitiesAndroid:transitionNameattribute

The Android:transitionName property of both views should be the same, for example:

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

    <View
        android:id="@+id/firstSharedView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00cc00"
        android:onClick="onClick"
        android:transitionName="sharedView" />
</RelativeLayout>Copy the code

The second Activity layout:

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

    <View
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignParentBottom="true"
        android:background="#00cc00"
        android:onClick="onClick"
        android:transitionName="sharedView" />

</RelativeLayout>Copy the code

Add the Android :transitionName attribute to both green views and name them the same.

2. Call startActivity ActivityOptions makeSceneTransitionAnimation function first argument isn’t explain the Activity, the second parameter is the first Activity of the View object, The third parameter is the value of the Android :transitionName property of the View for both activities.

 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, firstSharedView, "sharedView").toBundle());Copy the code

Can now implement the Shared Element effect, but you might want to implement at the same time let the two View have such effect, but can only let us set an makeSceneTransitionAnimation function View and a transitionName attributes. How do you add more than one? Let’s learn how to switch multiple views at the same time.

In addition to assigning the same name to the View in both activities, encapsulate the View and the String corresponding to the transitionName value into a Pair:

 Pair first = new Pair<>(firstSharedView, ViewCompat.getTransitionName(firstSharedView));

 Pair second = new Pair<>(secondSharedView, ViewCompat.getTransitionName(secondSharedView));Copy the code

Then call ActivityOptionsCompat makeSceneTransitionAnimation another overloaded function of a class makeSceneTransitionAnimation (Activity Activity, Pair

… SharedElements), the first parameter is unexplained and the following parameters are variable-length parameters, that is, you can pass as many pairs as you want.
,>

 ActivityOptionsCompat transitionActivityOptions =
      ActivityOptionsCompat.makeSceneTransitionAnimation(this, first, second);Copy the code

Finally, startActivity is called

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

Said so many steps, let’s see the effect ~

If you’re not satisfied with the built-in Shared Element, you can also customize the View transition. The steps are as follows:

1. Create a PathMotion class for View transitions

We can create an ArcMotion object, which is a subclass of PathMotion, which is a curved path. To learn more about ArcMotion, check out the official ArcMotion documentation.

ArcMotion arcMotion = new ArcMotion();
arcMotion.setMinimumHorizontalAngle(50f);
arcMotion.setMinimumVerticalAngle(50f);Copy the code

2. Define the ChangeBounds class

We create a custom class that extends from ChangeBounds to override createAnimator, which creates the animation you want to execute. This function takes three arguments:

1.ViewGroup sceneRoot: the screen root View, i.e. DecorView, the second Activity’s DecorView. 2. TransitionValues startValues: The starting attribute value of the property animation. The TransitionValues object contains the values of each Map type, which are used to save the properties for which the property animation is to be performed. The property values inside this are placed in the function captureStartValues, so you can override the captureStartValues function and put the property values in your custom property animation. 3. TransitionValues endValues: Similar to startValues, represents the value of the property at the end of the animation. This can be done by overwriting captureEndValues and putting the final property values in your custom property animation.

Let’s start with the simplest example:

package com.hc.util;

import android.animation.Animator;
import android.transition.ChangeBounds;
import android.transition.TransitionValues;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;


public class CustomChangeBounds extends ChangeBounds {

 @Override
  public Animator createAnimator(final ViewGroup sceneRoot,
                                 TransitionValues startValues,
                                 final TransitionValues endValues) {
      Animator changeBounds = super.createAnimator(sceneRoot, startValues, endValues);
      if (startValues == null || endValues == null || changeBounds == null) 
          return null;

      changeBounds.setDuration(300);
      changeBounds.setInterpolator(AnimationUtils.loadInterpolator(sceneRoot.getContext(),
              android.R.interpolator.fast_out_slow_in));
      returnchangeBounds; }}Copy the code

Look at the effect

In the end, to offer the source: download.csdn.net/detail/huac…

LABS. Ribot. Co. UK/exploring – m… Github.com/hitherejoe/…

This article from: [huachao1001 column: http://blog.csdn.net/huachao1001]