Android自定义下拉刷新动画--仿百度外卖下拉刷新
Android自定义下拉刷新动画--仿百度外卖下拉刷新
好久没写博客了，小编之前一段时间一直在找工作，从天津来到了我们的大帝都，感觉还不错。好了废话不多说了，开始我们今天的主题吧。现如今的APP各式各样，同样也带来了各种需求，一个下拉刷新都能玩出花样了，前两天订饭的时候不经意间看到了“百度外卖”的下拉刷新，今天的主题就是它--自定义下拉刷新动画。 看一下实现效果吧：
动画
我们先来看看Android中的动画吧： Android中的动画分为三种：
- Tween动画，这一类的动画提供了旋转、平移、缩放等效果。
- Alpha — 淡入淡出
- Scale — 缩放效果
- Roate — 旋转效果
- Translate — 平移效果
- Frame动画（帧动画），这一类动画可以创建一个Drawable序列，按照指定时间间歇一个一个显示出来。
- Property动画（属性动画），Android3.0之后引入出来的属性动画，它更改的是对象的实际属性。
分析
我们可以看到百度外卖的下拉刷新的头是一个骑车的快递员在路上疾行，分析一下我们得到下面的动画：
- 背景图片的平移动画
- 太阳的自旋转动画
- 两个小轮子的自旋转动画
这就很简单了，接下来我们去百度外面的图片资源文件里找到这几张图片：（下载百度外卖的apk直接解压即可）
定义下拉刷新头文件：headview.xml
这里注意一下：我们定义了两张背景图片的ImageView是为了可以实现背景的平移动画效果。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/iv_back1"
android:src="@drawable/pull_back"
android:layout_width="match_parent"
android:layout_height="100dp" />
<ImageView
android:id="@+id/iv_back2"
android:src="@drawable/pull_back"
android:layout_width="match_parent"
android:layout_height="100dp" />
<RelativeLayout
android:id="@+id/main"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_marginTop="45dp"
android:id="@+id/iv_rider"
android:background="@drawable/pull_rider"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView
android:id="@+id/wheel1"
android:layout_marginLeft="10dp"
android:layout_marginTop="90dp"
android:background="@drawable/pull_wheel"
android:layout_width="15dp"
android:layout_height="15dp" />
<ImageView
android:id="@+id/wheel2"
android:layout_marginLeft="40dp"
android:layout_marginTop="90dp"
android:background="@drawable/pull_wheel"
android:layout_width="15dp"
android:layout_height="15dp" />
</RelativeLayout>
<ImageView
android:id="@+id/ivsun"
android:layout_marginTop="20dp"
android:layout_toRightOf="@+id/main"
android:background="@drawable/pull_sun"
android:layout_width="30dp"
android:layout_height="30dp" />
</RelativeLayout>接下来我们定义动画效果：
背景图片的平移效果： 实现两个animation xml文件，一个起始位置在100%，结束位置在0%，设置repeat属性为循环往复。
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="100%p" android:toXDelta="0%p"
android:repeatMode="restart"
android:interpolator="@android:anim/linear_interpolator"
android:repeatCount="infinite"
android:duration="5000" />
</set>另一个起始位置在0%，结束位置在-100%
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">
<translate android:fromXDelta="0%p" android:toXDelta="-100%p"
android:repeatMode="restart"
android:interpolator="@android:anim/linear_interpolator"
android:repeatCount="infinite"
android:duration="5000" />
</set>太阳围绕中心旋转动画： 从0-360度开始循环旋转，旋转所用时间为1s，旋转中心距离view的左定点上边缘为50%的距离，也就是正中心。
下面是具体属性：
android:fromDegrees 起始的角度度数 android:toDegrees 结束的角度度数，负数表示逆时针，正数表示顺时针。如10圈则比android:fromDegrees大3600即可 android:pivotX 旋转中心的X坐标 浮点数或是百分比。浮点数表示相对于Object的左边缘，如5; 百分比表示相对于Object的左边缘，如5%; 另一种百分比表示相对于父容器的左边缘，如5%p; 一般设置为50%表示在Object中心 android:pivotY 旋转中心的Y坐标 浮点数或是百分比。浮点数表示相对于Object的上边缘，如5; 百分比表示相对于Object的上边缘，如5%; 另一种百分比表示相对于父容器的上边缘，如5%p; 一般设置为50%表示在Object中心 android:duration 表示从android:fromDegrees转动到android:toDegrees所花费的时间，单位为毫秒。可以用来计算速度。 android:interpolator表示变化率，但不是运行速度。一个插补属性，可以将动画效果设置为加速，减速，反复，反弹等。默认为开始和结束慢中间快， android:startOffset 在调用start函数之后等待开始运行的时间，单位为毫秒，若为10，表示10ms后开始运行 android:repeatCount 重复的次数，默认为0，必须是int，可以为-1表示不停止 android:repeatMode 重复的模式，默认为restart，即重头开始重新运行，可以为reverse即从结束开始向前重新运行。在android:repeatCount大于0或为infinite时生效 android:detachWallpaper 表示是否在壁纸上运行 android:zAdjustment 表示被animated的内容在运行时在z轴上的位置，默认为normal。 normal保持内容当前的z轴顺序 top运行时在最顶层显示 bottom运行时在最底层显示
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:duration="1000"
android:repeatCount="-1"
android:pivotX="50%"
android:pivotY="50%" />
</set>同理轮子的动画也一样，不占代码了。
动画定义完了我们开始定义下拉刷新列表，下拉刷新网上有很多，不详细的说了，简单的改造一下，根据刷新状态开启关闭动画即可。 注释写的很详细，看一下代码吧：
由于微信对文字字数有限制，对代码显示支持的不太好，欢迎大家点击图片放大观看，或者去原作者的博客里学习，也可以下载源码观看。感谢大家的支持。
好了，自定义下拉刷新动画我们就实现了，其实很简单，所有的下拉刷新动画都类似这样实现的。源码我已经上传到Github上了： https://github.com/Hankkin/BaiduGoingRefreshLayout 求star啊。有不合理的地方还希望大家多多指正，共同进步哈。