Android Animation

Android动画主要分为三大类

1. View Animation
   
2. Drawable Animation
3. Property Animation

其中Drawable Animations对大多数人来说是三者中最容易理解的，其实它就是很多书籍中提到的逐帧动画(frame-by-frame animation)。而Property Animation和View Animation是相对比较容易混淆的，下面先讲解二者的区别。

 

View Animation有两个缺点：（1）View Animation一般只能修改组件（View Object）的部分属性,比如：scaling(大小)和rotation(旋转)，但是无法修改组件的背景颜色。（2）View Animation使某个组件产生动画效果移动一段距离后，比如从屏幕左侧移动到右侧，其实整个过程是绘制出来的效果，该组件真正的位置依然保留在左侧，只有点击左侧位置才能触发该组件。所以想真正移动某组件，需要在动画结束后添加代码实现。

Property Animation则没有以上View Animation的两个限制，Property Animation可以修改任何对象（View Object 或者 non-view Object）的任何属性，比如大小，旋转，颜色。并且，移动后的组件，位置也回跟随着改变。

Android官网推荐使用Property Animation，但是View Animation也有其优点：使用方便简单，所以当View Animation能方便快速地解决需求时，选择它也是不错的选择。

Drawable Animation   （帧动画）

以上我们对Android动画有了一个整体的认识，接下来循序渐进，先介绍最容易学习的Drawable Animation。如上面所说，Drawable Animation是逐帧动画，那么使用它之前必须先定义好各个帧。我们可以通过代码定义，也可以使用xml文件定义，一般使用后者。如下：

[java]  view plain  copy

 

1. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:oneshot="true">  
3.     <item android:drawable="@drawable/frame_1" android:duration="200" />  
4.     <item android:drawable="@drawable/frame_2" android:duration="200" />  
5.     <item android:drawable="@drawable/frame_3" android:duration="200" />  
6.     <item android:drawable="@drawable/frame_4" android:duration="200" />  
7. </animation-list>  

其中android:oneshot=“true”表示该动画只播放一次，等于false时则循环播放。<item/>标签定义各个帧显示的图片。显示顺序依照<item/>定义顺序。下面介绍一个实际场景，即平时我们常见的加载界面，

界面布局中只有一个居中的ImageView，比较简单，布局文件就不列出了。相对重要的是，我们需要定义一个xml文件描述各个帧，如下：

DrawableAnimationDemo\res\drawable\loading.xml

[java]  view plain  copy

 

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:oneshot="false">  
4.     <item android:duration="100">  
5.         <layer-list>  
6.             <item android:drawable="@drawable/login_loading_00" />  
7.             <item android:drawable="@drawable/login_loading_10" />  
8.         </layer-list>  
9.     </item>  
10.     <item android:duration="100">  
11.         <layer-list>  
12.             <item android:drawable="@drawable/login_loading_01" />  
13.             <item android:drawable="@drawable/login_loading_11" />  
14.         </layer-list>  
15.     </item>  
16.     <item android:duration="100">  
17.         <layer-list>  
18.             <item android:drawable="@drawable/login_loading_02" />  
19.             <item android:drawable="@drawable/login_loading_12" />  
20.         </layer-list>  
21.     </item>  
22.     <item android:duration="100">  
23.         <layer-list>  
24.             <item android:drawable="@drawable/login_loading_03" />  
25.             <item android:drawable="@drawable/login_loading_13" />  
26.         </layer-list>  
27.     </item>  
28.     <item android:duration="100">  
29.         <layer-list>  
30.             <item android:drawable="@drawable/login_loading_04" />  
31.             <item android:drawable="@drawable/login_loading_14" />  
32.         </layer-list>  
33.     </item>  
34.     <item android:duration="100">  
35.         <layer-list>  
36.             <item android:drawable="@drawable/login_loading_05" />  
37.             <item android:drawable="@drawable/login_loading_15" />  
38.         </layer-list>  
39.     </item>  
40.     <item android:duration="100">  
41.         <layer-list>  
42.             <item android:drawable="@drawable/login_loading_06" />  
43.             <item android:drawable="@drawable/login_loading_16" />  
44.         </layer-list>  
45.     </item>  
46.     <item android:duration="100">  
47.         <layer-list>  
48.             <item android:drawable="@drawable/login_loading_07" />  
49.             <item android:drawable="@drawable/login_loading_17" />  
50.         </layer-list>  
51.     </item>  
52.     <item android:duration="100">  
53.         <layer-list>  
54.             <item android:drawable="@drawable/login_loading_08" />  
55.             <item android:drawable="@drawable/login_loading_18" />  
56.         </layer-list>  
57.     </item>  
58.     <item android:duration="100">  
59.         <layer-list>  
60.             <item android:drawable="@drawable/login_loading_09" />  
61.             <item android:drawable="@drawable/login_loading_19" />  
62.         </layer-list>  
63.     </item>  
64. </animation-list>  

