Transition过渡动画
introduce
From API 1existing Drawable Animationand View Animation, and API 11(Android 3.0)added later Property Animation. The transition animation Transitionis API 19(Android 4.4.2)added in .
transition is a simple animation display. This kind of animation can smoothly change from one picture to another, not the kind of abrupt switch.
Transition can simply switch between two frames, and is often used to switch between selection and selection, or progressive new scenes today.
The XML file contains the switched frame pictures. The transition tag serves as the container, item is the frame for switching, and Android :drawable is the image id.
TransitionDrawable
TransitionDrawable obtains the resources in the transition, and then calls startTransition to switch. This function switches the first frame to the second frame. reverseTransition is another switching method, which will switch two frames repeatedly, and will use the second frame of the previous switch as the first frame of the next switch.
XML file code :
1. <?xml version="1.0" encoding="utf-8"?>
2. <transition
3. xmlns:android="http://schemas.android.com/apk/res/android">
4.
5. <item android:drawable="@drawable/left" />
6. <item android:drawable="@drawable/right" />
7.
8. </transition>
Activity code :
TransitionDrawable sceneDrawable = (TransitionDrawable) scene.getDrawable();
sceneDrawable.reverseTransition(3000);
Basic introduction to transition animation (Activity Transition)
Android 5.0 provides three types of Transition
to enter : determine how all views in the Activity enter the screen.
Exit : Determine how all views in an Activity exit the screen.
Shared elements : Decide how to share (their) views when transitioning between two activities.
Entering and exiting include the following animation effects
explode (decomposition) - enter or exit from the middle of the screen
slide - move in or out from the edge of the screen
fade (fade out) – by changing the opacity of the view on the screen to add or remove the effect of the view
Shared elements contain the following animation effects
changeBounds - change the layout bounds of the target view
changeClipBounds - Clip target view bounds
changeTransform - change the scale and rotation of the target view
changeImageTransform - change the size and scaling of the target image
use
xml settings
Use the android :windowContentTransitions property to enable window content transitions (effects) when you define styles that inherit from the material theme. You can also specify entry, exit, and transitions for shared elements:
<style name="myTheme" parent="android:Theme.Material">
<!-- 允许使用transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- 指定进入和退出transitions -->
<item name="android:windowEnterTransition">@transition/explode</item>
<item name="android:windowExitTransition">@transition/explode</item>
<!-- 指定shared element transitions -->
<item name="android:windowSharedElementEnterTransition">
@transition/change_image_transform</item>
<item name="android:windowSharedElementExitTransition">
@transition/change_image_transform</item>
</style>
Define transition animation
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<explode/>
<changeBounds/>
<changeTransform/>
<changeClipBounds/>
<changeImageTransform/>
<!--
changeBound 这个是最长使用的 改变View 大小和位置
changeClipBounds 改变 Clip 边界的大小
changeImageTransform 改变ImageView 的大小 和 martix
ChangeTransform 改变普通的 View 一些Scalex 值
ChangeScroll 改变滑动位置
-->
</transitionSet>
code settings
ActivityA
// 基本的startActivity(intent)方法
startActivity(intent,ActivityOptions
.makeSceneTransitionAnimation(MainActivity.this).toBundle());ActivityB
// 在onCreate()允许使用transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// 设置一个enter transition
getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());
style usage
Set an entry animation, the default is the same animation type when exiting
setExitTransition() - When A starts B , make the View in A exit the transition of the scene
setEnterTransition() - When A starts B , make the View in B enter the transition of the scene
setReturnTransition() - When B returns to A , make the View in B exit the transition of the scene
setReenterTransition() - When B returns to A , make the View in A enter the transition of the scene
Animation of shared elements
首先需要在他的ActivityA布局、ActivityB布局中共同设置共享元素
android:transitionName="XXX"
如果只要一个共享元素，那么在ActivityB中可以这样写
startActivity(intent, ActivityOptions
.makeSceneTransitionAnimation(this,view,"share").toBundle());
由多个共享元素，那么我们可以通过Pair.create()来创建多个共享元素
startActivity(intent, ActivityOptions
.makeSceneTransitionAnimation(this, Pair.create(view,"share")
,Pair.create(fab,"fab")).toBundle());
Transition animation for layout elements
The Transition framework can also be used to animate the transition of a view from one state to another in an activity layout.
// simple implementation
TransitionManager.beginDelayedTransition(sceneRoot);
This changes the properties of the corresponding view , making it larger. The Transition framework will record the start and end values, and then create a transition animation. .
squareGreen.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TransitionManager.beginDelayedTransition(sceneRoot);
setViewWidth(squareRed, 500);
setViewWidth(squareBlue, 500);
setViewWidth(squareGreen, 500);
setViewWidth(squareYellow, 500);
}
});
}
private void setViewWidth(View view, int x) {
ViewGroup.LayoutParams params = view.getLayoutParams();
params.width = x;
view.setLayoutParams(params);
}
Implementation example
MainActivity
public class MainActivity extends AppCompatActivity {
private Intent intent;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
intent = new Intent(MainActivity.this, ActivityTwo.class);
}
public void explode(View view) {
intent.putExtra("transition", "explode");
//将原先的跳转改成如下方式
startActivity(intent, ActivityOptions
.makeSceneTransitionAnimation(MainActivity.this).toBundle());
/**
* 修改ActivityTwo返回到MainActivity动画设置
*/
Fade fade = new Fade();
fade.setDuration(2000);
getWindow().setReenterTransition(fade);
}
public void slide(View view) {
intent.putExtra("transition", "slide");
startActivity(intent, ActivityOptions
.makeSceneTransitionAnimation(MainActivity.this).toBundle());
}
public void fade(View view) {
intent.putExtra("transition", "fade");
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
}
public void share(View view) {
//共享元素
ImageView share = (ImageView) findViewById(R.id.share);
intent.putExtra("transition", "share");
//将原先的跳转改成如下方式，注意这里面的第三个参数决定了ActivityTwo 布局中的android:transitionName的值，它们要保持一致
startActivity(intent, ActivityOptions
.makeSceneTransitionAnimation(MainActivity.this,share,"shareTransition").toBundle();
//创建多个共享单元
//startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(share, "shareTransition"), Pair.create(fab, "fab")).toBundle());
}
}
The layout xml of MainActivity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="explode"
android:text="explode" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="slide"
android:text="slide" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="fade"
android:text="fade" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:onClick="share"
android:text="share" />
<ImageView
android:id="@+id/share"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_guide_view_1"/>
</LinearLayout>
ActivityTwo
public class ActivityTwo extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 允许使用transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
String transition = getIntent().getStringExtra("transition");
switch (transition) {
case "explode":
// 设置进入时进入动画
Explode explode = new Explode();
explode.setDuration(2000);
getWindow().setEnterTransition(explode);
// 设置退出时退出动画
Fade fade1 = new Fade();
fade1.setDuration(2000);
getWindow().setReturnTransition(fade1);
break;
case "slide":
Slide slide = new Slide();
slide.setDuration(2000);
getWindow().setEnterTransition(slide);
break;
case "fade":
Fade fade = new Fade();
fade.setDuration(3000);
getWindow().setEnterTransition(fade);
break;
case "share":
break;
}
// 所有操作在设置内容视图之前
setContentView(R.layout.activity_two);
}
}
ActivityTwo's layout xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/share"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal"
android:src="@mipmap/ic_guide_view_1"
android:onClick="share"
android:transitionName="shareTransition" />
</RelativeLayout>