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

来源：互联网发布：阿里云域名过户流程编辑：程序博客网时间：2024/06/06 03:40

一直有留意到今日头条下拉刷新的效果, 真的很赞,在学习了svg drawable相关资料后, 参考博客http://blog.csdn.net/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!

阅读全文

1 0