Android资源res之矢量图完全指南（加SVG-path命令

2018-12-08 本文已影响4人 e4e52c116681

零、前言

第一次接触SVG时，被它的强大折服，下面两个小例子可以看看
SVG 文字sin型曲线动画、SVG绘制星空效果
Android5.0+也支持矢量图VectorDrawable，是变异削弱版的SVG,但已经非常强大了
本来不想写SVG的path的，但是发现需要用到，还是总结一下吧

留图镇楼

手撕路径动画：

path变形	变形+旋转

常规动画

一、SVG的Path

1.SVG中的Path(有点反人类,可忽略)

命令 含义
M/m (x,y)+ 移动当前位置
L/l (x,y)+ 从当前位置绘制线段到指定位置
H/h (x)+ 从当前位置绘制,水平线到达指定的 x 坐标
V/v (x)+ 从当前位置绘制竖直线到达指定的 y 坐标
Z/z 闭合当前路径
C/c (x1,y1,x2,y2,x,y)+ 从当前位置绘制三次贝塞尔曲线到指定位置
S/s (x2,y2,x,y)+ 从当前位置光滑绘制三次贝塞尔曲线到指定位置
Q/q (x1,y1,x,y)+ 从当前位置绘制,二次贝塞尔曲线到指定位置
T/t (x,y)+ 从当前位置光滑绘制,二次贝塞尔曲线到指定位置
A/a (rx,ry,xr,laf,sf,x,y)  从当前位置绘制弧线到指定位置

2.一开始觉得挺好玩,但是看到...

<path d="M886.786268 386.409745l-17.009967-2.551495a267.623477 267.623477 0 0 1-229.634551-229.351052l-2.267996-17.009967h-17.293466a290.586932 290.586932 0 0 0-226.799557 85.049834l-5.38649 5.669989-12.473975 149.687708 41.107419-41.10742a193.913621 193.913621 0 0 1 135.229236-56.699889 243.242525 243.242525 0 0 0 12.473976 40.82392 22.112957 22.112957 0 0 0-9.071982 5.10299L18.710963 859.853821C-13.324474 891.889258 3.968992 954.542636 11.339978 981.475083a23.813953 23.813953 0 0 1 0 3.401993 21.545958 21.545958 0 0 0 6.236988 15.308971l5.10299 5.10299 6.520487 6.236987h2.551495a22.112957 22.112957 0 0 0 5.953488 0h3.685493a264.221484 264.221484 0 0 0 66.905869 11.339978 75.127353 75.127353 0 0 0 54.715394-18.710963l537.51495-534.963455a22.112957 22.112957 0 0 0 5.10299-9.071983 219.712071 219.712071 0 0 0 40.82392 12.473976 194.48062 194.48062 0 0 1-56.699889 135.512735l-40.82392 41.10742 149.404208-12.757475 5.669989-5.38649a290.019934 290.019934 0 0 0 85.049834-226.799557zM134.378738 975.238095c-6.803987 6.803987-26.081949 11.623477-80.230344-3.685493-15.025471-54.148394-10.20598-73.426357-3.685493-79.946843l532.128461-535.530454a293.138427 293.138427 0 0 0 23.813954 32.885935 9.922481 9.922481 0 0 0-3.685493 2.267996l-60.101883 60.101882a21.262458 21.262458 0 0 0 0 30.334441 21.829457 21.829457 0 0 0 15.025471 6.236988 22.396456 22.396456 0 0 0 15.025471-5.953488l60.101882-60.385382a8.221484 8.221484 0 0 0 2.267996-3.685493 235.58804 235.58804 0 0 0 32.885935 23.813953zM779.339978 595.348837l-28.349945 1.984496A234.170543 234.170543 0 0 0 788.128461 453.599114v-17.009967l-17.009967-2.267995A208.939092 208.939092 0 0 1 590.529347 255.149502l-2.551495-17.009967H552.82392A235.871539 235.871539 0 0 0 425.249169 271.875969l2.267996-26.932447a247.211517 247.211517 0 0 1 173.501661-67.189369 310.431894 310.431894 0 0 0 245.227021 245.51052A247.495017 247.495017 0 0 1 779.339978 595.348837z

立马觉得不好玩了，SVG的路径基本上都是用设计软件制作的
咱就乖乖做个伸手党吧，这事交给设计师：svg的资源网站：Iconfont-阿里巴巴矢量图标库

剑.png

3.SVG转为Android可用Xml

下载的svg在Android可不能直接用哦,你有3种选择：

