最近很多人对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
-------------------------------------------------------------------