Android动画之二：View Animation

如上一篇博客《Android动画之一：Drawable Animation》所说，android动画主要分为三大部分，上一篇博客已经讲解Drawable Animation的用法，即逐帧地显示图片，经常运用于动态显示一个进度动画，这是出现频率最高的应用场景。接下来，我们这篇文章将循序渐进，介绍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/优快云/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/优快云/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文件中的动画。

到此为止，关于View Animation的基础知识基本已经覆盖了，接下来写一个具体实践的例子，实现经常见到的侧滑功能，如网易新闻这种：

这个侧滑的效果实现并不难，很多人运用了AsyncTask线程，但是结果你会发现有时会发生明显的卡顿，但是如果使用动画效果将会平滑很多。我们接下来实现这样的功能：

首先新建一个项目：SwipeWithAnim。并新建一个布局文件activity_main.xml，如下

SwipeWithAnim/res/layout/activity_main.xml

[html]  view plain copy

1. <FrameLayout 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.     tools:context=".MainActivity" >  
6.   
7.     <View  
8.         android:id="@+id/content"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:background="#e23451" />  
12.   
13.     <LinearLayout  
14.         android:id="@+id/menu"  
15.         android:layout_width="400dp"  
16.         android:layout_height="match_parent"  
17.         android:layout_gravity="left"  
18.         android:layout_marginLeft="-380dp"  
19.         android:orientation="horizontal" >  
20.   
21.         <View  
22.             android:layout_width="0dp"  
23.             android:layout_height="match_parent"  
24.             android:layout_weight="1"  
25.             android:background="#eeeee1" />  
26.   
27.         <View  
28.             android:id="@+id/dragArea"  
29.             android:layout_width="20dp"  
30.             android:layout_height="match_parent"  
31.             android:background="#00000000" />  
32.     </LinearLayout>  
33.   
34. </FrameLayout>  

屏幕显示内容content，左侧隐去菜单menu，知识将20dp的透明部分放在屏幕左侧，用于触发onTouch事件。该xml文件对应的activity代码如下：

SwipeWithAnim/src/com/优快云/swipewithanim/MainActivity.java

[java]  view plain copy

1. public class MainActivity extends Activity {  
2.   
3.     private View menu;  
4.     private final static int SHOW_MENU = 1;  
5.     private final static int HIDE_MENU = -1;  
6.     private int swipe_tag = SHOW_MENU;  
7.     private int max_menu_margin = 0;  
8.     private int min_menu_margin;  
9.     private float beginX;  
10.     private float latestX;  
11.     private float diffX;  
12.     private float latestMargin;  
13.   
14.     private FrameLayout.LayoutParams lp;  
15.   
16.     /* 
17.      * (non-Javadoc) 
18.      *  
19.      * @see android.app.Activity#onCreate(android.os.Bundle) 
20.      */  
21.     @Override  
22.     protected void onCreate(Bundle savedInstanceState) {  
23.         super.onCreate(savedInstanceState);  
24.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
25.         setContentView(R.layout.activity_main);  
26.   
27.         menu = findViewById(R.id.menu);  
28.         lp = (FrameLayout.LayoutParams) menu.getLayoutParams();  
29.         min_menu_margin = lp.leftMargin;  
30.   
31.         menu.setOnTouchListener(new OnTouchListener() {  
32.   
33.             @Override  
34.             public boolean onTouch(View v, MotionEvent event) {  
35.                 // TODO Auto-generated method stub  
36.                 int action = MotionEventCompat.getActionMasked(event);  
37.                 switch (action) {  
38.                 case MotionEvent.ACTION_DOWN:  
39.                     beginX = event.getX();  
40.                     break;  
41.                 case MotionEvent.ACTION_MOVE:  
42.                     latestX = event.getX();  
43.                     diffX = latestX - beginX;  
44.                     swipe_tag = diffX > 0 ? SHOW_MENU : HIDE_MENU;  
45.                     latestMargin = lp.leftMargin + diffX;  
46.   
47.                     if (latestMargin > min_menu_margin  
48.                             && latestMargin < max_menu_margin) {  
49.                         lp.leftMargin = (int) (latestMargin);  
50.                         menu.setLayoutParams(lp);  
51.                     }  
52.   
53.                     break;  
54.                 case MotionEvent.ACTION_UP:  
55.                     TranslateAnimation tAnim;  
56.                     if (swipe_tag == SHOW_MENU) {  
57.                         tAnim = new TranslateAnimation(0, max_menu_margin  
58.                                 - latestMargin, 0, 0);  
59.                         tAnim.setInterpolator(new DecelerateInterpolator());  
60.                         tAnim.setDuration(800);  
61.                         menu.startAnimation(tAnim);  
62.                     } else {  
63.                         tAnim = new TranslateAnimation(0, min_menu_margin  
64.                                 - latestMargin, 0, 0);  
65.                         tAnim.setDuration(800);  
66.                         menu.startAnimation(tAnim);  
67.                     }  
68.                     //在动画结束的时刻，移动menu的位置，使menu真正移动。  
69.                     tAnim.setAnimationListener(new AnimationListener() {  
70.   
71.                         @Override  
72.                         public void onAnimationStart(Animation animation) {  
73.                             // TODO Auto-generated method stub  
74.   
75.                         }  
76.   
77.                         @Override  
78.                         public void onAnimationRepeat(Animation animation) {  
79.                             // TODO Auto-generated method stub  
80.   
81.                         }  
82.   
83.                         @Override  
84.                         public void onAnimationEnd(Animation animation) {  
85.                             // TODO Auto-generated method stub  
86.                             if (swipe_tag == SHOW_MENU) {  
87.                                 lp.leftMargin = max_menu_margin;  
88.                                 menu.setLayoutParams(lp);  
89.                             } else {  
90.                                 lp.leftMargin = min_menu_margin;  
91.                                 menu.setLayoutParams(lp);  
92.                             }  
93.                             menu.clearAnimation();  
94.                         }  
95.                     });  
96.   
97.                     break;  
98.                 }  
99.                 return true;  
100.             }  
101.         });  
102.   
103.     }  
104.   
105. }  

如上代码，监听menu的onTouch事件，然后根据移动距离移动menu，当手指拿起来时，启动动画，使移动继续进行到结束。我们上面提到，View Animation只是绘制出来的效果，发生动画的组件并非真正移动了，那么此处为了解决这个问题，我们监听了AnimationListener，在动画结束时，将menu的位置移动到动画结束的位置，这样就成功移动了menu。效果图如下，由于截图软件关系，看起来会卡顿，在真机上测试则完全平滑。

最后附上这篇博客前后的两份源码：

ViewAnimationDemo

SwipeWithAnim

转自：http://blog.youkuaiyun.com/chziroy/article/details/40456399