欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android LayoutAnimation 与 LayoutTransition

程序员文章站 2024-03-24 21:04:22
...

一、 LayoutAnimation

LayoutAnimation 是API Level 1 就已经有的,LayoutAnimation是对于ViewGroup控件所有的child view的操作,也就是说它是用来控制ViewGroup中所有的child view 显示的动画。LayoutAnimation动画可以直接在xml中定义:

  1. <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:delay="30%"  
  3.     android:animationOrder="reverse"  
  4.     android:animation="@anim/slide_right"/>  
  5.   
  6. 1. android:delay表示动画播放的延时,既可以是百分比,也可以是float小数。  
  7. 2. android:animationOrder表示动画的播放顺序,有三个取值normal(顺序)、reverse(反序)、random(随机)。  
  8. 3. android:animation指向了子控件所要播放的动画。  
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="30%"
    android:animationOrder="reverse"
    android:animation="@anim/slide_right"/>

1. android:delay表示动画播放的延时,既可以是百分比,也可以是float小数。
2. android:animationOrder表示动画的播放顺序,有三个取值normal(顺序)、reverse(反序)、random(随机)。
3. android:animation指向了子控件所要播放的动画。

可以通过下面两种方式加载

1. 直接在ViewGroup的 layout xml 文件中设置:

  1. android:layoutAnimation="@anim/customer_anim"   
android:layoutAnimation="@anim/customer_anim" 

2. 在代码中加载:
  1. Animation animation=AnimationUtils.loadAnimation(this, R.anim.slide_right);   //得到一个LayoutAnimationController对象;  
  2. LayoutAnimationController controller = new LayoutAnimationController(animation);   //设置控件显示的顺序;  
  3. controller.setOrder(LayoutAnimationController.ORDER_REVERSE);   //设置控件显示间隔时间;  
  4. controller.setDelay(0.3);   //为ListView设置LayoutAnimationController属性;  
  5. listView.setLayoutAnimation(controller);  
  6. listView.startLayoutAnimation();  
   Animation animation=AnimationUtils.loadAnimation(this, R.anim.slide_right);   //得到一个LayoutAnimationController对象;
   LayoutAnimationController controller = new LayoutAnimationController(animation);   //设置控件显示的顺序;
   controller.setOrder(LayoutAnimationController.ORDER_REVERSE);   //设置控件显示间隔时间;
   controller.setDelay(0.3);   //为ListView设置LayoutAnimationController属性;
   listView.setLayoutAnimation(controller);
   listView.startLayoutAnimation();

二、LayoutTransition

LayoutTransition 是API Level 11 才出现的。LayoutTransition的动画效果,只有当ViewGroup中有View添加、删除、隐藏、显示的时候才会体现出来。

1. LayoutTransition类中主要有五种容器转换动画类型,具体如下:

  1. 1.LayoutTransition.APPEARING:当View出现或者添加的时候View出现的动画。  
  2. 2.LayoutTransition.CHANGE_APPEARING:当添加View导致布局容器改变的时候整个布局容器的动画。  
  3. 3.LayoutTransition.DISAPPEARING:当View消失或者隐藏的时候View消失的动画。  
  4. 4.LayoutTransition.CHANGE_DISAPPEARING:当删除或者隐藏View导致布局容器改变的时候整个布局容器的动画。  
  5. 5.LayoutTransition.CHANGE:当不是由于View出现或消失造成对其他View位置造成改变的时候整个布局容器的动画。  
1.LayoutTransition.APPEARING:当View出现或者添加的时候View出现的动画。
2.LayoutTransition.CHANGE_APPEARING:当添加View导致布局容器改变的时候整个布局容器的动画。
3.LayoutTransition.DISAPPEARING:当View消失或者隐藏的时候View消失的动画。
4.LayoutTransition.CHANGE_DISAPPEARING:当删除或者隐藏View导致布局容器改变的时候整个布局容器的动画。
5.LayoutTransition.CHANGE:当不是由于View出现或消失造成对其他View位置造成改变的时候整个布局容器的动画。

2. 在xml中使用系统提供的默认的LayoutTransition动画:

  1. android:animateLayoutChanges="true"    
android:animateLayoutChanges="true"  

在ViewGroup添加如上xml属性默认是没有任何动画效果的,因为前面说了,该动画针对于ViewGroup内部东东发生改变时才有效,所以当我们设置如上属性然后调用 ViewGroup的addView、removeView方法时就能看见系统默认的动画效果了。

