Android动画框架(三)----布局动画&Activity过渡动画

转载请注明出处：http://blog.csdn.net/fishle123/article/details/50759893

这里把布局动画和Activity切换动画都归类为特殊场景的动画使用，因此放在一起来介绍它们的使用技巧。所谓布局动画即在ViewGroup布局发生改变（如addView，removeView...）时提供的一个过渡动画。根据布局动画效果的不同，布局动画即可以是属性动画，也可以是视图动画，两种类型的动画有各自的不同应用场景。Activity过渡动画是指Activity在打开或者退出时的过渡动画。

1.基于属性动画的布局动画

可以通过LayoutTransition 类来实现布局动画。在ViewGroup中添加、删除子View、调用setVisibility()修改ViewGroup内部的View的可见性（ VISIBLE, INVISIBLE，GONE）的时候，都可以使用布局动画来过渡。布局动画既可以作用在被操作的View上，也可以作用到其他的子View上（如从ViewGroup中添加或删除view，剩余的Views通过布局动画移动到新的位置上）。Android提供了以下几种类型的布局动画，每种类型在LayoutTransition中都一个常量与之对应：

1）APPEARING - View在ViewGroup中出现时的动画，这个动画时作用在新出现的View上。

2）CHANGE_APPEARING -当新的View出现在ViewGroup中时，其他Views因此产生变化时的过渡动画 ，这个动画作用在除新出现的View之外的Views。

3）DISAPPEARING - 在View消失时出现的动画，这个动画作用在即将消失的View上。

4）CHANGE_DISAPPEARING - 在View消失时，其他Views因此产生变化时 的过渡动画，这个动画作用在除即将消失的View之外的Views。

针对这四种类型的布局动画，我们可以定义自己的动画，也可以让ViewGroup使用默认的布局动画。使用默认的布局动画，在XML中可以如下实现：

[html] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:orientation="vertical"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     >  
6.     <Button  
7.         android:layout_width="wrap_content"  
8.         android:layout_height="wrap_content"  
9.         android:text="Add Button"  
10.         android:id="@+id/addNewButton"  
11.         />  
12.     <GridLayout  
13.         android:columnCount="4"  
14.         android:layout_width="wrap_content"  
15.         android:layout_height="wrap_content"  
16.         android:id="@+id/gridContainer"  
17.         android:animateLayoutChanges="true"  
18.         />  
19. </LinearLayout>  

即通过 android:animateLayoutChanges="true"这一句就可以了。

同样地，我们也可以使用代码来实现布局动画。

[java] view plain copy

