一般的刷新动画是一个圈圈在转，而头条的比较特殊，直接上写好的效果图(一直不知道怎么把图片尺寸调小o(╯□╰)o)吧~
刷新动画_.gif
首先整个效果是通过SVG和vector来实现的，如果不是很了解，请看大佬的文章：
SVG学习--AnimatedVectorDrawable的使用
动画思路：
整个view可以分为五个部分：
1、最外面的壳(不需要动画)
2、中间矩形框
3、矩形框中的灰色矩形块
4、三根短线
5、三根长线
第一步：在drawable文件夹下新建名为refresh的vector文件：
android:width="200dp"
android:height="200dp"
android:viewportHeight="200"
android:viewportWidth="200">
android:name="out_rect"
android:pathData="M70,60
L130,60
Q140,60 140,70
L140,130
Q140,140 130,140
L70,140
Q60,140 60,130
L60,70
Q60,60 70,60"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
android:name="middle_rect"
android:pathData="M71,75
L100,75
L100,95
L72,95
L72,75"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
android:name="inner_rect"
android:fillColor="@color/colorCustomHeaderInner"
android:pathData="M73,76
L99,76
L99,94
L73,94" />
android:name="short_lines"
android:pathData="M108,75
L128,75
M108,85
L128,85
M108,95
L128,95"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
android:name="long_lines"
android:pathData="
M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:strokeColor="@color/colorCustomHeaderLine"
android:strokeWidth="2" />
打开xml右边的预览，我们可以看到效果
效果图.png
第二步：在drawable文件夹下新建名为refresh_vector的animated-vector
android:drawable="@drawable/refresh">
android:name="middle_rect"
android:animation="@animator/anim_middle_rect" />
android:name="short_lines"
android:animation="@animator/anim_short_lines" />
android:name="long_lines"
android:animation="@animator/anim_long_lines" />
android:name="inner_rect"
android:animation="@animator/anim_inner_rect" />
这里需要注意几点：
1、android:drawable="@drawable/refresh"这里一定要引用上面的refresh文件
2、target标签下的name一定要和refresh中的path标签下的名字一致
第三步：新建animator文件夹(不是anim)，并在下面新建短线、长线、中间矩形框和里面矩形对应的objectAnimator集合：
anim_middle_rect.xml:
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M71,75
L100,75
L100,95
L72,95
L72,75"
android:valueTo="M99,75
L128,75
L128,95
L100,95
L100,75"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M99,75
L128,75
L128,95
L100,95
L100,75"
android:valueTo="M99,105
L128,105
L128,125
L100,125
L100,105"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M99,105
L128,105
L128,125
L100,125
L100,105"
android:valueTo="M71,105
L100,105
L100,125
L72,125
L72,105"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M71,105
L100,105
L100,125
L72,125
L72,105"
android:valueTo="M71,75
L100,75
L100,95
L72,95
L72,75"
android:valueType="pathType" />
anim_short_lines.xml:
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M108,75
L128,75
M108,85
L128,85
M108,95
L128,95"
android:valueTo="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueTo="M72,105
L92,105
M72,115
L92,115
M72,125
L92,125"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,105
L92,105
M72,115
L92,115
M72,125
L92,125"
android:valueTo="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueTo="M108,75
L128,75
M108,85
L128,85
M108,95
L128,95"
android:valueType="pathType" />
anim_long_lines.xml:
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueTo="M72,75
L92,75
M72,85
L92,85
M72,95
L92,95"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,75
L92,75
M72,85
L92,85
M72,95
L92,95"
android:valueTo="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M72,75
L128,75
M72,85
L128,85
M72,95
L128,95"
android:valueTo="M108,105
L128,105
M108,115
L128,115
M108,125
L128,125"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M108,105
L128,105
M108,115
L128,115
M108,125
L128,125"
android:valueTo="M72,105
L128,105
M72,115
L128,115
M72,125
L128,125"
android:valueType="pathType" />
anim_inner_rect.xml
android:ordering="sequentially">
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M73,76
L99,76
L99,94
L73,94"
android:valueTo="M101,76
L127,76
L127,94
L101,94"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M101,76
L127,76
L127,94
L101,94"
android:valueTo="M101,106
L127,106
L127,124
L101,124"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M101,106
L127,106
L127,124
L101,124"
android:valueTo="M73,106
L99,106
L99,124
L73,124"
android:valueType="pathType" />
android:duration="500"
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName="pathData"
android:valueFrom="M73,106
L99,106
L99,124
L73,124"
android:valueTo="M73,76
L99,76
L99,94
L73,94"
android:valueType="pathType" />
最后一步，在activity中：
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
final AnimatedVectorDrawable animatedVectorDrawable = (AnimatedVectorDrawable) ContextCompat.getDrawable(this, R.drawable.refresh_vector);
findViewById(R.id.imageView).setImageDrawable(animatedVectorDrawable);
animatedVectorDrawable.start();
//循环动画貌似只能这样。。。
final Handler mainHandler = new Handler(Looper.getMainLooper());
animatedVectorDrawable.registerAnimationCallback(new Animatable2.AnimationCallback() {
@Override
public void onAnimationEnd(Drawable drawable) {
mainHandler.post(new Runnable() {
@Override
public void run() {
animatedVectorDrawable.start();
}
});
}
});
