Android仿今日头条刷新vector动画-技术圈

一般的刷新动画是一个圈圈在转，而头条的比较特殊，直接上写好的效果图:

动画思路：

整个view可以分为五个部分：

    1、最外面的壳（不需要动画）
    2、中间矩形框
    3、矩形框中的灰色矩形块
    4、三根短线
    5、三根长线

第一步：在drawable文件夹下新建名为refresh的vector文件：

<vector xmlns:android="http://schemas.android.com/apk/res/android"    android:width="200dp"    android:height="200dp"    android:viewportWidth="200"    android:viewportHeight="200">    <!--外面大框-->    <path        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:strokeWidth="2"        android:strokeColor="#e5e5e5" />    <!--小长方形框-->    <path        android:name="middle_rect"        android:pathData="M71,75                          L100,75                          L100,95                          L72,95                          L72,75"        android:strokeWidth="2"        android:strokeColor="#e5e5e5" />    <!--里面的正方形-->    <path        android:name="inner_rect"        android:fillColor="#e5e5e5"        android:pathData="M73,76                          L99,76                          L99,94                          L73,94" />    <!--短线条-->    <path        android:name="short_lines"        android:pathData="M108,75                          L128,75                          M108,85                          L128,85                          M108,95                          L128,95"        android:strokeWidth="2"        android:strokeColor="#e5e5e5" />    <!--长线条-->    <path        android:name="long_lines"        android:pathData="                          M72,105                          L128,105                          M72,115                          L128,115                          M72,125                          L128,125"        android:strokeWidth="2"        android:strokeColor="#e5e5e5" /></vector>

打开xml右边的预览，我们可以看到效果:

第二步：在drawable文件夹下新建名为refresh_vector的animated-vector

<?xml version="1.0" encoding="utf-8"?><animated-vector xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:drawable="@drawable/refresh"    tools:ignore="NewApi">    <target        android:name="middle_rect"        android:animation="@animator/anim_middle_rect" />
    <target        android:name="short_lines"        android:animation="@animator/anim_short_lines" />
    <target        android:name="long_lines"        android:animation="@animator/anim_long_lines" />
    <target        android:name="inner_rect"        android:animation="@animator/anim_inner_rect" />
</animated-vector>

这里需要注意几点：

1、这里一定要引用上面的refresh文件

android:drawable="@drawable/refresh"

2、target标签下的name一定要和refresh中的path标签下的名字一致

第三步：新建animator文件夹（不是anim），并在下面新建短线、长线、中间矩形框和里面矩形对应的objectAnimator集合：

anim_middle_rect.xml:

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:ordering="sequentially">    <!--中间长方形-->    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" />        </set>

anim_short_lines.xml:

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:ordering="sequentially">    <!--起点为短线-->    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" /></set>

anim_long_lines.xml:

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:ordering="sequentially">    <!--开始为长线-->    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" /></set>

anim_inner_rect.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android"    android:ordering="sequentially">    <!--里面的长方形-->    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" />    <objectAnimator        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" />
</set>

布局文件：

 <ImageView        android:id="@+id/imageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"/>

最后一步，在activity中：

final AnimatedVectorDrawable animatedVectorDrawable = (AnimatedVectorDrawable) ContextCompat.getDrawable(this, R.drawable.refresh_vector);        ImageView imageView = findViewById(R.id.imageView);        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();                    }                });            }        });

需要源码的童鞋公众号回复："头条刷新"即可获取哦！

到这里就结束啦！

点击这里留言交流哦