3. 在代码中使用系统默认的LayoutTransition动画:

  1. LayoutTransition mTransitioner = new LayoutTransition();  
  2. mViewGroup.setLayoutTransition(mTransitioner);  
LayoutTransition mTransitioner = new LayoutTransition();
mViewGroup.setLayoutTransition(mTransitioner);

4. 在代码中自定义LayoutTransition动画:


  1. // 生成自定义动画  
  2. private void setupCustomAnimations() {  
  3.     // 动画:CHANGE_APPEARING  
  4.     // Changing while Adding  
  5.     PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left"01);  
  6.     PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top"01);  
  7.     PropertyValuesHolder pvhRight = PropertyValuesHolder.ofInt("right"0,  
  8.             1);  
  9.     PropertyValuesHolder pvhBottom = PropertyValuesHolder.ofInt("bottom",  
  10.             01);  
  11.     PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofFloat("scaleX",  
  12.             1f, 0f, 1f);  
  13.     PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofFloat("scaleY",  
  14.             1f, 0f, 1f);  
  15.   
  16.     final ObjectAnimator changeIn = ObjectAnimator.ofPropertyValuesHolder(  
  17.             this, pvhLeft, pvhTop, pvhRight, pvhBottom, pvhScaleX,  
  18.             pvhScaleY).setDuration(  
  19.             mTransitioner.getDuration(LayoutTransition.CHANGE_APPEARING));  
  20.     mTransitioner.setAnimator(LayoutTransition.CHANGE_APPEARING, changeIn);  
  21.     changeIn.addListener(new AnimatorListenerAdapter() {  
  22.         public void onAnimationEnd(Animator anim) {  
  23.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  24.             view.setScaleX(1f);  
  25.             view.setScaleY(1f);  
  26.         }  
  27.     });  
  28.   
  29.     // 动画:CHANGE_DISAPPEARING  
  30.     // Changing while Removing  
  31.     Keyframe kf0 = Keyframe.ofFloat(0f, 0f);  
  32.     Keyframe kf1 = Keyframe.ofFloat(.9999f, 360f);  
  33.     Keyframe kf2 = Keyframe.ofFloat(1f, 0f);  
  34.     PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe(  
  35.             "rotation", kf0, kf1, kf2);  
  36.     final ObjectAnimator changeOut = ObjectAnimator  
  37.             .ofPropertyValuesHolder(this, pvhLeft, pvhTop, pvhRight,  
  38.                     pvhBottom, pvhRotation)  
  39.             .setDuration(  
  40.                     mTransitioner  
  41.                             .getDuration(LayoutTransition.CHANGE_DISAPPEARING));  
  42.     mTransitioner.setAnimator(LayoutTransition.CHANGE_DISAPPEARING,  
  43.             changeOut);  
  44.     changeOut.addListener(new AnimatorListenerAdapter() {  
  45.         public void onAnimationEnd(Animator anim) {  
  46.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  47.             view.setRotation(0f);  
  48.         }  
  49.     });  
  50.   
  51.     // 动画:APPEARING  
  52.     // Adding  
  53.     ObjectAnimator animIn = ObjectAnimator.ofFloat(null"rotationY", 90f,  
  54.             0f).setDuration(  
  55.             mTransitioner.getDuration(LayoutTransition.APPEARING));  
  56.     mTransitioner.setAnimator(LayoutTransition.APPEARING, animIn);  
  57.     animIn.addListener(new AnimatorListenerAdapter() {  
  58.         public void onAnimationEnd(Animator anim) {  
  59.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  60.             view.setRotationY(0f);  
  61.         }  
  62.     });  
  63.   
  64.     // 动画:DISAPPEARING  
  65.     // Removing  
  66.     ObjectAnimator animOut = ObjectAnimator.ofFloat(null"rotationX", 0f,  
  67.             90f).setDuration(  
  68.             mTransitioner.getDuration(LayoutTransition.DISAPPEARING));  
  69.     mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, animOut);  
  70.     animOut.addListener(new AnimatorListenerAdapter() {  
  71.         public void onAnimationEnd(Animator anim) {  
  72.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  73.             view.setRotationX(0f);  
  74.         }  
  75.     });  
  76.   
  77. }  

一、 LayoutAnimation

