我们都知道 SVG动画是在 Android 5.0之后提供的可伸缩矢量图形。在讲如何如何在 Android 5.x 中使用 SVG 之前,我们先了解一下 SVG 中的 <path> 便签。
-
<path> 标签所支持的指令
- M = moveto(X,Y) :将画笔移动到指定的坐标位置,但未发生绘制
- L = lineto(X,Y) :画直线到指定的坐标位置
- H = horizontal lineto(X):画水平线到指定的X坐标位置
- V = verticak lineto(Y):画垂直线到指定的Y坐标位置
- C = curveto(X1,Y1,X2,Y2,ENDX,ENDY):三次贝塞尔曲线
- S = smooth curveto(X2,Y2,ENDX,ENDY):三次贝塞尔曲线
- Q = quadratic belzier curve(X,Y,ENDX,ENDY):二次贝塞尔曲线
- T = smooth quadratic belzier curveto(ENDX,ENDY):映射前面路径后的终点
- A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y) : 弧线
- Z = closepath():关闭路径
在使用上面指令时,需要注意:
坐标轴以(0,0)为中心,�X轴水平向右,Y轴水平垂直向下
所有指令大小写不同。大写绝对定位,参照全局坐标系;小写相对定位,参考父容器坐标系。
指令和数据间的空格可以省略。
同一指令出现多次可以只用一个。
SVG 的指令使用固定而且复杂,为了方便,我们可以通过网上的在线生成SVG 编辑器就可以完成上述的SVG 代码。 在线编辑SVG链接地址
-
Android 中使用 SVG 的方法
- VectDrawable
- AnimatedVectorDrawable
vector.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="200dp"
android:viewportHeight="200"
android:viewportWidth="200">
<group
android:name="test"
android:rotation="0">
<path
android:fillColor="#000505"
android:pathData="M -1 -1 H 201 V 201 H -1 V -1 Z" />
<path
android:fillColor="#fc072c"
android:pathData="M71.14751,161.07251l0,-75.00001l68,75.00001l-68,0z"
android:strokeWidth="1.5" />
</group>
</vector>
avd.xml
<?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/vector"
tools:targetApi="lollipop">
<target
android:name="test"
android:animation="@animator/rotation" />
</animated-vector>
rotation.xml
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
在布局文件中给需要显示的控件设置背景
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/avd" />
需要显示动画的时候,代码调用
ImageView image = findViewById(R.id.image);
((Animatable)image.getDrawable()).start();