欢迎来到天天文库
浏览记录
ID:14430199
大小:305.50 KB
页数:15页
时间:2018-07-28
《ultra-pull-to-refresh 自定义下拉刷新视差动画》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、Ultra-Pull-To-Refresh自定义下拉刷新视差动画效果刷新自定义动画的分析首先是Ultra-Pull-To-Refresh的特点,此库提供了一个Layout类:PtrFramLayout作为Wrapper来包涵ContentView,今天用到两个方法:第一个PtrFramLayout#setHeaderView(View)用来设置头部显示的刷新View,第二个PtrFramLayout#addPtrUIHandler(PtrHandler)用来设置监听用户下拉状态、下拉offset、刷新完成状态等。
2、其次是动画的,根据效果图,第一点是下拉的时候人物从左侧走过来到中间,到中间后手指再继续往下拉,此时人物也不走了,第二点是当手指松开时或者处于下拉状态时,人物不停的走动,并且背景产生一个相对位移,给人的视觉上造成一个视觉差,也就是我们想要的视差动画了,这就是整个视差动画的实现步骤。那么几个动画拆分开来就是,人物向右中间移动、人物原地踏步、背景无限向左移动。头View和刷新Layout的实现我把实现步骤分开讲解,方便读者理解:实现自定义的头View。继承PtrFramLayout实现一个ParallaxPtrFram
3、eLayout,设置自定头和PtrHandler监听下拉动作。实现人物向左走的动画。松开手时背景不停的向右移动,人物在原地迈步,形成一个视差上的向右走的动画。自定义头部View头View的底下是这样一个图:那么一个图是如何做到不停的向左移动还是无限重复的呢?用HTML做很简单,但是Android中并没有repeat这样的属性,于是我们想到:在屏幕上放一个ImageView向左移动100%,在这张图的右侧再放一个ImageView,以同样的速度向左移动100%,结果就是当屏幕上的图移动到左边外屏幕的时候,屏幕右边的
4、图刚好移动到屏幕上完全显示,然后我们的动画又有重复播放的属性,结合起来就产生了一个背景无限长的动画效果。对于人物原地踏步就很简单了,直接用一个ImageView不停的切换图形成一个人物在走动的视觉效果。所以我们用两个ImageView作为背景图来相间向左移动,用一个ImageView不停的切换图模拟人物走动,来达到一个人物走动的视差效果,我打算用FrameLayout来作为头View的Layout,所以布局用merge包裹了一下:refresh_parallax.xml
5、ding="utf-8"?>6、e/refresh_down_background"/>7、+id/iv_refresh_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:contentDescription="@string/app_name"android:scaleType="center"/>然后定义头View加载刚才写好的布局,因为PtrFrameLayout是通过PtrHandler接口来监听下拉状8、态和刷新状态,然后以状态为依据来刷新头View的动画,所以头View直接实现PtrHandler接口,然后操作自身的状态和动画也就更加方便了,所以头View初步的代码是:ParallaxHeaderpublicclassParallaxHeaderextendsFrameLayoutimplementsPtrUIHandler{ImageViewmIvBack1;Imag
6、e/refresh_down_background"/>7、+id/iv_refresh_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:contentDescription="@string/app_name"android:scaleType="center"/>然后定义头View加载刚才写好的布局,因为PtrFrameLayout是通过PtrHandler接口来监听下拉状8、态和刷新状态,然后以状态为依据来刷新头View的动画,所以头View直接实现PtrHandler接口,然后操作自身的状态和动画也就更加方便了,所以头View初步的代码是:ParallaxHeaderpublicclassParallaxHeaderextendsFrameLayoutimplementsPtrUIHandler{ImageViewmIvBack1;Imag
7、+id/iv_refresh_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom"android:contentDescription="@string/app_name"android:scaleType="center"/>然后定义头View加载刚才写好的布局,因为PtrFrameLayout是通过PtrHandler接口来监听下拉状
8、态和刷新状态,然后以状态为依据来刷新头View的动画,所以头View直接实现PtrHandler接口,然后操作自身的状态和动画也就更加方便了,所以头View初步的代码是:ParallaxHeaderpublicclassParallaxHeaderextendsFrameLayoutimplementsPtrUIHandler{ImageViewmIvBack1;Imag
此文档下载收益归作者所有