Android-高级-UI-进阶之路-(七)-SVG-基础使用-+-绘制中国地图

1. 给 path 定义 name,如下所示

2. 定义一个 Animator 文件，以表示对这幅 Vector 图像做动画

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

<objectAnimator xmlns:android=“http://schemas.android.com/apk/res/android”
android:propertyName=“trimPathStart”
android:valueFrom=“1”
android:valueTo=“0”
android:duration=“3000”

需要注意的是，这里的文件是对应 Vector 中 path 标签的，这里动画效果是动态改变 path 标签的 trimPathStart 属性值，从 0 ~ 1 。

3. 定义 animated-vector 进行关联

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

在上述代码中，drawable 代表关联的 vector 图像，target 代表将 path name 和动画进行关联

4. 代码中进行设置

class SVGDemo1Activity : AppCompatActivity() {

@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_svg)
startAnimatabe()
}

private fun startAnimatabe() {
val animatedVectorDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.line_animated_vector)
iv.setImageDrawable(animatedVectorDrawable)
val animatable =

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

iv.drawable as Animatable
animatable.start()
}
}

实战

输入搜索动画

1. 利用在线绘制 SVG 图标网站 制作搜索图标

可以自己随意捣鼓绘制，绘制好了之后点击视图->源代码，将 SVG 代码复制出来保存成 search_svg.xml

2. 在线转换 svg2vector

点击空白或者直接将 SVG 拖拽指定区域进行转换

3. 将转换好的 Android 格式的 vector 导入 AS

4. 开始制作动画关联

//1.在 /res/aniamator 文件夹下 定义动画

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

<objectAnimator xmlns:android=“http://schemas.android.com/apk/res/android”
android:propertyName=“trimPathStart”
android:valueFrom=“1”
android:valueTo=“0”
android:duration=“2000”

//2. 在/res/drawable/ 定义 vector

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

//3. 在/res/drawable/ 关联动画和 vector

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