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

<?<span id="13_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="13_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=xml&k0=xml&kdi0=0&luki=4&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="13" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">xml</span></a></span> version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/<span id="14_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="14_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=res&k0=res&kdi0=0&luki=3&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="14" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">res</span></a></span>/android"
    android:duration="800"
    android:<span id="15_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="15_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=from&k0=from&kdi0=0&luki=1&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="15" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">from</span></a></span>XDelta="-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

<?<span id="10_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="10_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=xml&k0=xml&kdi0=0&luki=4&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="10" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">xml</span></a></span> version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/<span id="11_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="11_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=res&k0=res&kdi0=0&luki=3&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="11" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">res</span></a></span>/android"
    android:duration="800"
    android:<span id="12_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="12_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=from&k0=from&kdi0=0&luki=1&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="12" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">from</span></a></span>YDelta="-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) {
				<span id="3_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="3_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=add&k0=add&kdi0=0&luki=2&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="3" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">add</span></a></span>NorthFragment();
			}
		});
		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) {
				<span id="4_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="4_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=add&k0=add&kdi0=0&luki=2&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="4" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">add</span></a></span>WestFragment();
			}
		});

		popBtn.setOnClickListener(new OnClickListener() {

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

	}

	private void addNorthFragment() {
		addFragment(R.anim.fragment_slide_in_<span id="5_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="5_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=from&k0=from&kdi0=0&luki=1&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="5" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">from</span></a></span>_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 <span id="6_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="6_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=add&k0=add&kdi0=0&luki=2&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="6" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">add</span></a></span>SouthFragment() {
		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_<span id="7_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="7_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=from&k0=from&kdi0=0&luki=1&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="7" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">from</span></a></span>_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 <span id="8_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="8_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=add&k0=add&kdi0=0&luki=2&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="8" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">add</span></a></span>WestFragment() {
		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.<span id="9_nwp" style="width: auto; height: auto; float: none;"><a target=_blank id="9_nwl" href="http://cpro.baidu.com/cpro/ui/uijs.php?c=news&cf=1001&ch=0&di=128&fv=16&jk=68517fdc172f9976&k=add&k0=add&kdi0=0&luki=2&n=10&p=baidu&q=72008038_cpr&rb=0&rs=1&seller_id=1&sid=76992f17dc7f5168&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1893960&u=http%3A%2F%2Fwww%2Echengxuyuans%2Ecom%2FAndroid%2F83463%2Ehtml&urlid=0" target="_blank" mpid="9" style="text-decoration: none; color: rgb(26, 100, 162);"><span style="color: rgb(0, 0, 255); width: auto; height: auto;">add</span></a></span>(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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值