Android使用SVG实现今日头条下拉刷新动画

于 2016-07-26 21:54:08 发布
阅读量3.9k 收藏 2
点赞数
分类专栏： android技术总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012950099/article/details/52040028
版权

1 SVG的全称是Scalable Vector Graphics，叫可缩放矢量图形。它和位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图片质量下降。

2 Android L开始提供了新的API VectorDrawable 可以使用SVG（矢量图）类型的资源，在xml文件中的标签是vector。但想要好好的感受下SVG的使用，除了需要5.0之后的系统支持外，还需要使用AndroidStudio进行开发，因为AS已经支持通过右键创建SVG相关的文件（亲儿子的待遇，就像Nexus系列手机）。当然，eclipse也可以进行开发，只是没有智能提示和自动补全，一些属性需要记住手动敲进去。

3 这篇文章使用SVG实现今日头条的下拉刷新动画，体会一把SVG的用法（网上资料不多，毕竟国内对于系统更新的支持还是比较缓慢的）

效果

效果图

效果分析

1 方形顺时针在四个角中移动
2 线条根据方形的移动而变化（包括位置变化和长度变化两种）

实现分析

1 首先，使用vector标签创建初始形态的svg图形

svg图片

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:viewportHeight="200"
    android:viewportWidth="200"
    android:width="200dp" >

    <path
        android:name="path1"
        android:pathData="
        M20,30 
        L100,30 
        M100,30 
        L100,90 
        M100,90 
        L20,90 
        M20,90 
        L20,30"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path2"
        android:pathData="
        M120,30 
        L180,30 "
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path3"
        android:pathData="
        M120,60 
        L180,60"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path4"
        android:pathData="
        M120,90 
        L180,90"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path5"
        android:pathData="
        M20,120 
        L180,120"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path6"
        android:pathData="
        M20,150 
        L180,150"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />
    <path
        android:name="path7"
        android:pathData="
        M20,180 
        L180,180"
        android:strokeColor="@android:color/darker_gray"
        android:strokeWidth="1" />

</vector>

需要为每个path设置name属性，这是为了让系统找到要实现动画的元素

包含了两组宽高属性：
1 width和height：表示svg图形的具体大小
2 viewportWidth和viewportHeight：表示svg划分的比例
两者的关系：将100dp划分为100份，如果在绘制图形时使用坐标（20，20），则意味着该坐标位于该svg图形的（20，20）位置

svg指令（包括但不限于）
1 M：将画笔移动到某一个点上
2 L：代表从当前点绘制直线到指定点
3 A：用于绘制一段弧线，且允许弧线不闭合（可制定参数实现）
4 H：绘制水平线
5 V：绘制垂直线

2 通过animated-vector标签制定动画作用的path

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

    <target
        android:name="path1"
        android:animation="@animator/animator_path_one" />
    <target
        android:name="path2"
        android:animation="@animator/animator_path_two" />
    <target
        android:name="path3"
        android:animation="@animator/animator_path_three" />
    <target
        android:name="path4"
        android:animation="@animator/animator_path_four" />
    <target
        android:name="path5"
        android:animation="@animator/animator_path_five" />
    <target
        android:name="path6"
        android:animation="@animator/animator_path_six" />
    <target
        android:name="path7"
        android:animation="@animator/animator_path_sevent" />

</animated-vector>

每个target里边的name属性与之前在vector中定义的name属性必须保持一致

3 动画实现（其中一个为例）

<?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>

1 定义了一个动画集合，里边包含了四个属性动画，而且为顺序执行（android:ordering=”sequentially”）
2 通过android:propertyName=”pathData”设置动画控制的属性为路径
3 android:valueFrom指定了动画的起始，android:valueTo指定了动画的结束
4 这里，还需要添加一个android:valueType=”pathType”来告诉系统是进行pathData变换

4 使用

经过上边的步骤，一个svg动画就实现了。

// 将该drawable设置给ImageView
<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/animated_svg" />
// 启动动画（类似于AnimationDrawable的使用 ）
Animatable animatable = (Animatable) imageView.getDrawable();
animatable.start();

总结

经过上边的步骤，就使用svg实现了今日头条下拉刷新的动画。当然，这里只是用到了svg其中的一些知识；需要更多的了解svg，还是需要多些例子，多学习。

爱吃水蜜桃的奥特曼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值