3.1--AS自带的转换

AS自带转换.png

3.2--网上在线转换:网址

在线转换.png

3.3--批量转化：

前两者都是单文件的转化,如果很多文件就有一个一个来
so,我自己写了工具类,批量转化一下：详情可见：第三个工具
工具现在已经使用正则匹配了，更加精确,转换1000+,暂无失误情况

svg2xml.png

二、VectorDrawable的使用

vector一览：

vector.png

path标签一览：

path属性一览.png

1.修改颜色:两种方法

矢量剑.png

方法1：直接改：fillColor
方法2：使用时：android:tint="@color/red"

2.分组与变换(吾王之剑岂可不正)

用group将path包起来就可以对path进行变换了

group变换.png

   <group
        android:rotation="-45"
        android:scaleX="0.7"
        android:scaleY="0.7"
        android:translateY="450">
    <path
        ...
    <path
        ...
    </group>

3.线条与填充

线条与填充.png

关于path的知识和填充模式在Android关于Path你所知道的和不知道的一切,讲的很详细，这里就不费神了

三、矢量动画

动画基本套路如下--简单画一个示意图：

矢量动画--路径动画.png

1:路径动画：trimPathEnd

路径动画.gif

1.1--矢量图主体：icon_close.xml

记得为path取个名字(随意)：android:name="trim_path"

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="1024"
        android:viewportHeight="1024">
    <path
        android:strokeColor="@color/black"
        android:strokeWidth="10"
        android:name="trim_path"
android:pathData="M548.992 503.744L885.44 167.328a31.968 31.968 0 1 0-45.248-45.248L503.744 458.496 167.328 122.08a31.968 31.968 0 1 0-45.248 45.248l336.416 336.416L122.08 840.16a31.968 31.968 0 1 0 45.248 45.248l336.416-336.416L840.16 885.44a31.968 31.968 0 1 0 45.248-45.248L548.992 503.744z" /></vector>

1.2--objectAnimator动画：trim_path_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="trimPathEnd"
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:valueType="floatType"/>

1.3--动画承载体：anima_close.xml

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/icon_close">
<target
    android:animation="@animator/trim_path_animator"
    android:name="trim_path"/>
</animated-vector>

1.4--使用

 <ImageView
     android:id="@+id/id_iv"
     android:layout_width="200dp"
     android:layout_height="200dp"
     android:src="@drawable/anima_close"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent"/>

//点击时：
Drawable drawable = mIdIv.getDrawable();
if (drawable instanceof Animatable){
    ((Animatable) drawable).start();
}

2.常规动画

非要平移或缩放还是针对View吧，矢量图是有边界的，超出边界不显示

常规动画.gif

2.1:--颜色动画:color_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:ordering="sequentially">
    <objectAnimator
        android:duration="2000"
        android:propertyName="strokeColor"
        android:valueFrom="@color/black"
        android:valueTo="@color/red"/>
    <objectAnimator
        android:duration="2000"
        android:propertyName="strokeColor"
        android:valueFrom="@color/red"
        android:valueTo="@color/black"/>
</set>

2.2:--透明度动画:alpha_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:ordering="sequentially">
    <objectAnimator
        android:duration="1500"
        android:propertyName="strokeAlpha"
        android:valueFrom="1f"
        android:valueTo="0.5f"/>
    <objectAnimator
        android:duration="1500"
        android:propertyName="strokeAlpha"
        android:valueFrom="0.5f"
        android:valueTo="1f"/>
</set>

2.3：--旋转动画:rotation_animator_360.xml

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

    <objectAnimator
        android:duration="1500"
        android:propertyName="rotation"
        android:valueFrom="360"
        android:valueTo="0"/>
</set>

