android绘制矢量图标和动画

admin管理员组

文章数量:1516870

android绘制矢量图标和动画

drawable文件夹里添加Vector Asset

M表示绘制的起点，比如绘制的图标大小为24x24，那么x轴y轴的中点为12，
Z表示将最后一个点和第一个点连起来
L表示连线到该点坐标，大写L或不写表示绝对坐标，小写l表示相对坐标。

绘制多笔可以分几个path也可写在一个path

<vector android:height="24dp"android:viewportHeight="24.0" android:viewportWidth="24.0"android:width="24dp" xmlns:android=""><path android:fillColor="#FF4421" android:pathData="M12,1 l-3,4 l6,0 z"/><path android:fillColor="#03A9F4" android:pathData="M12,5 l-3,4 l6,0 z"/><path android:fillColor="#FFEB3B" android:pathData="M12,9 l-3,4 l6,0 z"/>
</vector>

绘制绿色对勾

<pathandroid:name="check"android:pathData="M4,10 L12,16 L20,4"android:strokeColor="#35931d"android:strokeWidth="3" />

绘制爱心

<pathandroid:name="check"android:pathData="M6,10 L12,16 L18,10 "android:strokeLineCap="round"android:strokeColor="#FE1300"android:strokeAlpha="200"android:strokeWidth="10" />

绘制弧形
a（圆的x轴半径，y轴半径，x轴旋转角度，0/1-小/大弧度，0/1-逆/顺时针，圆的终点位置x点，圆的终点位置y点）
x轴旋转角度不起作用。

  <pathandroid:name="check"android:pathData="M12,12 a4,4 0 1 0 2,3"android:strokeLineCap="round"android:strokeColor="#FE1300"android:strokeAlpha="180"android:strokeWidth="1" />-->

绘制圆角矩形

    <pathandroid:fillColor="#8A8181"android:name="check"android:pathData="M16,3 L4,3 a3,3 0 0 0 -3,3 L1,18 a3,3 0 0 0 3,3 L16,21 a3,3 0 0 0 3,-3 L19,6 a3,3 0 0 0 -3,-3 "android:strokeLineCap="round"android:strokeColor="#FE1300"android:strokeWidth="1" />

res下新建animator文件夹，新建vector assests文件animtor.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimatorxmlns:android=""android:duration="@android:integer/config_longAnimTime"android:propertyName="pathData"android:valueFrom="@string/round1"android:valueTo="@string/square1"android:valueType="pathType"/>

string.xml

 <string name="round1" translatable="false"> m 109.0, 27.0 h 0.0 c 45.29,0.0,82.0,36.71,82.0,82.0 v 0.0 c 0.0,45.29,-36.71,82.0,-82.0,82.0 h 0.0 c -45.29,0.0,-82.0,-36.71,-82.0,-82.0 v 0.0 c 0.0,-45.29,36.71,-82.0,82.0,-82.0 L 109.0,27.0z</string><string name="square1" translatable="false">m 80.0, 69.0 h 60.0 c 5.52,0.0,10.0,4.48,10.0,10.0 v 60.0 c 0.0,5.52,-4.48,10.0,-10.0,10.0 h -60.0 c -5.52,0.0,-10.0,-4.48,-10.0,-10.0 v -60.0 c 0.0,-5.52,4.48,-10.0,10.0,-10.0 L 80.0,69.0z</string>

drawable/button_ready.xml

<vector android:height="100dp" android:viewportHeight="218"android:viewportWidth="218" android:width="100dp" xmlns:android=""><pathandroid:fillAlpha="0.5"android:fillColor="#000"android:name="椭圆 10 拷贝 2"android:pathData="m109.5 5c57.71 0 104.5 46.79 104.5 104.5c0 57.71 -46.79 104.5 -104.5 104.5c-57.71 0 -104.5 -46.79 -104.5 -104.5c0 -57.71 46.79 -104.5 104.5 -104.5z"/><pathandroid:fillColor="#fff"android:name="c1"android:pathData="m109 16c51.36 0 93 41.64 93 93c0 51.36 -41.64 93 -93 93c-51.36 0 -93 -41.64 -93 -93c0 -51.36 41.64 -93 93 -93zm0 -16c-60.2 0 -109 48.8 -109 109c0 60.2 48.8 109 109 109c60.2 0 109 -48.8 109 -109c0 -60.2 -48.8 -109 -109 -109z"/><pathandroid:fillColor="#ff2f51"android:name="c2"android:pathData="@string/round1"/>
</vector>

drawable/recoder_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android=""android:drawable="@drawable/button_ready"><targetandroid:animation="@animator/anim_in"android:name="c2"/></animated-vector>

activity_main.xml

    <ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/recoder_animator"android:id="@+id/round"/>

本文标签： android绘制矢量图标和动画