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

startAnimatabe()
}

private fun startAnimatabe() {
val animatedVectorDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.line_animated_vector)
iv.setImageDrawable(animatedVectorDrawable)
val animatable = 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"?>

5. 效果

警车灯闪烁

今日头条下拉刷新动画

来一个复杂组合动画，请看下面效果图:

1. 准备 vector 数据

2. 定义顺时针执行动画并做 pathData 变换

这里拿其中一个位置变化来举例说明:

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

<set xmlns:android=“http://schemas.android.com/apk/res/android”

android:ordering=“sequentially”>//按顺序执行

//依次执行 pathData 位置变换

<objectAnimator

android:duration=“600”
android:interpolator=“@android:interpolator/decelerate_cubic”
android:propertyName=“pathData”
android:valueFrom="
M100,30
L180,30
M180,30<