2.3：矢量图：icon_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="1024"
        android:viewportHeight="1024">
    <group android:name="container"
        android:pivotX="512"
        android:pivotY="512">
        <path
            android:name="setting_path"
            android:pathData="M514.216481 977.624786c-55.577806 0.002047-89.432869-13.881149-91.457991-14.734586-6.476505-2.729158-10.8143-8.92937-11.160177-15.94925-0.354064-7.203052-0.674359-14.411221-0.994654-21.620413-0.618077-13.917988-1.257643-28.307719-2.143826-42.354644-0.528026-8.348132-1.026376-8.606005-2.88163-9.564843-6.768147-3.497661-14.646582-6.115278-22.98755-8.885368-7.208169-2.39556-14.662955-4.871961-22.014386-8.124028-4.52199-2.001587-8.719592-4.269233-12.780071-6.462179-4.65809-2.51631-9.058306-4.89345-13.099343-6.385431-4.536316-1.684362-10.599406 3.223415-21.657252 14.137998-2.720971 2.686179-5.535063 5.464455-8.398274 7.985882l-28.677133 25.26236c-5.973038 5.26184-14.663978 6.053879-21.490453 1.958608-94.435813-56.662511-123.892705-127.005602-125.100206-129.972167-2.650363-6.509251-1.333368-13.96199 3.38612-19.168572l27.558659-30.40345c2.249227-2.480494 4.53734-4.933359 6.749728-7.306406 4.301979-4.612041 8.368598-8.971325 12.106736-13.455453 0.12996-0.706081 0.50142-4.331655-3.148713-12.644995-1.414209-3.219321-2.916423-6.41306-4.50664-9.792017-2.321882-4.931313-4.721535-10.032494-6.912433-15.399735-2.28095-5.586229-3.906983-11.44875-5.480828-17.116843-3.557012-12.81691-6.27389-21.336958-11.419074-22.917966-15.532765-4.774747-32.260751-5.204535-49.971112-5.658883-6.92369-0.178055-14.081717-0.36225-21.279652-0.818645-7.943926-0.503467-14.648628-6.088672-16.579607-13.81054-26.709315-106.838284 2.204202-177.410596 3.447519-180.362834 2.729158-6.477528 8.930393-10.816347 15.951297-11.160177l74.987878-3.679809c8.106632-25.620517 18.959817-50.2955 32.389688-73.637114l-51.368948-58.31822c-5.260817-5.973038-6.052856-14.663978-1.957585-21.48943 56.662511-94.430696 127.004579-123.891681 129.971144-125.099183 6.512321-2.650363 13.964036-1.333368 19.171642 3.387144l59.183937 53.647851c20.770046-10.567683 42.865273-19.247366 65.957201-25.908066l3.986801-81.220836c0.343831-7.019881 4.682649-13.220093 11.159154-15.94925 2.952238-1.24434 73.520457-30.162974 180.363857-3.448542 7.721869 1.930979 13.307074 8.635681 13.81054 16.578584l5.41636 85.444021c23.345708 7.106862 45.86663 16.432251 67.231217 27.840068l62.865793-56.979736c5.208629-4.720511 12.663414-6.03546 19.169595-3.387144 2.966565 1.207501 73.314773 30.664394 129.97319 125.100206 4.095271 6.825452 3.303232 15.516392-1.957585 21.48943l-57.280588 65.029062c11.642155 21.230534 21.185508 43.48642 28.489868 66.439178l84.800361 4.163833c7.019881 0.343831 13.221116 4.683672 15.950274 11.160177 1.24434 2.952238 30.156834 73.525574 3.443425 180.362834-1.929955 7.721869-8.634658 13.307074-16.578584 13.81054l-83.734076 5.308913c-6.765077 24.480554-15.841803 47.948035-27.093055 70.049403l54.525847 60.155055c4.719488 5.207605 6.036483 12.659321 3.388167 19.168572-0.437975 1.075495-4.553713 10.937097-14.205537 25.910113-5.470595 8.486278-16.782222 10.930957-25.270547 5.460362-8.486278-5.470595-10.930957-16.784268-5.460362-25.270547 2.444679-3.791349 4.445242-7.161097 6.039553-10.001795l-54.736649-60.387345c-5.262864-5.805216-6.240121-14.3181-2.431376-21.165042 14.670118-26.371624 25.797549-55.164391 33.073256-85.579097 1.867534-7.807826 8.611122-13.484106 16.623609-13.991666l83.375919-5.285377c13.876032-65.705468 4.495384-113.633037-1.193175-133.800355l-85.226057-4.184299c-7.863085-0.385786-14.594393-5.761214-16.711614-13.34289-7.990998-28.617781-19.810185-56.174394-35.133172-81.904405-4.061502-6.820336-3.258207-15.480576 1.988284-21.437242l56.915267-64.615647c-36.648688-56.272631-77.172637-83.529415-95.455025-93.767594l-63.320141 57.391105c-5.900384 5.349845-14.585183 6.262634-21.469987 2.25639-25.765827-14.990413-53.601802-26.530236-82.734306-34.297131-7.588839-2.0241-13.037944-8.66945-13.535271-16.507976l-5.371334-84.723613c-65.210187-13.727653-113.473401-4.379751-133.804449 1.26276l-4.022617 81.945337c-0.393973 8.037047-5.997598 14.870686-13.801331 16.833387-29.217439 7.345292-56.766888 18.160615-81.884962 32.145118-6.848988 3.812839-15.363919 2.835581-21.170159-2.428306l-59.389622-53.833069c-18.325367 10.365068-59.080583 37.884842-95.503121 93.724615l51.191916 58.118676c5.342682 6.064113 6.068206 14.916734 1.785669 21.770839-17.210987 27.544333-30.330796 57.32766-38.993083 88.524173-2.109034 7.593955-8.847505 12.981662-16.718777 13.368472l-75.366502 3.698229c-5.621021 20.255323-14.963807 68.428485-1.318018 133.528156 2.092661 0.061398 4.210905 0.115634 6.367011 0.170892 19.395746 0.49835 39.450501 1.014096 59.774385 7.262404 24.664749 7.579629 31.162744 30.992875 35.906791 48.087205 1.351787 4.870938 2.62785 9.470699 4.100388 13.075807 1.830695 4.483104 3.925403 8.93551 6.14393 13.650905 1.620917 3.443425 3.297093 7.005554 4.90266 10.661827 11.409864 25.983791 5.193279 41.804105-2.031263 50.500161-4.455475 5.365194-9.139148 10.385535-13.667278 15.241123-2.222621 2.382257-4.322445 4.63353-6.39771 6.922666l-19.11229 21.084201c10.365068 18.325367 37.882795 59.080583 93.724615 95.502098l18.455327-16.257266c2.084475-1.835811 4.412496-4.134157 6.877641-6.567579 12.292977-12.135388 32.868595-32.44597 60.013839-22.416546 6.469342 2.390443 12.233626 5.503341 17.807574 8.514931 3.594875 1.942235 6.991228 3.777023 10.197246 5.195326 5.746888 2.542916 12.060687 4.640694 18.744923 6.861268 9.309016 3.091408 18.934235 6.28924 28.244274 11.100826 20.75265 10.722202 21.946848 29.600155 22.588461 39.742143 0.907673 14.389732 1.555425 28.952402 2.180666 43.037189 0.132006 2.966565 0.264013 5.933129 0.398066 8.898671 20.298302 5.630231 68.558445 14.980179 133.775796 1.25355l4.866844-76.765361c0.497327-7.848759 5.957689-14.499226 13.558807-16.515139 32.683377-8.66638 63.733557-22.102391 92.28687-39.934524 6.854105-4.281513 15.703657-3.553942 21.767769 1.786693l59.114352 52.068889c1.155313-0.751107 2.299369-1.50733 3.432169-2.263553 5.502317-4.045129 38.557154-24.867364 98.619088-25.960255 0.112564-0.002047 0.227174-0.00307 0.339738-0.00307 9.942443 0 18.090007 7.966439 18.271132 17.948791 0.184195 10.094916-7.850805 18.427698-17.945721 18.611893-51.03842 0.928139-77.314877 18.622126-77.69043 18.908652-0.285502 0.216941-0.577145 0.424672-0.874927 0.624217-5.347798 3.583618-10.934027 7.126304-16.603143 10.528797-6.825452 4.100388-15.517415 3.307326-21.493523-1.954515l-59.31492-52.244898c-24.545022 14.104229-50.618864 25.367761-77.794807 33.606399l-4.910846 77.467349c-0.503467 7.944949-6.088672 14.648628-13.81054 16.579607C569.595766 974.71962 539.630291 977.623763 514.216481 977.624786zM517.457292 736.938052c-60.94914 0-118.250194-23.734564-161.347758-66.833151-43.097564-43.096541-66.832128-100.397594-66.832128-161.347758 0-60.948117 23.734564-118.247124 66.833151-161.343665 43.097564-43.096541 100.398618-66.831105 161.346735-66.831105s118.250194 23.734564 161.347758 66.831105 66.833151 100.396571 66.833151 161.343665c0 60.94914-23.734564 118.251218-66.833151 161.347758C635.707486 713.202465 578.406432 736.938052 517.457292 736.938052zM517.457292 317.145104c-105.657388 0-191.617156 85.956697-191.617156 191.613062 0 105.658412 85.958744 191.617156 191.617156 191.617156 105.658412 0 191.617156-85.958744 191.617156-191.617156C709.074448 403.101801 623.115704 317.145104 517.457292 317.145104z"
            android:strokeWidth="8"
            android:strokeColor="#000"/>
    </group>
