android绘制矢量图标和动画

最新推荐文章于 2023-06-09 17:39:39 发布

kkklzc

最新推荐文章于 2023-06-09 17:39:39 发布

阅读量583

点赞数

文章标签： android

本文链接：https://blog.csdn.net/kkklzc/article/details/109077308

版权

本文详细介绍了如何在Android中使用drawable文件夹添加VectorAsset，包括绘制图形的基本语法，如起点、路径和弧形等。同时，展示了如何创建动画，如通过animator文件夹内的XML文件实现图形形状的平滑变换。最后，给出了一个具体的例子，演示了如何在activity_main.xml中使用animated-vector实现图形的动态效果。

摘要由CSDN通过智能技术生成

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="http://schemas.android.com/apk/res/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>

绘制绿色对勾

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

绘制爱心

<path
        android: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轴旋转角度不起作用。

  <path
        android: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" />-->

绘制圆角矩形

    <path
        android: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"?>
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/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="http://schemas.android.com/apk/res/android">
    <path
        android: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"/>
    <path
        android: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"/>
    <path
        android: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="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/button_ready"
    >
    <target
        android:animation="@animator/anim_in"
        android:name="c2"/>

</animated-vector>

activity_main.xml

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