android动画入门：View动画和帧动画

发表于   |   分类于   |  

前言

Android 的动画可以分为三种：View 动画（view animation），帧动画（drawable animation）以及 属性动画（property animation）。属性动画是API11的新特性，不能再低版本中直接使用，但是我们可以通过兼容库来使用它。接下来，本文会主要讲解View动画和帧动画的使用，以及一些特殊的使用场景。

View 动画

View动画 即：补间动画（Tween Animation），通过对场景里的对象不断地做图像变换，从而产生动画效果，他是一种渐进式的动画，并且View动画支持自定义。
View动画包括四种动画效果：平移动画，缩放动画，旋转动画和透明度动画。

名称 标签 效果
平移动画 移动 View
缩放动画 放大或缩小 View
旋转动画 旋转 View
透明度动画 改变View的透明度

View 动画的使用，需要编写动画xml文件，存放的路径呢？ 是在res/anim/ 文件夹下面。下面来看一下，xml文件的语法格式：

  • 平移动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
    android:fromXDelta="30"
    android:toXDelta="-80"
    android:fromYDelta="30"
    android:toYDelta="300"
    />
    <!-- translate 位置转移动画效果
            整型值:
                fromXDelta 属性为动画起始时 X坐标上的位置    
                toXDelta   属性为动画结束时 X坐标上的位置
                fromYDelta 属性为动画起始时 Y坐标上的位置
                toYDelta   属性为动画结束时 Y坐标上的位置
                注意:
                         没有指定fromXType toXType fromYType toYType 时候，
                         默认是以自己为相对参照物                
    -->
    </set>

  • 缩放动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
       <scale  
              android:interpolator=
                         "@android:anim/accelerate_decelerate_interpolator"
              android:fromXScale="0.0"
              android:toXScale="1.4"
              android:fromYScale="0.0"
              android:toYScale="1.4"
              android:pivotX="50%"
              android:pivotY="50%" />
    </set>
    <!-- 尺寸伸缩动画效果 scale
           属性：interpolator 指定一个动画的插值器
          浮点型值：      
                fromXScale 属性为动画起始时 X坐标上的伸缩尺寸    
                toXScale   属性为动画结束时 X坐标上的伸缩尺寸     
            
                fromYScale 属性为动画起始时Y坐标上的伸缩尺寸    
                toYScale   属性为动画结束时Y坐标上的伸缩尺寸    
            
                说明:
                     以上四种属性值    
        
                        0.0表示收缩到没有 
                        1.0表示正常无伸缩     
                        值小于1.0表示收缩  
                        值大于1.0表示放大
            
                pivotX     属性为动画相对于物件的X坐标的开始位置
                pivotY     属性为动画相对于物件的Y坐标的开始位置
            
                说明:
                        以上两个属性值 从0%-100%中取值
                        50%为物件的X或Y方向坐标上的中点位置
    -->

  • 旋转动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
            android:interpolator="@android:anim/accelerate_decelerate_interpolator"
            android:fromDegrees="0" 
            android:toDegrees="+350"         
            android:pivotX="50%" 
            android:pivotY="50%" />
      <!-- rotate 旋转动画效果
           属性：interpolator 指定一个动画的插值器
                 
           浮点数型值:
                fromDegrees 属性为动画起始时物件的角度    
                toDegrees   属性为动画结束时物件旋转的角度 可以大于360度   
                说明:
                         当角度为负数——表示逆时针旋转
                         当角度为正数——表示顺时针旋转              
                         (负数from——to正数:顺时针旋转)   
                         (负数from——to负数:逆时针旋转) 
                         (正数from——to正数:顺时针旋转) 
                         (正数from——to负数:逆时针旋转)       
                pivotX     属性为动画相对于物件的X坐标的开始位置
                pivotY     属性为动画相对于物件的Y坐标的开始位置
                说明:        以上两个属性值 从0%-100%中取值
                             50%为物件的X或Y方向坐标上的中点位置
    -->
    </set>

  • 透明度动画

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android" >
    <alpha
    android:fromAlpha="0.1"
    android:toAlpha="1.0"
    /> 
    <!-- 透明度控制动画效果 alpha
            浮点型值：
                fromAlpha 属性为动画起始时透明度
                toAlpha   属性为动画结束时透明度
                说明: 
                    0.0表示完全透明
                    1.0表示完全不透明
                以上值取0.0-1.0之间的float数据类型的数字
    -->
    </set>

除了以上各个View动画 特有的属性之外，他们还存在着许多共有的属性。