以上xml文件与前面一个xml文件不大同，多了一个<layer-list/>标签，该标签用法很简单，<layer-list/>内包含的图片将层叠起来，在同一帧中一起显示。如下：

 +    =  

再看主界面的activity文件，如下：

DrawableAnimationDemo\src\com\example\drawableanimationdemo\MainActivity.java

[java]  view plain  copy

 

1. public class MainActivity extends Activity {  
2.       
3.     private AnimationDrawable loadingAnimation;  
4.   
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
9.         setContentView(R.layout.activity_main);  
10.         //将该逐帧xml文件设置为ImageView的背景  
11.         ImageView loadingImg = (ImageView) findViewById(R.id.loading);  
12.         loadingImg.setBackgroundResource(R.drawable.loading);  
13.         loadingAnimation = (AnimationDrawable) loadingImg.getBackground();  
14.     }  
15.   
16.     /** 
17.      * 触摸屏幕，结束动画 
18.      */  
19.     public boolean onTouchEvent(MotionEvent event) {  
20.         if (event.getAction() == MotionEvent.ACTION_DOWN) {  
21.             loadingAnimation.stop();  
22.             return true;  
23.         }  
24.         return super.onTouchEvent(event);  
25.     }  
26.   
27.     /** 
28.      * activity显示到屏幕则开启动画 
29.      */  
30.     @Override  
31.     public void onWindowFocusChanged(boolean hasFocus) {  
32.         // TODO Auto-generated method stub  
33.         super.onWindowFocusChanged(hasFocus);  
34.         if (hasFocus)  
35.             loadingAnimation.start();  
36.     }  
37.   
38. }  

效果图如下，其中图片素材取材于OSchina的开源项目。

以上代码实现的功能是：activity一启动，则动画开始，触摸屏幕时动画停止，代码比较容易理解，唯一需要注意的是，不能在onCreate()方法中调用AnimationDrawable的start()方法，因为此时AnimationDrawable还未真正加载到界面中。所以，如果想启动界面就自动运行动画，可以在OnWindowFocusChanged(boolean hasFocus)中启动动画。

View Animation   （补间动画）

View Animation也是我们平时很多书籍所说的Tweened Animation(有人翻译为补间动画)。View Animation分为4大类：AlphaAnimation,RotateAnimation,ScaleAnimation,TranslateAnimation，分别对应透明度，旋转，大小，位移四种变化。

View Animation的效果由四个因素决定：1）初始状态；2）结束状态；3）持续时间；4）Interpolator。所以要定义一个View Animation，你只要定义以上四个因素，中间的过程怎么变化则有系统自动计算出来。其中前3个因素很容易理解，第四个因素Interpolator比较特别，这个单词不知道怎么翻译比较适合，很多书籍的翻译都很奇怪。Interpolator是决定动画进行过程的速度变化。比如：你将一个按钮从屏幕左侧运动到屏幕右侧。可以让它一直加速前进，或者先减速然后减速，这就是Interpolator发挥的作用，具体使用方法下面会说，先从简单的说起。

像Drawable Animation一样，定义一个View Animation可以用代码的方式，也可以用XML文件的方式。我们先来写一个最简单的例子，对一个helloworld字符串进行移动，旋转，放大，变暗，分别用代码实现和XML文件实现。先用代码实现。

首先新建工程：ViewAnimationDemo，并新建一个布局文件：animationjavacode.xml，如下：

ViewAnimationDemo\res\layout\animationjavacode.xml

[html]  view plain  copy

 