LayoutAnimation 是API Level 1 就已经有的,LayoutAnimation是对于ViewGroup控件所有的child view的操作,也就是说它是用来控制ViewGroup中所有的child view 显示的动画。LayoutAnimation动画可以直接在xml中定义:

  1. <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:delay="30%"  
  3.     android:animationOrder="reverse"  
  4.     android:animation="@anim/slide_right"/>  
  5.   
  6. 1. android:delay表示动画播放的延时,既可以是百分比,也可以是float小数。  
  7. 2. android:animationOrder表示动画的播放顺序,有三个取值normal(顺序)、reverse(反序)、random(随机)。  
  8. 3. android:animation指向了子控件所要播放的动画。  
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:delay="30%"
    android:animationOrder="reverse"
    android:animation="@anim/slide_right"/>

1. android:delay表示动画播放的延时,既可以是百分比,也可以是float小数。
2. android:animationOrder表示动画的播放顺序,有三个取值normal(顺序)、reverse(反序)、random(随机)。
3. android:animation指向了子控件所要播放的动画。

可以通过下面两种方式加载

1. 直接在ViewGroup的 layout xml 文件中设置:

  1. android:layoutAnimation="@anim/customer_anim"   
android:layoutAnimation="@anim/customer_anim" 

2. 在代码中加载:
  1. Animation animation=AnimationUtils.loadAnimation(this, R.anim.slide_right);   //得到一个LayoutAnimationController对象;  
  2. LayoutAnimationController controller = new LayoutAnimationController(animation);   //设置控件显示的顺序;  
  3. controller.setOrder(LayoutAnimationController.ORDER_REVERSE);   //设置控件显示间隔时间;  
  4. controller.setDelay(0.3);   //为ListView设置LayoutAnimationController属性;  
  5. listView.setLayoutAnimation(controller);  
  6. listView.startLayoutAnimation();  
   Animation animation=AnimationUtils.loadAnimation(this, R.anim.slide_right);   //得到一个LayoutAnimationController对象;
   LayoutAnimationController controller = new LayoutAnimationController(animation);   //设置控件显示的顺序;
   controller.setOrder(LayoutAnimationController.ORDER_REVERSE);   //设置控件显示间隔时间;
   controller.setDelay(0.3);   //为ListView设置LayoutAnimationController属性;
   listView.setLayoutAnimation(controller);
   listView.startLayoutAnimation();

二、LayoutTransition

LayoutTransition 是API Level 11 才出现的。LayoutTransition的动画效果,只有当ViewGroup中有View添加、删除、隐藏、显示的时候才会体现出来。

1. LayoutTransition类中主要有五种容器转换动画类型,具体如下:

  1. 1.LayoutTransition.APPEARING:当View出现或者添加的时候View出现的动画。  
  2. 2.LayoutTransition.CHANGE_APPEARING:当添加View导致布局容器改变的时候整个布局容器的动画。  
  3. 3.LayoutTransition.DISAPPEARING:当View消失或者隐藏的时候View消失的动画。  
  4. 4.LayoutTransition.CHANGE_DISAPPEARING:当删除或者隐藏View导致布局容器改变的时候整个布局容器的动画。  
  5. 5.LayoutTransition.CHANGE:当不是由于View出现或消失造成对其他View位置造成改变的时候整个布局容器的动画。  
1.LayoutTransition.APPEARING:当View出现或者添加的时候View出现的动画。
2.LayoutTransition.CHANGE_APPEARING:当添加View导致布局容器改变的时候整个布局容器的动画。
3.LayoutTransition.DISAPPEARING:当View消失或者隐藏的时候View消失的动画。
4.LayoutTransition.CHANGE_DISAPPEARING:当删除或者隐藏View导致布局容器改变的时候整个布局容器的动画。
5.LayoutTransition.CHANGE:当不是由于View出现或消失造成对其他View位置造成改变的时候整个布局容器的动画。

2. 在xml中使用系统提供的默认的LayoutTransition动画:

  1. android:animateLayoutChanges="true"    
android:animateLayoutChanges="true"  

在ViewGroup添加如上xml属性默认是没有任何动画效果的,因为前面说了,该动画针对于ViewGroup内部东东发生改变时才有效,所以当我们设置如上属性然后调用 ViewGroup的addView、removeView方法时就能看见系统默认的动画效果了。

3. 在代码中使用系统默认的LayoutTransition动画:

  1. LayoutTransition mTransitioner = new LayoutTransition();  
  2. mViewGroup.setLayoutTransition(mTransitioner);  
