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…….