1. <RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"  
6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
7.     android:paddingRight="@dimen/activity_horizontal_margin"  
8.     android:paddingTop="@dimen/activity_vertical_margin"  
9.     tools:context=".MainActivity" >  
10.   
11.     <TextView  
12.         android:id="@+id/translation"  
13.         android:layout_width="wrap_content"  
14.         android:layout_height="wrap_content"  
15.         android:layout_marginBottom="50dp"  
16.         android:text="我要移动" />  
17.   
18.     <TextView  
19.         android:id="@+id/rotate"  
20.         android:layout_width="wrap_content"  
21.         android:layout_height="wrap_content"  
22.         android:layout_below="@id/translation"  
23.         android:layout_marginBottom="50dp"  
24.         android:text="我要旋转" />  
25.   
26.     <TextView  
27.         android:id="@+id/scale"  
28.         android:layout_width="wrap_content"  
29.         android:layout_height="wrap_content"  
30.         android:layout_below="@id/rotate"  
31.         android:layout_marginBottom="50dp"  
32.         android:text="我要变大" />  
33.   
34.     <TextView  
35.         android:id="@+id/alpha"  
36.         android:layout_width="wrap_content"  
37.         android:layout_height="wrap_content"  
38.         android:layout_below="@id/scale"  
39.         android:layout_marginBottom="200dp"  
40.         android:text="我要变暗" />  
41.   
42.     <Button  
43.         android:id="@+id/fire"  
44.         android:layout_width="match_parent"  
45.         android:layout_height="50dp"  
46.         android:layout_below="@id/alpha"  
47.         android:text="运动" />  
48.   
49. </RelativeLayout>  

该XML布局文件对应的Activity如下：

ViewAnimationDemo/src/com/CSDN/viewanimationdemo/AnimCodeActivity.Java

[java]  view plain  copy

 

1. public class AnimCodeActivity extends Activity {  
2.   
3.     private TextView translation;  
4.     private TextView rotate;  
5.     private TextView scale;  
6.     private TextView alpha;  
7.       
8.     private Button button;  
9.       
10.     @Override  
11.     protected void onCreate(Bundle savedInstanceState) {  
12.         super.onCreate(savedInstanceState);  
13.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
14.         setContentView(R.layout.animationjavacode);  
15.           
16.         translation = (TextView) findViewById(R.id.translation);  
17.         rotate = (TextView) findViewById(R.id.rotate);  
18.         scale = (TextView) findViewById(R.id.scale);  
19.         alpha = (TextView) findViewById(R.id.alpha);  
20.         button = (Button) findViewById(R.id.fire);  
21.           
22.         button.setOnClickListener(new OnClickListener() {  
23.               
24.             @Override  
25.             public void onClick(View v) {  
26.                 // TODO Auto-generated method stub  
27.                 // 1&2: 确定起始状态，结束状态  
28.                 TranslateAnimation tAnim = new TranslateAnimation(0, 400, 0, 0);//横向位移400个单位  
29.                 RotateAnimation rAnima = new RotateAnimation(0, 70);//顺时针旋转70度  
30.                 ScaleAnimation sAnima = new ScaleAnimation(0, 5, 0, 5);//横向放大5倍，纵向放大5倍  
31.                 AlphaAnimation aAnima = new AlphaAnimation(1.0f, 0.0f);//从全不透明变为全透明  
32.                 // 3: 确定持续时间  
33.                 tAnim.setDuration(2000);  
34.                 rAnima.setDuration(2000);  
35.                 sAnima.setDuration(2000);  
36.                 aAnima.setDuration(2000);  
37.   
38.                 // 4: 确定Interpolator  
39.                 tAnim.setInterpolator(new AccelerateDecelerateInterpolator());  
40.                   
41.                 // 启动动画  
42.                 translation.startAnimation(tAnim);  
43.                 rotate.startAnimation(rAnima);  
44.                 scale.startAnimation(sAnima);  
45.                 alpha.startAnimation(aAnima);     
46.             }  
47.         });  
48.           
49.     }  
50.   
51. }  

从代码中不难看到，首先确定了动画的起始状态和结束状态，然后通过setDuration(2000)设置持续时间，如果这里不设置持续时间，将默认为30mx，基本肉眼看不到。最后我们设置了一个Interpolator，此处设置效果是动画先减速进行，然后减速。默认状态时匀速进行。没错，Interpolator的基本用法就是这么容易。以上代码效果图如下：

接下来讲解怎么用xml定义动画，按照android官网的介绍，定义View Animation的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="@[package:]anim/interpolator_resource"  
4.     android:shareInterpolator=["true" | "false"] >  
5.     <alpha  
6.         android:fromAlpha="float"  
7.         android:toAlpha="float" />  
8.     <scale  
9.         android:fromXScale="float"  
10.         android:toXScale="float"  
11.         android:fromYScale="float"  
12.         android:toYScale="float"  
13.         android:pivotX="float"  
14.         android:pivotY="float" />  
15.     <translate  
16.         android:fromXDelta="float"  
17.         android:toXDelta="float"  
18.         android:fromYDelta="float"  
19.         android:toYDelta="float" />  
20.     <rotate  
21.         android:fromDegrees="float"  
22.         android:toDegrees="float"  
23.         android:pivotX="float"  
24.         android:pivotY="float" />  
25.     <set>  
26.         ...  
27.     </set>  
28. </set>  

