Android属性动画(三):SVG+XML+drawable相结合

最新推荐文章于 2025-04-27 21:17:01 发布

原创最新推荐文章于 2025-04-27 21:17:01 发布 · 571 阅读

1 ·

CC 4.0 BY-SA版权

Android群英传学习笔记专栏收录该内容

7 篇文章

订阅专栏

有几天没更新啦，最近一级忙qaq

一、关系：

经常听到这个，这个网站可以在线制作SVG：http://editor.method.ac/

VectorDrawable和AnimatedVectorDrawable 用来支持SVG：

VectorDrawable：创建基于XML的SVG图形；

AnimatedVectorDrawable 实现动画效果；

二、 SVG:

最小单位：path

组合：group

声明标签：vector

例如：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <group
        android:name="test"
        android:rotation="0">
        <path
            android:fillColor="#8cd98c"
            android:pathData="M 25 50 a 25,25 0 1,0 50, 0"/>
        <!--
        M 指令： 移动到（25,50） A指令 绘制圆弧并填充
        -->
    </group>
</vector>

注意：

1、height、width表示该SVG图形的具体大小，而viewportHeight、viewportWidth表示SVG图形划分的比例；

2、fillColor中不能引用资源文件：@Color/colorname 否则会报错；

直接写#xxxxxx

3、pathData就是绘制SVG图形所用到的指令，这里是移动画笔到（25,50）后填充圆弧；

三、AnimatedVectorDrawable

胶水一样的粘住静态的VectorDrawable和动态的obejctAnimator：

使用方式：

标签：<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/svg_vector"
    tools:targetApi="lollipop">
    <target
        android:animation="@animator/animator"
        android:name="test"/>
</animated-vector>

注意：这里的name名称必须与vectorDrawable中的name属性一致，这样系统才能找到要实现动画的元素。

@animator/animator:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360"/>

在<group>标签和<path>标签中添加了rotation、fillColor、pathData等属性，那么在objectAnimator中，就可以通过指定android:propertyName="XXXX"属性来选择控制哪一种属性，通过android:valueFrom="XXX"和android:valueTo="XXX"属性，可以控制动画的起始值。唯一需要注意的是，如果指定属性为pathData，那么需要添加一个属性——android:valueType="pathType"来告诉系统进行pathData变换。类似的情况，可以使用rotation进行旋转动画，使用fillColor实现颜色动画，使用pathData进行形状、位置变化。

最后定义在src中即可：

<ImageView
    android:layout_width="300dp"
    android:id="@+id/image"
    android:layout_gravity="center"
    android:src="@drawable/anim_vector_drawable"
    android:layout_height="300dp"/>

java代码：

((Animatable) imageView.getDrawable()).start();

效果异常好看呢

明天研究研究SVG的path画法做出更好看的效果~晚安