android:Fragment动画那点事

最近很多人对Fragment的动画很感兴趣，我就做个例子给大家看看。既然要做，我就做下面几类动画：

弹入弹出动画：从“上下左右”进入，从“上下左右”弹出，当然，你怎么组合都可以。另外你也可以加一些透明度的变化，这就看你的发挥了。。。

1.先写动画的xml文件

做开发的都知道，在/res/anim/目录下，新建xml的动画文件，比如：

fragment_slide_in_from_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="800"
    android:fromYDelta="100.0%p"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:toYDelta="0.0" />

fragment_slide_in_from_left.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="800"
    android:fromXDelta="-100.0%p"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:toXDelta="0.0" />

fragment_slide_in_from_right.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="800"
    android:fromXDelta="100.0%p"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:toXDelta="0.0" />

fragment_slide_in_from_top.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="800"
    android:fromYDelta="-100.0%p"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:toYDelta="0.0" />

上面的是进入动画，至于弹出动画，只需要将from和to的值翻转一下即可。你们都懂得，不懂得，直接去github上clone，地址在下面。

2.添加Fragment的时候，使用setCustomAnimations方法。

直接贴代码，简单明了。

package com.example.testfragment;

import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
/**
 * 
 * @author Zheng Haibo
 * @web  http://www.mobctrl.net
 *
 */
public class MainActivity extends ActionBarActivity {

	private FragmentManager fragmentManager;

	private Button northBtn;
	private Button southBtn;
	private Button eastBtn;
	private Button westBtn;
	private Button popBtn;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		fragmentManager = getSupportFragmentManager();
		initButton();
	}

	private void initButton() {
		northBtn = (Button) findViewById(R.id.btn_north);
		southBtn = (Button) findViewById(R.id.btn_south);
		eastBtn = (Button) findViewById(R.id.btn_east);
		westBtn = (Button) findViewById(R.id.btn_west);
		popBtn = (Button) findViewById(R.id.btn_pop);
		northBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addNorthFragment();
			}
		});
		southBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addSouthFragment();
			}
		});
		eastBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addEastFragment();
			}
		});
		westBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				addWestFragment();
			}
		});

		popBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
				fragmentManager.popBackStack();
			}
		});

	}

	private void addNorthFragment() {
		addFragment(R.anim.fragment_slide_in_from_top,
				R.anim.fragment_slide_out_to_top,
				R.anim.fragment_slide_in_from_top,
				R.anim.fragment_slide_out_to_top, 0xa0ff0000);
	}

	private void addSouthFragment() {
		addFragment(R.anim.fragment_slide_in_from_bottom,
				R.anim.fragment_slide_out_to_bottom,
				R.anim.fragment_slide_in_from_bottom,
				R.anim.fragment_slide_out_to_bottom, 0xa000ff00);
	}

	private void addEastFragment() {
		addFragment(R.anim.fragment_slide_in_from_left,
				R.anim.fragment_slide_out_to_left,
				R.anim.fragment_slide_in_from_left,
				R.anim.fragment_slide_out_to_left, 0xa00000ff);
	}

	private void addWestFragment() {
		addFragment(R.anim.fragment_slide_in_from_right,
				R.anim.fragment_slide_out_to_right,
				R.anim.fragment_slide_in_from_right,
				R.anim.fragment_slide_out_to_right, 0xa0ff00ff);
	}

	/**
	 * add the fragment
	 * 
	 * @param arg0
	 * @param arg1
	 * @param arg2
	 * @param arg3
	 * @param color
	 */
	private void addFragment(int arg0, int arg1, int arg2, int arg3, int color) {
		FragmentTransaction ft = fragmentManager.beginTransaction();
		ft.setCustomAnimations(arg0, arg1, arg2, arg3);
		MyFragment fragment = new MyFragment();
		Bundle bundle = new Bundle();
		bundle.putInt("color", color);
		fragment.setArguments(bundle);
		ft.add(R.id.rl_container, fragment);
		ft.addToBackStack(null);
		ft.commitAllowingStateLoss();
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

很炫的GIF效果，我就不贴了，你下载试试就知道了。。

Github： https://github.com/nuptboyzhb/FragmentAnimationDemo

后续问题：

animation的执行是异步的。如果你想对animation的执行进行监听，你可以重写fragment里面的如下方法

/**
	 * if you need add animation listener for the fragment
	 * please use this method
	 */
	@Override
	public Animation onCreateAnimation(int transit, boolean enter, int nextAnim) {
		Animation anim;
		if (enter) {
			anim = AnimationUtils.loadAnimation(getActivity(),
					android.R.anim.fade_in);
		} else {
			anim = AnimationUtils.loadAnimation(getActivity(),
					android.R.anim.fade_out);
		}

		anim.setAnimationListener(new AnimationListener() {
			public void onAnimationEnd(Animation animation) {
				
			}

			public void onAnimationRepeat(Animation animation) {
				
			}

			public void onAnimationStart(Animation animation) {
				
			}
		});

		return anim;
	}

然后在回调里，做你想做的事

-------------------------------------------------------------------

更多交流，Android开发联盟QQ群：272209595