1. public class MainActivity extends Activity implements OnCheckedChangeListener {  
2.    
3. private Button mAddBtn;  
4. private CheckBox mCustomCB;  
5. private CheckBox mAppearCB;  
6. private CheckBox mChangeAppearCB;  
7. private CheckBox mDisappearCB;  
8. private CheckBox mChangeDisppearCB;  
9. private GridLayout mGrid;  
10. private LayoutTransition mTransition;  
11. private int mCount = 1;  
12.    
13. private Animator mDefaultAppearAnimator;  
14. private Animator mDefaultChangeAppearAnimator;  
15. private Animator mDefaultDisappearAnimator;  
16. private Animator mDefaultChangeDisappearAnimator;  
17.    
18. private Animator mCustomAppearAnimator;  
19. private Animator mCustomChangeAppearAnimator;  
20. private Animator mCustomDisappearAnimator;  
21. private Animator mCustomChangeDisappearAnimator;  
22.    
23. @Override  
24. protected void onCreate(Bundle savedInstanceState) {  
25. super.onCreate(savedInstanceState);  
26. setContentView(R.layout.activity_main);  
27.    
28. mGrid = (GridLayout) findViewById(R.id.grid);  
29. mCustomCB = (CheckBox) findViewById(R.id.customCB);  
30. mAppearCB = (CheckBox) findViewById(R.id.appearCB);  
31. mChangeAppearCB = (CheckBox) findViewById(R.id.changeAppearCB);  
32. mDisappearCB = (CheckBox) findViewById(R.id.disappearCB);  
33. mChangeDisppearCB = (CheckBox) findViewById(R.id.changeDisappearCB);  
34. mAddBtn = (Button) findViewById(R.id.addBtn);  
35.    
36. mCustomCB.setOnCheckedChangeListener(this);  
37. mAppearCB.setOnCheckedChangeListener(this);  
38. mChangeAppearCB.setOnCheckedChangeListener(this);  
39. mDisappearCB.setOnCheckedChangeListener(this);  
40. mChangeDisppearCB.setOnCheckedChangeListener(this);  
41.    
42. mAddBtn.setOnClickListener(new View.OnClickListener() {  
43.    
44. @Override  
45. public void onClick(View v) {  
46. // TODO Auto-generated method stub  
47. Button child = new Button(MainActivity.this);  
48. child.setText(String.valueOf(mCount++));  
49. child.setOnClickListener(new View.OnClickListener() {  
50.    
51. @Override  
52. public void onClick(View v) {  
53. // TODO Auto-generated method stub  
54. mGrid.removeView(v);//点击button的时候，就把它从GridView中移除  
55. }  
56. });  
57.    
58. mGrid.addView(child, Math.min(1, mGrid.getChildCount()));  
59. }  
60. });  
61.    
62. mTransition = new LayoutTransition();  
63. mGrid.setLayoutTransition(mTransition);//开启默认的布局动画效果  
64. createCustomAnimations(mTransition);//初始化自定义布局动画效果  
65.    
66. //获取默认的布局动画  
67. mDefaultAppearAnimator = mTransition.getAnimator(LayoutTransition.APPEARING);  
68. mDefaultChangeAppearAnimator = mTransition.getAnimator(LayoutTransition.CHANGE_APPEARING);  
69. mDefaultDisappearAnimator = mTransition.getAnimator(LayoutTransition.DISAPPEARING);  
70. mDefaultChangeDisappearAnimator = mTransition.getAnimator(LayoutTransition.CHANGE_DISAPPEARING);  
71.    
72. }  
73.    
74.    
75. @Override  
76. public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
77. // TODO Auto-generated method stub  
78.  //当用户选择打开/关闭布局动画时，更新动画设置  
79. mTransition.setAnimator(LayoutTransition.APPEARING,  
80. mAppearCB.isChecked() ? (mCustomCB.isChecked() ? mCustomAppearAnimator : mDefaultAppearAnimator) : null);  
81.    
82. mTransition.setAnimator(LayoutTransition.CHANGE_APPEARING,  
83. mChangeAppearCB.isChecked() ? (mCustomCB.isChecked() ? mCustomChangeAppearAnimator  
84. : mDefaultChangeAppearAnimator) : null);  
85.    
86. mTransition.setAnimator(LayoutTransition.DISAPPEARING,  
87. mDisappearCB.isChecked() ? (mCustomCB.isChecked() ? mCustomDisappearAnimator : mDefaultDisappearAnimator)  
88. : null);  
89.    
90. mTransition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING,  
91. mChangeDisppearCB.isChecked() ? (mCustomCB.isChecked() ? mCustomChangeDisappearAnimator  
92. : mDefaultChangeDisappearAnimator) : null);  
93.    
94. }  
95.    
96. private void createCustomAnimations(LayoutTransition transition) {  
97. //定义自定义布局动画  
98. // Changing while Adding  
99. PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", 0, 1);  
100. PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 1);  
101. PropertyValuesHolder pvhRight = PropertyValuesHolder.ofInt("right", 0, 1);  
102. PropertyValuesHolder pvhBottom = PropertyValuesHolder.ofInt("bottom", 0, 1);  
103. PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofFloat("scaleX", 1f, 0f, 1f);  
104. PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofFloat("scaleY", 1f, 0f, 1f);  
105. mCustomChangeAppearAnimator = ObjectAnimator.ofPropertyValuesHolder(this, pvhLeft, pvhTop, pvhRight,  
106. pvhBottom, pvhScaleX, pvhScaleY).setDuration(  
107. transition.getDuration(LayoutTransition.CHANGE_APPEARING));  
108. mCustomChangeAppearAnimator.addListener(new AnimatorListenerAdapter() {  
109. public void onAnimationEnd(Animator anim) {  
110. View view = (View) ((ObjectAnimator) anim).getTarget();  
111. view.setScaleX(1f);  
112. view.setScaleY(1f);  
113. }  
114. });  
115.    
116. // Changing while Removing  
117. Keyframe kf0 = Keyframe.ofFloat(0f, 0f);  
118. Keyframe kf1 = Keyframe.ofFloat(.9999f, 360f);  
119. Keyframe kf2 = Keyframe.ofFloat(1f, 0f);  
120. PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe("rotation", kf0, kf1, kf2);  
121. mCustomChangeDisappearAnimator = ObjectAnimator.ofPropertyValuesHolder(this, pvhLeft, pvhTop,  
122. pvhRight, pvhBottom, pvhRotation).setDuration(  
123. transition.getDuration(LayoutTransition.CHANGE_DISAPPEARING));  
124. mCustomChangeDisappearAnimator.addListener(new AnimatorListenerAdapter() {  
125. public void onAnimationEnd(Animator anim) {  
126. View view = (View) ((ObjectAnimator) anim).getTarget();  
127. view.setRotation(0f);  
128. }  
129. });  
130.    
131. // Adding  
132. mCustomAppearAnimator = ObjectAnimator.ofFloat(null, "rotationY", 90f, 0f).setDuration(  
133. transition.getDuration(LayoutTransition.APPEARING));  
134. mCustomAppearAnimator.addListener(new AnimatorListenerAdapter() {  
135. public void onAnimationEnd(Animator anim) {  
136. View view = (View) ((ObjectAnimator) anim).getTarget();  
137. view.setRotationY(0f);  
138. }  
139. });  
140.    
141. // Removing  
142. mCustomDisappearAnimator = ObjectAnimator.ofFloat(null, "rotationX", 0f, 90f).setDuration(  
143. transition.getDuration(LayoutTransition.DISAPPEARING));  
144. mCustomDisappearAnimator.addListener(new AnimatorListenerAdapter() {  
145. public void onAnimationEnd(Animator anim) {  
146. View view = (View) ((ObjectAnimator) anim).getTarget();  
147. view.setRotationX(0f);  
148. }  
149. });  
150.    
151. }  
152. @Override  
153. public boolean onCreateOptionsMenu(Menu menu) {  
154. // Inflate the menu; this adds items to the action bar if it is present.  
155. getMenuInflater().inflate(R.menu.main, menu);  
156. return true;  
157. }  
158. }  

