安卓动画片系列之二,补间动画(Tween Animation)以及动画结合LayoutAnimation的好处

安卓动画系列之二,补间动画(Tween Animation)以及动画结合LayoutAnimation的好处

Android的动画大致分类,一共有三,分别是补间动画(Tween Animation),帧动画(Frame Animation) 和属性动画 (Property Animation). 

补间动画,就是我们一开始就接触并且常用Translate(移动), Alpha(渐变),Scale(大小形变) 和Rotate(旋转)等四个效果, 在代码中定义了开始和结束的效果参数,其过渡的渐变效果会由系统去自动完成. 

帧动画,就是类似剪辑电影的原理,将一帧一帧的图片连接起来,在设定的时间和次数内播放,就成了生动的动画.常用的animation-list标签就是用于实现这种帧动画的,这个在下一篇文章会实现个例子.

属性动画, 利用自定义的算法去改变对象的属性从而实现较为高级和复杂的动画.

按着循序渐进的原理,这次我们来讲补间动画,以及结合补间动画和LayoutAnimation来实现一些常见的加载动画.

结合代码说说常用的几个属性:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:shareInterpolator="true">
      <translate 
        android:fromXDelta="80%"
        android:toXDelta="0%"
        android:fromYDelta="0%"
        android:toYDelta="0%"
        android:duration="300"
        />
        
      <alpha
          android:fromAlpha="0.2"
          android:toAlpha="1.0"
          android:duration="300"
          />
      <scale
          android:fromXScale="0.3"
          android:fromYScale="0.3"
          android:toXScale="1.0"
          android:toYScale="1.0"
          android:pivotX="50%p"
          android:pivotY="50%p"
          android:duration="300"
          />
      <rotate
		android:fromDegrees="0"
		android:toDegrees="360"
		android:pivotX="50%"
		android:pivotY="50%" 
		android:duration="3000" 
		/>
</set>
Translate -- 移动:

android:fromXDelta ,代表从X轴哪个位置开始发生位移. 100%表示刚好是屏幕右边屏幕的边缘,就是刚好看不见的地方了,80%则表示从屏幕80%的坐标地方开始.

android:fromYDelta="0%" , 同理则是从Y轴0%的坐标位置开始移动.

上面2个参数表示起点.

android:toXDelta, android:toYDelta 则表示动画结束的X,Y坐标.

android:duration="300" 则是动画持续的时间长度, 单位为ms, 所以1秒就是1000(ms).

Alpha -- 渐变:

android:fromAlpha="0.2" 是渐变开始的透明度, 0.0f为完全透明, 1.0f则为完全不透明.

android:toAlpha="1.0"  是渐变结束时的透明度.

自然,android:duration也代表动画的持续时间.


Scale -- 大小形变:

android:fromXScale ="0.3" ,android:fromYScale="0.3" 则表示该控件从原来0.3倍的大小开始发生形变, "1.0"则是自身原来的大小.更大一些可以写"1.5"甚至更大.

android:pivotX="50%p" , android:pivotY="50%p"  , 表示相对于动画在X,Y轴的相对位置开始, 注意这里的参数,有P和没P是不一样的,如"50"则表示一个绝对的坐标值,"50%"表示相对于自身长度的一半大小的坐标值,"50%p"则表示相对于所在父控件的50%的坐标位置.

Rotate -- 旋转:

android:fromDegrees="0" 动画从0度开始旋转

android:toDegrees="360" 动画结束时的角度为360度

主要用的参数就是以上这些.


LayoutAnimation,是系统自带的一个特别属性.这里结合上面的补间动画直接上一个例子就明白用法了.

anim.xml: (一个简单的渐变+大小形变的动画)

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator"
   android:shareInterpolator="true">
      <alpha
          android:fromAlpha="0.2"
          android:toAlpha="1.0"
          android:duration="300"
          />
      <scale
          android:fromXScale="0.3"
          android:fromYScale="0.3"
          android:toXScale="1.0"
          android:toYScale="1.0"
          android:pivotX="50%p"
          android:pivotY="50%p"
          android:duration="300"
          />
      
</set>
同时在anim文件夹另外新建一个layoutAnimation.xml

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:delay="0.5"
   android:animationOrder="normal"
   android:animation="@anim/anim"
   />
这里直接砸XML文件里面引用自定义的动画XML.

回到你自己新建的一个项目中,activity_main.xml中加入ListView控件.假设下面就是一个activity_main.xml,其中类似的引用如下:

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  >
  <ListView
      android:id="@+id/lv_act_main"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:cacheColorHint="#00000000"
      android:divider="@color/transparent"
      android:fastScrollEnabled="false"
      android:focusable="true"
      android:scrollbars="vertical"
      android:layoutAnimation="@anim/layoutAnimation"
      />  
    
</LinearLayout>
关键的一句是:

android:layoutAnimation="@anim/layoutAnimation"
然后运行自己的项目,就会发现, ListView加载的时候,每一个item在加载的时候都是渐变+大小形变的动画效果.没错,LayoutAnimatiion也如上篇文章所说的类似插补器一样能加强动画加载的效果,比如这里就能让类似Gridview,ListView这样的包含有诸多item的控件,在加载时其自身的item都携带了这预设的animation动画.类似现在很多列表的首次加载,都有各种炫目效果的,其实都从这种动画中演变过来.很多复杂的东西都由简单的组合而成,相信随着深入理解,我们能够实现更多动画哦.