SVG:
资料1
资料2
用法:
- VectorDrawable: 创建基于XML的SVG图形
- AnimatedVectorDrawable:"胶水",实现动画
- 语法什么的看资料。
创建vector SVG文件:
- 通过下面xml文件,根据语法画: VectorDrawable
- 网站SVG图片源码/Studio--> new--> vector Asset/ps,AI将图片转换成SVG
//res/drawable目录
<?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="100"
android:viewportWidth="100">
<group>
<!-- 如果指定属性为 pathData,
则要添加一个属性 android:strokeLineCap="pathType",来告诉系统进行pathData变换-->
<path
android:name="path1"
android:pathData="
M 20,20
L 50,20 80,20"
android:strokeColor="#000"
android:strokeLineCap="round"
android:strokeWidth="5" />
<path
android:name="path2"
android:pathData="
M 20,80
L 50,80 80,80"
android:strokeColor="#000"
android:strokeLineCap="round"
android:strokeWidth="5" />
//中间的线,自己加上去的。
<path
android:name="path3"
android:pathData="
M 20,50
L 45,50 M 55,50 80,50"
android:strokeColor="#000"
android:strokeLineCap="round"
android:strokeWidth="5" />
</group>
</vector>
创建animator:
// res/animtor目录
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:interpolator="@android:anim/linear_interpolator"
android:propertyName="pathData"
android:valueFrom="M 20,20 L 50,20 80,20"
android:valueTo="M 20,20 L 50,50 80,20"
android:valueType="pathType"/>
创建 animated-vector文件:
- "胶水" 把 VectorDrawable 和 objectAnimator 连起来。
// res/drawable目录
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
//引入vector
android:drawable="@drawable/svg_lines">
<target
//此处的name必须和vector中的name一致,才能知道动画要作用到哪个path
android:name="path1"
//动画
android:animation="@animator/obj_svg_path_1">
</target>
<target
android:name="path2"
android:animation="@animator/obj_svg_path_2">
</target>
</animated-vector>
开始动画:
// xml中设置backgroud,代码中用getBackground();
// xml中设置src属性,代码中用getDrawable();
// Animatable animDrawable = (Animatable)ivSvgTarget.getBackground();
Animatable animDrawable = (Animatable) ivSvgTarget.getDrawable();
if (!animDrawable.isRunning()) {
animDrawable.start();
}