对应的布局文件为activity_main.xml，内容如下：

[java] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical"  
6.     tools:context=".MainActivity" >  
7.    
8.     <Button  
9.         android:id="@+id/addBtn"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:text="addBtn" />  
13.    
14.      <CheckBox  
15.         android:id="@+id/customCB"  
16.         android:layout_width="wrap_content"  
17.         android:layout_height="wrap_content"  
18.         android:checked="false"  
19.         android:text="customAnimation" />  
20.     <CheckBox  
21.         android:id="@+id/appearCB"  
22.         android:layout_width="wrap_content"  
23.         android:layout_height="wrap_content"  
24.         android:checked="true"  
25.         android:text="APPEARING " />  
26.    
27.     <CheckBox  
28.         android:id="@+id/changeAppearCB"  
29.         android:layout_width="wrap_content"  
30.         android:layout_height="wrap_content"  
31.         android:checked="true"  
32.         android:text="CHANGE_APPEARING " />  
33.    
34.     <CheckBox  
35.         android:id="@+id/disappearCB"  
36.         android:layout_width="wrap_content"  
37.         android:layout_height="wrap_content"  
38.         android:checked="true"  
39.         android:text="DISAPPEARING" />  
40.    
41.     <CheckBox  
42.         android:id="@+id/changeDisappearCB"  
43.         android:layout_width="wrap_content"  
44.         android:layout_height="wrap_content"  
45.         android:checked="true"  
46.         android:text="CHANGE_DISAPPEARING" />  
47.    
48.     <GridLayout  
49.         android:id="@+id/grid"  
50.         android:layout_width="match_parent"  
51.         android:layout_height="wrap_content"  
52.         android:columnCount="5" >  
53.     </GridLayout>  
54.    
55. </LinearLayout>  

这个例子中，点击addBtn按钮往GridLayout中添加Button，点击GridLayout中的Button时该Button会移除，大家可以仔细观察一下动画效果。可以通过几个CheckBox来选择使用哪些布局动画效果，里面的custonmAnimation表示是使用自定义的动画效果还是使用默认的动画效果。效果如下：

 

2.基于视图动画的布局动画

还可以使用LayoutAnimationController来实现布局动画，不过LayoutAnimationController使用的视图动画，而LayoutTransition使用的的是属性动画。LayoutAnimationController中的动画用来控制ViewGroup中每个Item显示的时候的过渡动画，每个item使用的都是相同的动画，但是可以设置每个item的动画的开始时间以此达到控制每个item的显示顺序。需要注意的是，LayoutAnimationController设置的动画只在ViewGroup第一次layout的时候播放。LayoutAnimationController有一个子类GridLayoutAnimationController，专门针对GridLayout的布局动画。

LayoutAnimationController的构造函数有两个参数，一个是需要使用的动画，另一个是每个子View显示的延时时间delay。通过设置延时时间，可以控制每个子View的显示顺序。子View延时时间根据参数delay来计算，公式如下：