属性 描述
android:duration=”long” 动画的持续时间，单位：毫秒
android:fillAfter=[“true” , “false”] 动画结束时，是否保持动画的结束状态
android:fillBefore=[“true” , “false”] 动画结束时，是否恢复至最开始的状态
android:fillEnabled =[“true” , “false”] 同 android:fillBefore
android:interpolator =”@[package:]anim/interpolator_resource” 设置插值器
android:repeatCount=”int” 动画的重复播放次数
android:repeatMode=[“reverse” or “restart”] 重复类型，reverse：倒序回放，restart：从头播放
android:startOffset=”long” 调用start函数之后等待开始运行的时间，单位为毫秒
android:zAdjustment = [“top”,”normal”,”bottom”] 动画运行在Z轴上的位置，默认值为normal

以上介绍都是各个View动画的单独使用 ，通常的应用场景中是需要我们 对各种View动画的结合使用,标签表示一组动画的集合。

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
         android:interpolator="@android:anim/accelerate_decelerate_interpolator"
         android:shareInterpolator="true">
  <alpha/>
  <scale/>
  <translate/>
  <rotate/>
<!-- 动画集合
       属性：interpolator 指定一个动画的插值器
            shareInterpolator 表示集合中的动画是否共享同一个插值器
-->
</set>

如何应用上面的动画呢？也很简单，如下所示。

1
2
3
// AnimationUtils.loadAnimation(Context context, int id);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.modal_in);
view.startAnimation(animation);

同时，通过Animation 的setAnimationListener 方法可以给View动画添加过程监听，接口如下：

1
2
3
4
5
6
7
8
public static interface AnimationListener {
        //动画开始        
        void onAnimationStart(Animator animation);
        //动画结束
        void onAnimationEnd(Animator animation);
        //动画重复
        void onAnimationRepeat(Animator animation);
    }

帧动画

帧动画是顺序播放一组预先定义好的图片，类似于电影播放。不同于View 动画，系统提供了另外一个雷AnimationDrawable 来使用帧动画。对于来说，使用起来比较简单，这里首先需要用到另一个 集合标签 .

1
2
3
4
5
6
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_refresh_0" android:duration="60"/>
    <item android:drawable="@drawable/icon_refresh_1" android:duration="60"/>
    <item android:drawable="@drawable/icon_refresh_2" android:duration="60"/>
</animation-list>

文件的存放路径：res/drawable/file_source.xml
然后将上述的 动画 作为View的背景并通过AnimationDrawable 来播放即可：

1
2
3
view.setBackgroundResource(R.drawable.file_source);
AnimationDrawable animationDrawable = (AnimationDrawable)view.getBackground();
animationDrawable.start();

帧动画使用比较简单，但是比较容易引起OOM，所以在使用帧动画时，应尽量避免使用过多尺寸的图片。

View 动画的特殊使用

View 动画除了单纯的用于 单个View 的动画形式， 还可以在一些其他的特殊的使用，例如：控制 ViewGroup 的子View 的出场效果，或者Activity的切换效果。

LayoutAnimation

用于设置 ViewGroup 子View 的显示动画效果。 下面就让我们通过一个例子来学习一下：

  1. 首先定义layoutAnimation 动画，它有三个属性：
    • android:animation 指定子元素所要显示的View动画效果
    • android:animationOrder 指定子元素的动画显示顺序 提供了三种模式：normal 正常顺序 random 随机播放 reverse 倒序
    • android:delay 指定子元素动画效果的延迟，比如说：view动画的 duration 设置为 500 ms，那么 delay 为 0.5 ，子元素之间将相差250ms 的依次播放动画。
      1
      2
      3
      4
      5
      6
      7
      // res/anim/anim_layout.xml
      <layoutAnimation 
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:animation="@anim/anim_item"
          android:delay="0.5"
          android:animationOrder="normal">
      </layoutAnimation>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// res/anim/anim_item.xml 
<set 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:shareInterpolator="true"
    android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.6f"
        android:toAlpha="1f" />
    <translate
        android:fromXDelta="100"
        android:toXDelta="0"
        />
</set>
  1. 为ViewGroup 设置android:layoutAnimation 属性，这一以ListView 为例：
    1
    2
    3
    4
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layoutAnimation="@anim/anim_layout"/>

这样就完成了 ViewGroup 动画的设置。当然，出了通过xml 指定之外，我们也可以通过代码来实现，这就需要用到一个类 LayoutAnimationController :

1
2
3
4
5
Animation animation = AnimationUtils.loadLayoutAnimation(this, R.anim.anim_item);
        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setDelay(0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        listView.setLayoutAnimation(controller);

总结

通过 View 动画我们基本就可以实现一些比较实现一些比较绚丽的效果了，但在使用过程中还是需要注意一些问题的：

  • OOM问题 ：这个问题主要针对 帧动画 ，我们要尽量避免使用太多和太大的图片，不然极容易出现OOM。
  • View 动画并不能改变 View的位置，即使视觉上改变了位置，但点击事件仍在 原位置生效。

动画其他：android动画入门：属性动画