LayoutTransition mTransitioner = new LayoutTransition();
mViewGroup.setLayoutTransition(mTransitioner);

4. 在代码中自定义LayoutTransition动画:


  1. // 生成自定义动画  
  2. private void setupCustomAnimations() {  
  3.     // 动画:CHANGE_APPEARING  
  4.     // Changing while Adding  
  5.     PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left"01);  
  6.     PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top"01);  
  7.     PropertyValuesHolder pvhRight = PropertyValuesHolder.ofInt("right"0,  
  8.             1);  
  9.     PropertyValuesHolder pvhBottom = PropertyValuesHolder.ofInt("bottom",  
  10.             01);  
  11.     PropertyValuesHolder pvhScaleX = PropertyValuesHolder.ofFloat("scaleX",  
  12.             1f, 0f, 1f);  
  13.     PropertyValuesHolder pvhScaleY = PropertyValuesHolder.ofFloat("scaleY",  
  14.             1f, 0f, 1f);  
  15.   
  16.     final ObjectAnimator changeIn = ObjectAnimator.ofPropertyValuesHolder(  
  17.             this, pvhLeft, pvhTop, pvhRight, pvhBottom, pvhScaleX,  
  18.             pvhScaleY).setDuration(  
  19.             mTransitioner.getDuration(LayoutTransition.CHANGE_APPEARING));  
  20.     mTransitioner.setAnimator(LayoutTransition.CHANGE_APPEARING, changeIn);  
  21.     changeIn.addListener(new AnimatorListenerAdapter() {  
  22.         public void onAnimationEnd(Animator anim) {  
  23.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  24.             view.setScaleX(1f);  
  25.             view.setScaleY(1f);  
  26.         }  
  27.     });  
  28.   
  29.     // 动画:CHANGE_DISAPPEARING  
  30.     // Changing while Removing  
  31.     Keyframe kf0 = Keyframe.ofFloat(0f, 0f);  
  32.     Keyframe kf1 = Keyframe.ofFloat(.9999f, 360f);  
  33.     Keyframe kf2 = Keyframe.ofFloat(1f, 0f);  
  34.     PropertyValuesHolder pvhRotation = PropertyValuesHolder.ofKeyframe(  
  35.             "rotation", kf0, kf1, kf2);  
  36.     final ObjectAnimator changeOut = ObjectAnimator  
  37.             .ofPropertyValuesHolder(this, pvhLeft, pvhTop, pvhRight,  
  38.                     pvhBottom, pvhRotation)  
  39.             .setDuration(  
  40.                     mTransitioner  
  41.                             .getDuration(LayoutTransition.CHANGE_DISAPPEARING));  
  42.     mTransitioner.setAnimator(LayoutTransition.CHANGE_DISAPPEARING,  
  43.             changeOut);  
  44.     changeOut.addListener(new AnimatorListenerAdapter() {  
  45.         public void onAnimationEnd(Animator anim) {  
  46.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  47.             view.setRotation(0f);  
  48.         }  
  49.     });  
  50.   
  51.     // 动画:APPEARING  
  52.     // Adding  
  53.     ObjectAnimator animIn = ObjectAnimator.ofFloat(null"rotationY", 90f,  
  54.             0f).setDuration(  
  55.             mTransitioner.getDuration(LayoutTransition.APPEARING));  
  56.     mTransitioner.setAnimator(LayoutTransition.APPEARING, animIn);  
  57.     animIn.addListener(new AnimatorListenerAdapter() {  
  58.         public void onAnimationEnd(Animator anim) {  
  59.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  60.             view.setRotationY(0f);  
  61.         }  
  62.     });  
  63.   
  64.     // 动画:DISAPPEARING  
  65.     // Removing  
  66.     ObjectAnimator animOut = ObjectAnimator.ofFloat(null"rotationX", 0f,  
  67.             90f).setDuration(  
  68.             mTransitioner.getDuration(LayoutTransition.DISAPPEARING));  
  69.     mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, animOut);  
  70.     animOut.addListener(new AnimatorListenerAdapter() {  
  71.         public void onAnimationEnd(Animator anim) {  
  72.             View view = (View) ((ObjectAnimator) anim).getTarget();  
  73.             view.setRotationX(0f);  
  74.         }  
  75.     });  
  76.   
  77. }