child animation delay = child index * delay * animation duration

当delay不为0的时候，就可以控制子View的显示顺序，LayoutAnimationController提供了以下三种顺序：

1）LayoutAnimationController.ORDER_NORMAL----顺序

2）LayoutAnimationController.ORDER_RANDOM----随机

3）LayoutAnimationController.ORDER_REVERSE----倒序

下面看一个例子：

[java] view plain copy

1. public class MainActivity extends Activity {  
2.    
3. private LinearLayout mContainer;  
4.    
5. @Override  
6. protected void onCreate(Bundle savedInstanceState) {  
7. super.onCreate(savedInstanceState);  
8. setContentView(R.layout.activity_main);  
9. mContainer = (LinearLayout) findViewById(R.id.container);  
10. ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1);//定义一个缩放动画  
11. scaleAnimation.setDuration(1000);  
12. LayoutAnimationController controller = new LayoutAnimationController(scaleAnimation, 0.5f);  
13. controller.setOrder(LayoutAnimationController.ORDER_NORMAL);  
14. mContainer.setLayoutAnimation(controller);//将动画设置到LinearLayout上  
15. }  
16.    
17. }  

动画效果如下：

 

3.Activity的切换动画

Activity有默认的切换动画，我们也可以修改这个自定义这个动画。只需要调用overridePendingTransition(int enterAnim,int exitAnim)这个方法就可以了。这两个参数的含义如下：

enterAnim----Activity打开时的动画资源id

exitAnim----Activity被暂停是的动画资源id

下面看一个例子：

[java] view plain copy

1. public class MainActivity extends Activity {  
2.    
3. @Override  
4. protected void onCreate(Bundle savedInstanceState) {  
5. super.onCreate(savedInstanceState);  
6. setContentView(R.layout.activity_main);  
7. Button startBtnButton = (Button)findViewById(R.id.btnStartActivity);  
8. startBtnButton.setOnClickListener(new View.OnClickListener() {  
9. @Override  
10. public void onClick(View v) {  
11. // TODO Auto-generated method stub  
12. Intent intent =new Intent(MainActivity.this,SecondActivity.class);  
13. startActivity(intent);  
14. overridePendingTransition(R.anim.enter_anim,R.anim.out_anim);//设置Activity切换动画  
15. }  
16. });  
17. }  
18.    
19. @Override  
20. public boolean onCreateOptionsMenu(Menu menu) {  
21. // Inflate the menu; this adds items to the action bar if it is present.  
22. getMenuInflater().inflate(R.menu.main, menu);  
23. return true;  
24. }  
25.    
26. }  

两个动画设计如下，enter_anim.xml的内容：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:interpolator="@android:anim/accelerate_decelerate_interpolator">  
4.       
5.     <scale android:fromXScale="0"  
6.         android:toXScale="1"  
7.         android:fromYScale="0"  
8.         android:toYScale="1"  
9.         android:pivotX="50%"  
10.         android:pivotY="50%"  
11.         android:duration="1000"/>  
12.    
13. </set>  

out_anim.xml的内容：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <translate xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:duration="1000"  
4.     android:fromXDelta="0"  
5.     android:interpolator="@android:anim/linear_interpolator"  
6.     android:toXDelta="-100%" />  

动画效果如下：

 

可以看到，Activity的切换动画使用起来非常简单。需要注意的一点就是：overridePendingTransition必须在startAcitivy或者finish之后调用，如果在overridePendingTransition中传入0，表示不使用动画。

当然，我们也可以给Fragment设置切换动画，代码如下：

[java] view plain copy

1. FragmentManager fm= getFragmentManager();  
2. FragmentTransaction transaction = fm.beginTransaction();  
3. transaction.setCustomAnimations(R.anim.enter_anim,R.anim.out_anim);  
4. //....  
5. transaction.commit();  

总结

到此为止，介绍完布局动画和Activity、Fragment切换动画的使用方法。ViewGroup的显示终于不在那么单调了。需要注意的是，LayoutAnimationController设置的动画只在ViewGroup第一次layout的时候播放。而LayoutTransition 是在布局发生改变的时候使用动画，当我们动态的往ViewGroup中添加或删除View的使用时可以提高用户体验。

对于属性动画和视图动画不熟悉的可以阅读我的动画相关的其他文章，看完这些文章相信大多数动画相关的问题都能解决了。

Android动画框架(一)-----视图动画&帧动画

Android动画框架(二)----属性动画