该文件只能有一个根结点，可以是<set>,<alpha>,<scale>,<translate>,<rotate>,而其中，<set>结点可以包含子节点，即可以包含<set>,<alpha>,<scale>,<translate>,<rotate>,以此类推。

以上需要讲解的两个标签属性是android:interpolator和android:shareInterpolator，前者代表你所使用的interpolator，可以是系统自带，也可以是自定义。而后者代表，是否将该Interpolator共享给子节点。其它子标签的属性很容易理解，基本看属性名字就能懂，除了其中两个，android:pivotX和android:pivotY,我们知道，pivot的意思是轴心的意思，所以这两个属性定义的是此次动画变化的轴心位置，默认是左上角，当我们把它们两者都赋值为50%，则变化轴心在中心。

接下来写一个具体的例子，如下，还是在刚才的项目中进行。一般我们把定义动画的xml文件放在res/anim目录下，首先我们新建一个anim文件夹，然后新建一个xml文件，如下：

ViewAnimationDemo/res/anim/myanim.xml

[html]  view plain  copy

 

1. <set xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:shareInterpolator="false">  
3.     <scale  
4.         android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
5.         android:fromXScale="1.0"  
6.         android:toXScale="1.4"  
7.         android:fromYScale="1.0"  
8.         android:toYScale="0.6"  
9.         android:pivotX="50%"  
10.         android:pivotY="50%"  
11.         android:fillAfter="false"  
12.         android:duration="1000" />  
13.     <set  
14.         android:interpolator="@android:anim/accelerate_interpolator"  
15.         android:startOffset="1000">  
16.         <scale  
17.             android:fromXScale="1.4"  
18.             android:toXScale="0.0"  
19.             android:fromYScale="0.6"  
20.             android:toYScale="0.0"  
21.             android:pivotX="50%"  
22.             android:pivotY="50%"  
23.             android:duration="400" />  
24.         <rotate  
25.             android:fromDegrees="0"  
26.             android:toDegrees="60"  
27.             android:toYScale="0.0"  
28.             android:pivotX="50%"  
29.             android:pivotY="50%"  
30.             android:duration="400" />  
31.     </set>  
32. </set>  

上述例子的效果图如下：

上面代码中，有 唯一一个根节点<set>，它有两个子节点<scale>和<set>，然后其中的子节点<set>拥有两个自己的子节点<scale>和<rotate>。讲解一下上面一些没见过的标签属性。

andoird:fillAfter：前面一个例子中，我们的动画结束后helloworld又回到了原来状态，通过设置fillAfter为true，则动画将保持结束的状态，但是，如前一篇博客《Android动画之一：Drawable Animation》所说，View Animation的动画效果是绘制出来的，并非该组件真正移动了，这个问题我们后续会继续探讨。现在只需要知道将fillAfter设置为true之后，动画将保持结束状态，这大多应用于设计连续发生的动画。

startOffset：该属性定义动画推迟多久开始，通过这个属性的设置，我们可以设计一些前后按序发生的动画，当然，除了最后一个发生的动画，其他动画得设置fillAfter为true.

interpolator：这里我们使用了系统自带的interpolator

接下来我们定义一个布局文件，该布局文件只有一张图片，一个按钮，通过点击按钮触发图片进行动画，该布局文件比较简单，这里不列出。如何在该布局文件对应的activity代码中启动动画呢，代码如下：

ViewAnimationDemo/src/com/CSDN/viewanimationdemo/AnimaXmlActivity.java

[java]  view plain  copy

 

1. public class AnimaXmlActivity extends Activity {  
2.   
3.     private Button btn;  
4.     private ImageView img;  
5.     @Override  
6.     protected void onCreate(Bundle savedInstanceState) {  
7.         super.onCreate(savedInstanceState);  
8.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
9.         setContentView(R.layout.activity_anima_xml);  
10.         btn = (Button)findViewById(R.id.xml_btn);  
11.         img = (ImageView)findViewById(R.id.xmlAnimImg);  
12.           
13.         btn.setOnClickListener(new OnClickListener() {  
14.               
15.             @Override  
16.             public void onClick(View v) {  
17.                 // TODO Auto-generated method stub  
18.                 Animation anim = AnimationUtils.loadAnimation(AnimaXmlActivity.this, R.anim.myanim);  
19.                 img.startAnimation(anim);  
20.             }  
21.         });  
22.     }  
23. }  

以上代码很容易理解，我们一般使用AnimationUtils读取定义在xml文件中的动画。

Property Animation   （属性动画）

太多了  不复制了。

http://blog.csdn.net/lmj623565791/article/details/38067475