一直有留意到今日头条下拉刷新的效果, 真的很赞,在学习了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>
效果图:
第二步, 既然是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"
- />
- 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!