android仿今日头条下拉刷新中的vector动画

关注

原创最新推荐文章于 2026-04-01 15:30:11 发布 6k 阅读 AI 写同款· GEO 优化 ›

Android-高级-UI-进阶之路-(七)-SVG-基础使用-+-绘制中国地图(1) 找到一套好的视频资料，紧跟大牛梳理好的知识框架进行学习。多练。（视频优势是互动感强，容易集中注意力）你不需要是天才，也不需要具备强悍的天赋，只要做到这两点，短期内成功的概率是非常高的。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。阅读详情

一直有留意到今日头条下拉刷新的效果, 真的很赞,在学习了svg drawable相关资料后, 参考博客http://blog.youkuaiyun.com/u012950099/article/details/52040028完成了今日头条下拉刷新中的动画, 首先看下效果图:

录制效果有点渣,少了上边和下边两条线, 请大家见谅.....ps: gif中还有仿ios菊花loading效果, 仿qq下拉刷新效果,侧滑删除等自定义view, 这都不是重点, 重点是标题!

这篇文章我只写效果的实现过程和代码, 具体什么叫svg 什么事vector, 请移步我之前写的文章, android vector pathData探究,几分钟绘制自己的vectordrawable.这篇文章有详细介绍,废话不多说, 上代码看看如何实现.

首先分析下动画效果, 图形是分为4个部分, 参与动画的为3个部分,分别为矩形框, 3条短线,3条长线.

首先创建vector图形文件:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="200"
    android:viewportWidth="200">

    <path
        android:name="path1"
        android:fillColor="@color/black_overlay"
        android:pathData="
            M20,30
            L100,30
            M100,30
            L100,90
            M100,90
            L20,90
            M20,90
            L20,30"
        android:strokeColor="@color/black_overlay"
        android:strokeLineCap="round"
        android:strokeWidth="6" />
    <path
        android:name="path2"
        android:pathData="
            M120,30
            L180,30
            M120,60
            L180,60
            M120,90
            L180,90"
        android:strokeColor="@color/black_overlay"
        android:strokeLineCap="round"
        android:strokeWidth="6" />
    <path
        android:name="path3"
        android:pathData="
            M20,120
            L180,120
            M20,150
            L180,150
            M20,180
            L180,180"
        android:strokeColor="@color/black_overlay"
        android:strokeLineCap="round"
        android:strokeWidth="6" />

    <path
        android:pathData="
            M0,0
            L200,0
            M200,0
            L200,200
            M200,200
            L0,200
            M0,200
            L0,0"
        android:strokeColor="@color/black_overlay"
        android:strokeLineCap="round"
        android:strokeWidth="6" />
</vector>

具体里边的viewportheight, pathdata等等属性是什么意思还是请移步我之前写的: android vector pathData探究,几分钟绘制自己的vectordrawable.

效果图:

第二步, 既然是svg动画, 那么需要创建相应的list或者容器之类的来保存动画的执行顺序或步骤, 创建animated-vector相应xml文件:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/jrtt">

    <target
        android:animation="@animator/jrtt_path_one"
        android:name="path1"/>

    <target
        android:animation="@animator/jrtt_path_two"
        android:name="path2"/>

    <target
        android:animation="@animator/jrtt_path_three"
        android:name="path3"/>

</animated-vector>

第三步: 在res--animator--文件夹下分别创建对应的jrtt_path_one,jrtt_path_two,jrtt_path-three,这三个ObjectAnimator对应的svg xml文件,

jrtt_path_one:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,30
            L100,30
            M100,30
            L100,90
            M100,90
            L20,90
            M20,90
            L20,30"
        android:valueTo="
            M100,30
            L180,30
            M180,30
            L180,90
            M180,90
            L100,90
            M100,90
            L100,30"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M100,30
            L180,30
            M180,30
            L180,90
            M180,90
            L100,90
            M100,90
            L100,30"
        android:valueTo="
            M100,120
            L180,120
            M180,120
            L180,180
            M180,180
            L100,180
            M100,180
            L100,120"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M100,120
            L180,120
            M180,120
            L180,180
            M180,180
            L100,180
            M100,180
            L100,120"
        android:valueTo="
            M20,120
            L100,120
            M100,120
            L100,180
            M100,180
            L20,180
            M20,180
            L20,120"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,120
            L100,120
            M100,120
            L100,180
            M100,180
            L20,180
            M20,180
            L20,120"
        android:valueTo="
            M20,30
            L100,30
            M100,30
            L100,90
            M100,90
            L20,90
            M20,90
            L20,30"
        android:valueType="pathType" />
</set>

jrtt_path_tow:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M120,30
            L180,30
            M120,60
            L180,60
            M120,90
            L180,90"
        android:valueTo="
            M20,120
            L180,120
            M20,150
            L180,150
            M20,180
            L180,180"
        android:valueType="pathType"/>
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,120
            L180,120
            M20,150
            L180,150
            M20,180
            L180,180"
        android:valueTo="
            M20,120
            L80,120
            M20,150
            L80,150
            M20,180
            L80,180"
        android:valueType="pathType"/>
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,120
            L80,120
            M20,150
            L80,150
            M20,180
            L80,180"
        android:valueTo="
             M20,30
            L180,30
            M20,60
            L180,60
            M20,90
            L180,90"
        android:valueType="pathType"/>
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,30
            L180,30
            M20,60
            L180,60
            M20,90
            L180,90"
        android:valueTo="
            M120,30
            L180,30
            M120,60
            L180,60
            M120,90
            L180,90"
        android:valueType="pathType"/>
</set>

jrtt_path_three:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">

    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,120
            L180,120
            M20,150
            L180,150
            M20,180
            L180,180"
        android:valueTo="
            M20,30
            L80,30
            M20,60
            L80,60
            M20,90
            L80,90"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,30
            L80,30
            M20,60
            L80,60
            M20,90
            L80,90"
        android:valueTo="
            M20,30
            L180,30
            M20,60
            L180,60
            M20,90
            L180,90"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M20,30
            L180,30
            M20,60
            L180,60
            M20,90
            L180,90"
        android:valueTo="
            M120,120
            L180,120
            M120,150
            L180,150
            M120,180
            L180,180"
        android:valueType="pathType" />
    <objectAnimator
        android:duration="400"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:propertyName="pathData"
        android:valueFrom="
            M120,120
            L180,120
            M120,150
            L180,150
            M120,180
            L180,180"
        android:valueTo="
           M20,120
            L180,120
            M20,150
            L180,150
            M20,180
            L180,180"
        android:valueType="pathType" />
</set>

然后再相应布局文件中:

<ImageView
        android:id="@+id/iv_test_view_vector_jrtt"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_margin="20dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/jrtt_vector"
        />

在activity中:

 ImageView iv_vector = (ImageView) findViewById(R.id.iv_test_view_vector_jrtt);
        AnimatedVectorDrawable drawable = (AnimatedVectorDrawable) iv_vector.getDrawable();
        drawable.start();

好了, 运行起来就能看到文章开头图中效果了.

具体实现,请参考我的GitHub项目, https://github.com/MrDeclanCoder/KotlinMVPRxJava2Dagger2GreenDaoRetrofitDemo, 欢迎start!

收录于