Fragment过度动画分析一
Sliding Fragment
介绍:该案例为传统的Fragment增加了个性化的补间动画,其效果是原有fragment向屏幕内做一定的下沉,新的fragment显示在最上层,产生层叠效果的多个fragments。
Video: http://www.youtube.com/watch?v=xbl5cxfA1n4
Source:http://developer.android.com/shareables/devbytes/SlidingFragments.zip
本文将简单分析其实现流程及原理
Step1:添加Fragment并设置点击的切换事件
首先添加一个fragment,并设置显示内容已做区别,案例中显示了一张图片,接着设置单击事件,为了使得我们单击任意位置都能触发fragment的切换动画,这
里需要为用于展示图片的fragment,显示文本的fragment以及黑色背景view都添加该事件监听器。
Step2:fragment切换实现
这里只有2个fragment,一个是用于显示图片,另一个显示文本,预期效果是单击屏幕后,图片下沉,文本显示到顶层,再次单击后则恢复原状,即,文本消失>,图片上浮。
分析这些动画的顺序和效果,图片的下沉可以通过一个组合animation来做,1.缩放,例如缩小为原图80%,2.旋转,这里的下层效果是首先图片x轴旋转40度,>然后再将旋转角度设置为0,3.添加一个半透明的遮罩,以示图片当前出于幕后状态,
文本的出现则在图片的动作完成后,通过manager动态讲其添加到画面上,这里的文本不是全屏的,否则就看不到后面的图片背景,文本的出现也可以添加动画>,这里文本出现时由下至上,消失时由上至下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | private void switchFragments () { if (mIsAnimating) { return ; } mIsAnimating = true ; if (mDidSlideOut) { mDidSlideOut = false ; getFragmentManager().popBackStack(); } else { mDidSlideOut = true ; AnimatorListener listener = new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator arg0) { FragmentTransaction transaction = getFragmentManager().beginTransaction(); transaction.setCustomAnimations(R.animator.slide_fragment_in, 0 , 0 , R.animator.slide_fragment_out); transaction.add(R.id.move_to_back_container, mTextFragment); transaction.addToBackStack( null ); transaction.commit(); } }; slideBack (listener); } } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?