</vector>

3.4:动画整合：anima_setting.xml

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/icon_setting">
    <target
        android:name="setting_path"
        android:animation="@animator/alpha_animator"/>
    <target
        android:name="container"
        android:animation="@animator/rotation_animator_360"/>
    <target
        android:animation="@animator/color_animator"
        android:name="setting_path"/>
    <target
        android:animation="@animator/trim_path_animator"
        android:name="setting_path"/>
</animated-vector>

使用同上，不赘述了

3.5:路径转换动画

左上角的箭头是不是很惊艳：,第一次看到还以为是代码的效果呢,原来矢量图也可以轻松实现

DrawerLayout与ToolBar结合

注意：对路径进行objectAnimator,前提，path操作符都要一一对应
好吧，看来想躲都躲不掉了，那就来看看svg的path吧

四、SVG的path全指南：

1.操作符：M/m,L/l,H/h,V/v

大写字母都是绝对坐标,小写字母是相对坐标(相对尾点)

mlhv.png

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="100"
        android:viewportHeight="100">
    <!--将指标轴平移-->
    <group
        android:translateX="4"
        android:translateY="4">
        <path
            android:strokeColor="@color/black"
            android:strokeWidth="4"
            android:pathData="M0,0 L20 20 0,30,60,60 H 0 V100"/>
    </group>
