High forced Android transition animation, easy to realize the gold digging user head transition animation

preface

Transition animation is very advantageous in interaction, this paper starts from the use of the scene and method of transition animation, and finally realizes the transition animation of the user’s head in digging gold.

The version of the transition animation that works

The Activity Transition APIs are only available on Android 5.0 (API 21) or later. So you need to make version judgments before using it. Use transitions when the version API is greater than 21, otherwise not.

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}
Copy the code

You also need to configure to allow Window Content Transitions. Is the field: android: windowActivityTransitions. You can do this in the activity’s style file.

<style name="BaseAppTheme" parent="android:Theme.Material">
  <! -- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>
</style>
Copy the code

It can also be configured dynamically in code as follows:

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());
Copy the code

The use scene of the transition animation

There are three main types of transitions in Android:

1. Interface transition effect when switching between two activities.

2. Switch shared elements between two activities or fragments.

3. Animate the view in the same activity. These three methods are described in detail below.

1. Interface transition effect when switching between two activities

When switching between two activities, there are two animations, as shown in the figure below. When switching from Activity A to Activity B, there will be an exit animation of A and an entry animation of B.

The main entry and exit methods for an activity:

Window. SetEnterTransition () set in the animation
Window.setexittransition () sets the exit animation
Window().setreTurnTransition () sets the animation when the activity is returned
Window().setreenterTransition () sets the animation for re-entry as shown below:

In Google’s android. The transition. The transition from the activity in the package there are three ways: A switch to the activity B explodes, Slide and Fade. Explode: Enter or exit from the middle of the screen.

Slide: Enter or exit from one side of the screen to the other.

3. Fade: Appears or disappears by changing transparency.

The effect is shown below:

Explode	Slide	Fade

The above three animations can be implemented in two ways:

1. Declare through XML.

In the Transition folder, create activity_fade. XML. res/transition/activity_fade.xml

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

res/transition/activity_slide.xml

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

The ActivityA code is as follows: Since you switched from ActivityA to ActivityB, ActivityA is exiting the animation using the getWindow().setexitTransition (slide) method;

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

    private void setupWindowAnimations(a) {
        Slide slide = TransitionInflater.from(this).inflateTransition(R.transition.activity_slide);
        getWindow().setExitTransition(slide);
    }
Copy the code

ActivityB is entered into the animation using the following method: getWindow().setenterTransition (fade); The code for ActivityB is as follows

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

    private void setupWindowAnimations(a) {
        Fade fade = TransitionInflater.from(this).inflateTransition(R.transition.activity_fade);
        getWindow().setEnterTransition(fade);
    }
Copy the code

2. Code implementation.

The ActivityA code looks like this: Implement a Slide object and set the time to 1000ms.

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

    private void setupWindowAnimations(a) {
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setExitTransition(slide);
    }
Copy the code

An Fide object is implemented in ActivityB and set to 1000 ms.

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

    private void setupWindowAnimations(a) {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
    }
Copy the code

The final results of the above two methods are as follows:

ReturnTransition & ReenterTransition

Return and Reenter Transition are the opposite of Enter and exit. When you go from Activity A to Activity B you say exit and enter and when you go back from Activity B to Activity A you say Return Transition and Reenter Transition.

EnterTransition <–> ReturnTransition
ExitTransition <–> ReenterTransition If Return or Reenter is not defined, Android will perform the Enter and Exit transformations in reverse. Return from Activity B to Activity A as shown below:

Add ReturnTransition to Activity A like this:

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

    private void setupWindowAnimations(a) {
        Fade fade = new Fade();
        fade.setDuration(1000);
        getWindow().setEnterTransition(fade);
        
        Slide slide = new Slide();
        slide.setDuration(1000);
        getWindow().setReturnTransition(slide);        
    }
Copy the code

The contrast between return animation and no return animation is as follows:

There is no Return the Transition	A return the Transition
Enter: Fade In	Enter:Fade In
Exit: Fade out	Exit:Slide out

2、 Shared elements between Activities

The Shared Elements transformation determines how views Shared between two activities are converted between them. For example, if two activities have the same image in different locations and sizes, the Shared Elements transform will smoothly convert and scale the image between the two activities. The main method

Shared elements conversions include the following:

ChangeBounds changes the bounds of the view in the target layout
ChangeClipBounds cuts the bounds of the view in the target layout
ChangeTransform implements rotation or scaling animations
ChangeImageTransform animates the rotation or scaling of the ImageView in the target layout

There are three steps to achieve the above effect:

1、 Enable Window Content Transition

Set up the styles.xml file to allow windowContentTransitions as follows: value/style.xml

<style name="MaterialAnimations" parent="@style/Theme.AppCompat.Light.NoActionBar">.<item name="android:windowContentTransitions">true</item
    .
</style>
Copy the code

2. Define a transition with the same name

Define an item in the Activity A and Activity B layout file. The properties of the two items can be different, but android:transitionName must be the same. As follows: layout/activity_a. XML

<ImageView
        android:id="@+id/small_blue_icon"
        style="@style/MaterialAnimations.Icon.Small"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />
Copy the code

layout/activity_b.xml

<ImageView
        android:id="@+id/big_blue_icon"
        style="@style/MaterialAnimations.Icon.Big"
        android:src="@drawable/circle"
        android:transitionName="@string/blue_name" />
Copy the code

3. Start the shared Element in the activity

Using ActivityOptions. MakeSceneTransitionAnimation ActivityA () method. The Java

blueIconImageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent i = new Intent(MainActivity.this, SharedElementActivity.class);

        View sharedView = blueIconImageView;
        String transitionName = getString(R.string.blue_name);

        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName); startActivity(i, transitionActivityOptions.toBundle()); }});Copy the code

The effect is as follows:

To be continued…….

High forced Android transition animation, easy to realize the gold digging user head transition animation

preface

The version of the transition animation that works

The use scene of the transition animation

1. Interface transition effect when switching between two activities

2、 Shared elements between Activities

Related Posts

Android in Kotlin rounded corner picture, elliptical corner picture implementation

What exactly do view.post() and handler.post() do

“Android AOP Secrets series” step by step with me ASM actual combat