Android属性动画PropertyAnimation系列三之LayoutTransition（布局容器动画）

• 在上一篇中我们学习了属性动画的ObjectAnimator使用，不了解的可以看看 Android属性动画Property Animation系列一之ObjectAnimator。这一篇我们来学点新的东西。做项目的时候应该碰到这种问题：根据不同条件显示或者隐藏一个控件或者布局，我们能想到的第一个方法就是 调用View.setVisibility（）方法。虽然实现了显示隐藏效果，但是总感觉这样的显示隐藏过程很僵硬，让人不是很舒服，那么有没有办法能让这种显示隐藏有个过渡的动画效果呢？答案是肯定的，不言而喻就是LayoutTransition类了。 
  上效果图 
  

  实现上面的效果只需要在布局容器中添加android:animateLayoutChanges=”true”属性就ok了。不信你看 
  布局文件如下：

  view source print ?

  01. <code class=" hljs xml"><?xml version="1.0" encoding="utf-8"?>

  02. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  03. android:layout_width="match_parent"

  04. android:layout_height="match_parent"

  05. android:orientation="vertical">

  06.  

  07. <LinearLayout

  08. android:layout_width="match_parent"

  09. android:layout_height="wrap_content"

  10. android:orientation="horizontal">

  11.  

  12. <Button

  13. android:layout_width="wrap_content"

  14. android:layout_height="wrap_content"

  15. android:onClick="buttonClick"

  16. android:text="添加控件" />

  17.  

  18. <Button

  19. android:layout_width="wrap_content"

  20. android:layout_height="wrap_content"

  21. android:onClick="buttonClick1"

  22. android:text="移除控件" />

  23. </LinearLayout>

  24.  

  25.  

  26. <LinearLayout

  27. android:id="@+id/parent"

  28. android:layout_width="match_parent"

  29. android:layout_height="wrap_content"

  30. android:animateLayoutChanges="true"

  31. android:orientation="vertical"></LinearLayout>

  32.  

  33. </LinearLayout></code>

  如果布局容器中为添加android:animateLayoutChanges=”true”默认是么有动画效果的。该属性只能用在ViewGroup控件里，表示容器里面布局改变时有默认的动画效果，比如说添加控件，删除控件的时候就是默认的动画效果。

  以上动画调用代码如下：

  view source print ?

  01. <code class=" hljs java">package com.xjp.animations;

  02.  

  03. import android.app.Activity;

  04. import android.os.Bundle;

  05. import android.view.View;

  06. import android.view.ViewGroup;

  07. import android.widget.Button;

  08. import android.widget.LinearLayout;

  09.  

  10. /**

  11. * Description:

  12. * User: xjp

  13. * Date: 2015/5/22

  14. * Time: 15:06

  15. */

  16.  

  17. public class LayoutAnimationActivity extends Activity {

  18.  

  19. private LinearLayout parent;

  20. private int i = 0;

  21. private int j = 0;

  22.  

  23. @Override

  24. protected void onCreate(Bundle savedInstanceState) {

  25. super.onCreate(savedInstanceState);

  26.  

  27. setContentView(R.layout.activity_layout_animation);

  28.  

  29. parent = (LinearLayout) findViewById(R.id.parent);

  30. }

  31.  

  32. public void buttonClick(View view) {

  33. addButtonView();

  34. }

  35.  

  36. public void buttonClick1(View view) {

  37. removeButtonView();

  38. }

  39.  

  40. private void addButtonView() {

  41. i++;

  42. Button button = new Button(this);

  43. button.setText("button" + i);

  44. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

  45. ViewGroup.LayoutParams.WRAP_CONTENT);

  46. parent.addView(button, params);

  47. }

  48.  

  49. private void removeButtonView() {

  50. if (i > 0)

  51. parent.removeViewAt(0);

  52. }

  53. }

  54. </code>

  是不是发现很简单？除了布局中添加了android:animateLayoutChanges=”true”属性，代码中根本不需要做任何处理就有很舒服的过渡动画效果了。主要是添加了该属性之后在容器中有布局改变时系统会默认给该容器添加一个默认的动画效果。如果你觉得上面的的效果已经很nice～了，那你就太容易满足了，我们除了使用系统默认的布局容器动画，还可以自定义布局容器动画。现在该LayoutTransition类上场了。

  LayoutTransition

  该类用于当前布局容器中有View添加，删除，隐藏，显示的时候定义布局容器自身的动画和View的动画。也就是说当一个LinerLayout中隐藏一个view的时候，我们可以自定义 整个LinerLayout容器因为隐藏了view而改变的动画，同时还可以自定义被隐藏的view自己消失时候的动画。你可以先new一个LayoutTransition对象，通过setLayoutTransition()方法将对象设置进一个布局容器ViewGroup中去。代码如下：

  view source print ?

  01. <code class=" hljs java">    private LinearLayout container;

  02. private LayoutTransition mTransitioner;

  03. /**

  04. * 初始化容器动画

  05. */

  06. private void initTransition() {

  07. mTransitioner = new LayoutTransition();

  08. container.setLayoutTransition(mTransitioner);

  09. }</code>

  LayoutTransition类定义了如下几种布局容器动画类型。

  APPEARING ：当view出现或者添加的时候，view出现的动画 DISAPPEARING ：当view消失或者隐藏的时候，view消失的动画 CHANGE_APPEARING ：当添加view导致布局容器改变的时候，整个布局容器的动画 CHANGE_DISAPPEARING ：当删除或者隐藏view导致布局容器改变的时候，整个布局容器的动画

  你可以自定义这些动画，通过setAnimator() 方法把它们设置进一个 LayoutTransition 对象中去。

  LayoutTransition的用法

  APPEARING–view出现的动画

  view source print ?

  1. <code class=" hljs java">/**

  2. * view出现时 view自身的动画效果

  3. */

  4. ObjectAnimator animator1 = ObjectAnimator.ofFloat(null, "rotationY", 0F, 90F, 0F);

  5. mTransitioner.setAnimator(LayoutTransition.APPEARING, animator1);</code>

  定义一个旋转的属性动画，这里将动画对象置空，因为系统内部会将添加的view设置为动画对象。然后调用setAnimator()方法将动画设置进LayoutTransition对象mTransitioner中。

  完整动画代码如下，具体解释都有注解

  view source print ?

  001. <code class=" hljs java">package com.xjp.animations;

  002.  

  003. import android.animation.Animator;

  004. import android.animation.AnimatorListenerAdapter;

  005. import android.animation.Keyframe;

  006. import android.animation.LayoutTransition;

  007. import android.animation.ObjectAnimator;

  008. import android.animation.PropertyValuesHolder;

  009. import android.app.Activity;

  010. import android.os.Bundle;

  011. import android.view.View;

  012. import android.view.ViewGroup;

  013. import android.widget.Button;

  014. import android.widget.LinearLayout;

  015.  

  016. /**

  017. * Description:布局动画Demo

  018. * User: xjp

  019. * Date: 2015/5/22

  020. * Time: 15:06

  021. */

  022.  

  023. public class LayoutAnimationActivity extends Activity {

  024.  

  025.  

  026. private int i = 0;

  027. private LinearLayout container;

  028. private LayoutTransition mTransitioner;

  029.  

  030. @Override

  031. protected void onCreate(Bundle savedInstanceState) {

  032. super.onCreate(savedInstanceState);

  033.  

  034. setContentView(R.layout.activity_layout_animation);

  035.  

  036. container = (LinearLayout) findViewById(R.id.parent);

  037.  

  038. initTransition();

  039. setTransition();

  040. }

  041.  

  042. /**

  043. * 初始化容器动画

  044. */

  045. private void initTransition() {

  046. mTransitioner = new LayoutTransition();

  047. container.setLayoutTransition(mTransitioner);

  048. }

  049.  

  050.  

  051. private void setTransition() {

  052. /**

  053. * view出现时 view自身的动画效果

  054. */

  055. ObjectAnimator animator1 = ObjectAnimator.ofFloat(null, "rotationY", 90F, 0F).

  056. setDuration(mTransitioner.getDuration(LayoutTransition.APPEARING));

  057. mTransitioner.setAnimator(LayoutTransition.APPEARING, animator1);

  058.  

  059. /**

  060. * view 消失时，view自身的动画效果

  061. */

  062. ObjectAnimator animator2 = ObjectAnimator.ofFloat(null, "rotationX", 0F, 90F, 0F).

  063. setDuration(mTransitioner.getDuration(LayoutTransition.DISAPPEARING));

  064. mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, animator2);

  065.  

  066. /**

  067. * view 动画改变时，布局中的每个子view动画的时间间隔

  068. */

  069. mTransitioner.setStagger(LayoutTransition.CHANGE_APPEARING, 30);

  070. mTransitioner.setStagger(LayoutTransition.CHANGE_DISAPPEARING, 30);

  071.  

  072.  

  073. /**

  074. * 为什么这里要这么写？具体我也不清楚，ViewGroup源码里面是这么写的，我只是模仿而已

  075. * 不这么写貌似就没有动画效果了，所以你懂的！

  076. */

  077. PropertyValuesHolder pvhLeft =

  078. PropertyValuesHolder.ofInt("left", 0, 1);

  079. PropertyValuesHolder pvhTop =

  080. PropertyValuesHolder.ofInt("top", 0, 1);

  081. PropertyValuesHolder pvhRight =

  082. PropertyValuesHolder.ofInt("right", 0, 1);

  083. PropertyValuesHolder pvhBottom =

  084. PropertyValuesHolder.ofInt("bottom", 0, 1);

  085.  

  086.  

  087. /**

  088. * view出现时，导致整个布局改变的动画

  089. */

  090. PropertyValuesHolder animator3 = PropertyValuesHolder.ofFloat("scaleX", 1F, 2F, 1F);

  091. final ObjectAnimator changeIn = ObjectAnimator.ofPropertyValuesHolder(

  092. this, pvhLeft, pvhTop, pvhRight, pvhBottom, animator3).

  093. setDuration(mTransitioner.getDuration(LayoutTransition.CHANGE_APPEARING));

  094. changeIn.addListener(new AnimatorListenerAdapter() {

  095. @Override

  096. public void onAnimationEnd(Animator animation) {

  097. View view = (View) ((ObjectAnimator) animation).getTarget();

  098. view.setScaleX(1.0f);

  099. }

  100. });

  101. mTransitioner.setAnimator(LayoutTransition.CHANGE_APPEARING, changeIn);

  102.  

  103.  

  104. /**

  105. * view消失，导致整个布局改变时的动画

  106. */

  107. Keyframe kf0 = Keyframe.ofFloat(0f, 0f);

  108. Keyframe kf1 = Keyframe.ofFloat(.5f, 2f);

  109. Keyframe kf2 = Keyframe.ofFloat(1f, 0f);

  110. PropertyValuesHolder pvhRotation =

  111. PropertyValuesHolder.ofKeyframe("scaleX", kf0, kf1, kf2);

  112. final ObjectAnimator changeOut = ObjectAnimator.ofPropertyValuesHolder(

  113. this, pvhLeft, pvhTop, pvhRight, pvhBottom, pvhRotation).

  114. setDuration(mTransitioner.getDuration(LayoutTransition.CHANGE_DISAPPEARING));

  115. changeOut.addListener(new AnimatorListenerAdapter() {

  116. @Override

  117. public void onAnimationEnd(Animator animation) {

  118. View view = (View) ((ObjectAnimator) animation).getTarget();

  119. view.setScaleX(1.0f);

  120. }

  121. });

  122. mTransitioner.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, changeOut);

  123. }

  124.  

  125.  

  126. public void buttonClick(View view) {

  127. addButtonView();

  128. }

  129.  

  130. public void buttonClick1(View view) {

  131. removeButtonView();

  132. }

  133.  

  134. private void addButtonView() {

  135. i++;

  136. Button button = new Button(this);

  137. button.setText("button" + i);

  138. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

  139. ViewGroup.LayoutParams.WRAP_CONTENT);

  140. container.addView(button, Math.min(1, container.getChildCount()), params);

  141. }

  142.  

  143. private void removeButtonView() {

  144. if (i > 0)

  145. container.removeViewAt(0);

  146. }

  147. }

  148. </code>

  布局文件

  view source print ?

  01. <code class=" hljs xml"><?xml version="1.0" encoding="utf-8"?>

  02. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  03. android:layout_width="match_parent"

  04. android:layout_height="match_parent"

  05. android:orientation="vertical">

  06.  

  07. <LinearLayout

  08. android:layout_width="match_parent"

  09. android:layout_height="wrap_content"

  10. android:orientation="horizontal">

  11.  

  12. <Button

  13. android:layout_width="wrap_content"

  14. android:layout_height="wrap_content"

  15. android:onClick="buttonClick"

  16. android:text="添加控件" />

  17.  

  18. <Button

  19. android:layout_width="wrap_content"

  20. android:layout_height="wrap_content"

  21. android:onClick="buttonClick1"

  22. android:text="移除控件" />

  23. </LinearLayout>

  24.  

  25.  

  26. <LinearLayout

  27. android:id="@+id/parent"

  28. android:layout_width="match_parent"

  29. android:layout_height="wrap_content"

  30. android:animateLayoutChanges="true"

  31. android:orientation="vertical"></LinearLayout>

  32.  

  33. </LinearLayout></code>

  最后来一张效果图： 
  

  布局动画之layoutAnimation

  很多时候我们想要在第一次加载ListView或者GridView的时候能有个动画效果来达到一个很好的过度效果。比如下面的效果 
   
  实现这种效果只需要在布局中添加android:layoutAnimation=”@anim/layout”属性就好了。接下来我们来看看layout.xml动画怎么实现的？在res/anim目录下新建layout.xml文件，代码如下：

  view source print ?

  1. <code class=" hljs xml"><?xml version="1.0" encoding="utf-8"?>

  2. <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"

  3. android:animation="@anim/left"

  4. android:animationOrder="normal"

  5. android:delay="30%"></layoutAnimation></code>

  android:delay 子类动画时间间隔 （延迟） 70% 也可以是一个浮点数 如“1.2”等 
  android:animationOrder=”random” 子类的显示方式 random表示随机 
  android:animationOrder 的取值有 
  normal 0 默认 
  reverse 1 倒序 
  random 2 随机 
  android:animation=”@anim/left” 表示孩子显示时的具体动画是什么代 
  在res/anim目录下新建left.xml文件，码如下：

  view source print ?

  01. <code class=" hljs xml"><?xml version="1.0" encoding="utf-8"?>

  02. <set xmlns:android="http://schemas.android.com/apk/res/android">

  03. <translate

  04. android:duration="500"

  05. android:fromXDelta="100%"

  06. android:fromYDelta="0"

  07. android:toXDelta="0"

  08. android:toYDelta="0" />

  09. <alpha

  10. android:duration="500"

  11. android:fromAlpha="0"

  12. android:toAlpha="1" />

  13. </set></code>

  这样就实现了如上ListView的动画效果了。

  当然我们也可以在代码中实现这种动画效果

  view source print ?

  01. <code class=" hljs cs">private void initAinm() {

  02. //通过加载XML动画设置文件来创建一个Animation对象；

  03. Animation animation = AnimationUtils.loadAnimation(this, R.anim.left);

  04. //得到一个LayoutAnimationController对象；

  05. LayoutAnimationController lac = new LayoutAnimationController(animation);

  06. //设置控件显示的顺序；

  07. lac.setOrder(LayoutAnimationController.ORDER_REVERSE);

  08. //设置控件显示间隔时间；

  09. lac.setDelay(1);

  10. //为ListView设置LayoutAnimationController属性；

  11. listView.setLayoutAnimation(lac);

  12. }</code>

  通过AnimationUtils.loadAnimation加载item的动画来获得一个Animation对象，然后将Animation对象设置到LayoutAnimationController中来获得LayoutAnimationController对象，配置LayoutAnimationController对象的一些属性。最后将LayoutAnimationController对象设置到ListView中。

  注意

  layoutAnimation动画不仅仅限于ListView，GridView中，也可用于一切ViewGroup中。具体怎么用就看项目需求了。

  总结

  Android属性动画至此就基本介绍完毕了。其中基本的动画使用和实例也贴出来了，基本能满足日常开发需求，当然有更炫的动画时可以根据这些基础去实现。这么说，以后都可以不用补间动画了？貌似属性动画更加合理，因为这种动画改变的是属性而不仅仅是位置。

延伸阅读：

• 1、Android开发之自定义动画
• 2、Android电视关闭的动画效果
• 3、Android中Linux开机启动画面设置方法
• 4、android编程 简单的渐变动画
• 5、Android中动画学习
• 6、Android编程开发动画效果被遮掉的问题
• 7、Android Frame Animation帧动画不播放问题
• 8、Android开发吸入式动画效果