</vector>

2.操作符：CSQT/csqt

注：小写字母也是相对坐标，只演示大写字母,小写字母自己对应一下就行了
C/c是三次贝塞尔：曾经写过一篇详细分析：详见
S/s是简化版的三次贝塞尔，根据一点，自动顺滑，具体怎么顺滑，看个大概吧...
Q/q是二次贝塞尔，三次的都会了，二次的还远吗?
T/t简易版二次贝塞尔，需要至少两个才能发挥曲线作用

cs.png

qt.png

3.操作符:A/a

a.png

A(rx, ry, xr, laf, sf, x,y)----绘制弧线--最复杂的命令
rx - （radius-x）弧线所在椭圆的 x 半轴长
ry - （radius-y）弧线所在椭圆的 y 半轴长
xr - （xAxis-rotation）弧线所在椭圆的长轴角度
laf - （large-arc-flag）是否选择弧长较长的那一段弧
sf - （sweep-flag）是否选择逆时针方向的那一段弧
x, y- 弧的终点位置

SVG弧线

五、路径属性动画

好了，知识储备有了，开始画图了，画个箭头和三横还不小case

path.png

箭头：M8,50, l100,0 M0,47, l40,40 M0,52 l40 -40
菜单：M0,50, l80,0 M0,80, l80,0 M0,20 l80 0

path变形	变形+旋转

1.将两个path字符串放入string.xml

直接写也可以，但复用不方便

<resources>
    <string name="app_name">test</string>
    <string name="path_from">M8,50, l100,0 M0,47, l40,40 M0,52 l40 -40 </string>
    <string name="path_to">M0,50, l80,0 M0,80, l80,0 M0,20 l80 0</string>
</resources>

2.矢量图：path_test.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="100"
        android:viewportHeight="100">
    <group
        android:translateX="4"
        android:translateY="4">
        <path
            android:pathData="M0,0 A30,50,90,0,1,50,50"
            android:strokeWidth="4"
            android:strokeColor="@color/black"/>
    </group>
</vector>

3.旋转动画：rotation_animator.xml

<?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="180"/>

4.路径动画：path_animator.xml

<?xml version="1.0" encoding="utf-8"?>

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:interpolator="@android:interpolator/linear"
    android:propertyName="pathData"
    android:valueFrom="@string/path_from"
    android:valueTo="@string/path_to"
    android:valueType="pathType"/>

5.整合动画：anima_path.xml

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/icon_path">
    <target
        android:name="alpha_anim"
        android:animation="@animator/path_animator"/>
    <target
        android:name="container"
        android:animation="@animator/rotation_animator">
    </target>
</animated-vector>

ok,这样就行了，你可以随意定制两个路径，但必须保证两个路径的指令相同，不然会崩

后记：捷文规范

1.本文成长记录及勘误表

项目源码	日期	备注
V0.1--github	2018-12-8	Android资源res之矢量图完全指南（附赠SVG-path命令分析）

2.更多关于我

笔名	QQ	微信	爱好
张风捷特烈	1981462002	zdl1994328	语言
我的github	我的简书	我的掘金	个人网站

3.声明

1----本文由张风捷特烈原创,转载请注明
2----欢迎广大编程爱好者共同交流
3----个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
4----看到这里，我在此感谢你的喜欢与支持

icon_wx_200.png