Android動畫之二：View Animation

以上需要講解的兩個標簽屬性是android:interpolator和android:shareInterpolator，前者代表你所使用的interpolator，可以是系統自帶，也可以是自定義。而後者代表，是否將該Interpolator共享給子節點。其它子標簽的屬性很容易理解，基本看屬性名字就能懂，除了其中兩個，android:pivotX和android:pivotY,我們知道，pivot的意思是軸心的意思，所以這兩個屬性定義的是此次動畫變化的軸心位置，默認是左上角，當我們把它們兩者都賦值為50%，則變化軸心在中心。

接下來寫一個具體的例子，如下，還是在剛才的項目中進行。一般我們把定義動畫的xml文件放在res/anim目錄下，首先我們新建一個anim文件夾，然後新建一個xml文件，如下：

ViewAnimationDemo/res/anim/myanim.xml

上述例子的效果圖如下：

上面代碼中，有 唯一一個根節點，它有兩個子節點和，然後其中的子節點擁有兩個自己的子節點和。講解一下上面一些沒見過的標簽屬性。

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

public class AnimaXmlActivity extends Activity {

	private Button btn;
	private ImageView img;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_anima_xml);
		btn = (Button)findViewById(R.id.xml_btn);
		img = (ImageView)findViewById(R.id.xmlAnimImg);
		
		btn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Animation anim = AnimationUtils.loadAnimation(AnimaXmlActivity.this, R.anim.myanim);
				img.startAnimation(anim);
			}
		});
	}
}

到此為止，關於View Animation的基礎知識基本已經覆蓋了，接下來寫一個具體實踐的例子，實現經常見到的側滑功能，如網易新聞這種：

這個側滑的效果實現並不難，很多人運用了AsyncTask線程，但是結果你會發現有時會發生明顯的卡頓，但是如果使用動畫效果將會平滑很多。我們接下來實現這樣的功能：

首先新建一個項目：SwipeWithAnim。並新建一個布局文件activity_main.xml，如下

SwipeWithAnim/res/layout/activity_main.xml

<framelayout android:layout_height="match_parent" android:layout_width="match_parent" tools:context=".MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    

    

        

        
    

</framelayout>

SwipeWithAnim/src/com/CSDN/swipewithanim/MainActivity.java

public class MainActivity extends Activity {

	private View menu;
	private final static int SHOW_MENU = 1;
	private final static int HIDE_MENU = -1;
	private int swipe_tag = SHOW_MENU;
	private int max_menu_margin = 0;
	private int min_menu_margin;
	private float beginX;
	private float latestX;
	private float diffX;
	private float latestMargin;

	private FrameLayout.LayoutParams lp;

	/*
	 * (non-Javadoc)
	 * 
	 * @see android.app.Activity#onCreate(android.os.Bundle)
	 */
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		menu = findViewById(R.id.menu);
		lp = (FrameLayout.LayoutParams) menu.getLayoutParams();
		min_menu_margin = lp.leftMargin;

		menu.setOnTouchListener(new OnTouchListener() {

			@Override
			public boolean onTouch(View v, MotionEvent event) {
				// TODO Auto-generated method stub
				int action = MotionEventCompat.getActionMasked(event);
				switch (action) {
				case MotionEvent.ACTION_DOWN:
					beginX = event.getX();
					break;
				case MotionEvent.ACTION_MOVE:
					latestX = event.getX();
					diffX = latestX - beginX;
					swipe_tag = diffX > 0 ? SHOW_MENU : HIDE_MENU;
					latestMargin = lp.leftMargin + diffX;

					if (latestMargin > min_menu_margin
							&& latestMargin < max_menu_margin) {
						lp.leftMargin = (int) (latestMargin);
						menu.setLayoutParams(lp);
					}

					break;
				case MotionEvent.ACTION_UP:
					TranslateAnimation tAnim;
					if (swipe_tag == SHOW_MENU) {
						tAnim = new TranslateAnimation(0, max_menu_margin
								- latestMargin, 0, 0);
						tAnim.setInterpolator(new DecelerateInterpolator());
						tAnim.setDuration(800);
						menu.startAnimation(tAnim);
					} else {
						tAnim = new TranslateAnimation(0, min_menu_margin
								- latestMargin, 0, 0);
						tAnim.setDuration(800);
						menu.startAnimation(tAnim);
					}
					//在動畫結束的時刻，移動menu的位置，使menu真正移動。
					tAnim.setAnimationListener(new AnimationListener() {

						@Override
						public void onAnimationStart(Animation animation) {
							// TODO Auto-generated method stub

						}

						@Override
						public void onAnimationRepeat(Animation animation) {
							// TODO Auto-generated method stub

						}

						@Override
						public void onAnimationEnd(Animation animation) {
							// TODO Auto-generated method stub
							if (swipe_tag == SHOW_MENU) {
								lp.leftMargin = max_menu_margin;
								menu.setLayoutParams(lp);
							} else {
								lp.leftMargin = min_menu_margin;
								menu.setLayoutParams(lp);
							}
							menu.clearAnimation();
						}
					});

					break;
				}
				return true;
			}
		});

	}

}

最後附上這篇博客前後的兩份源碼：

ViewAnimationDemo

SwipeWithAnim