它定义的图像如下所示:
上面水滴形状就是呈现出来的对应的图像,在这段代码中,首先使用 vector 标签来指定这是一幅 SVG 图像,而它有下面几个属性。
width/height : 表示该 SVG 宽高viewportHeight/viewportWidth: 表示 SVG 图形划分的比例 path 标签
常用属性
android:trimPathStart 属性
该属性用于指定路径从哪里开始,取值 0 ~ 1,表示路径开始位置的百分比。当取值为 0 时,表示从头部开始;当取值为 1 时,整条路径不可见。
android:trimPathEnd 属性
该属性用于指定路径的结束位置,取值为 0 ~ 1 ,表示路径结束位置的百分比。当取值为 1 时,路径正常结束;当取值为 0 时,表示从头开始位置就已经结束了,整条路径不可见。
android:trimPathOffset 属性
该属性用于指定结果路径的位移距离,取值为 0 ~ 1 。当取值为 0 时,不进行位移;当取值为 1 时,位移整条路径的长度。
android:pathData 属性
在 path 标签中,主要通过 pathData 属性来指定 SVG 图像的显示内容。而 pathData 属性初 M 和 L 指令以外,还有更多的指定。
方法一: 设计软件
如有你有绘图基础,则可以使用 Illustrator 或在线 SVG 工具制作 SVG 图像,比如:editor.method.ac/ ,或通过 SVG 源文件下载网站下载后进行编辑。
方法二: Iconfont
阿里巴巴的矢量图库
Android 中引入 SVG 图像 准备工作我们知道在 Android 中是不支持直接使用 SVG 图像解析的,我们必须将 SVG图像转换为 vector 标签描述,这里有 2 种方法;
方法一: 在线转换
点击跳转在线转换网站
方法二: AS 转
按照我上面的步骤,就可以生成 Vector 图像了
基础使用下面对 ImageView 怎么直接使用 vector 进行说明(ps:这里用的 androidx 版本,如果是低版本需要自己去做兼容);
- 在 ImageView 中使用
前面讲解了 vector 标签,静态显示 vector 和制作 SVG 图像的方法,那么该小节就讲解动态的 vector, 动态的 vector 所实现的效果才是 SVG 图像在 Android 应用中的精髓。
要实现 Vector 动画,首先需要 Vector 图像和它所对应的动画,这里依然使用上一小节水滴状态的图像,
先来看一下效果:
- 给 path 定义 name,如下所示
- 定义一个 Animator 文件,以表示对这幅 Vector 图像做动画
android:valueFrom=“1”
android:valueTo=“0”
android:duration=“3000”
需要注意的是,这里的文件是对应 Vector 中 path 标签的,这里动画效果是动态改变 path 标签的 trimPathStart 属性值,从 0 ~ 1 。
- 定义 animated-vector 进行关联
在上述代码中,drawable 代表关联的 vector 图像,target 代表将 path name 和动画进行关联
- 代码中进行设置
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 = iv.drawable as Animatable
animatable.start()
}
}
- 利用在线绘制 SVG 图标网站 制作搜索图标
可以自己随意捣鼓绘制,绘制好了之后点击视图->源代码,将 SVG 代码复制出来保存成 search_svg.xml
- 在线转换 svg2vector
点击空白或者直接将 SVG 拖拽指定区域进行转换
- 将转换好的 Android 格式的 vector 导入 AS
- 开始制作动画关联
//1.在 /res/aniamator 文件夹下 定义动画
android:valueFrom=“1”
android:valueTo=“0”
android:duration=“2000”
//2. 在/res/drawable/ 定义 vector
//3. 在/res/drawable/ 关联动画和 vector
- 效果
来一个复杂组合动画,请看下面效果图:
- 准备 vector 数据
- 定义顺时针执行动画并做 pathData 变换
这里拿其中一个位置变化来举例说明:
android:ordering=“sequentially”>//按顺序执行 //依次执行 pathData 位置变换 android:duration=“600” android:duration=“600” android:duration=“600” 如果对标签中的定义还不了解的先去看下文章中 path 标签 中的说明。如果不理解标签意思,根本就看不懂。 xmlns:tools=“http://schemas.android.com/tools” tools:targetApi=“lollipop”> class SVGDemo1Activity : AppCompatActivity() { var reStartTT = @SuppressLint(“HandlerLeak”) tools:targetApi=“lollipop”> class SVGDemo1Activity : AppCompatActivity() { var reStartTT = @SuppressLint(“HandlerLeak”) 欢迎分享,转载请注明来源:内存溢出
android:interpolator
="@android:interpolator/decelerate_cubic"
android:propertyName=“pathData”
android:valueFrom="
M100,30
L180,30
M180,30
L180,90
M180,90
L100,90
M100,90
L100,30"
android:valueTo="
M100,120
L180,120
M180,120
L180,180
M180,180
L100,180
M100,180
L100,120"
android:valueType=“pathType” />
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName=“pathData”
android:valueFrom="
M100,120
L180,120
M180,120
L180,180
M180,180
L100,180
M100,180
L100,120"
android:valueTo="
M20,120
L100,120
M100,120
L100,180
M100,180
L20,180
M20,180
L20,120"
android:valueType=“pathType” />
android:interpolator="@android:interpolator/decelerate_cubic"
android:propertyName=“pathData”
android:valueFrom="
M20,120
L100,120
M100,120
L100,180
M100,180
L20,180
M20,180
L20,120"
android:valueTo="
M20,30
L100,30
M100,30
L100,90
M100,90
L20,90
M20,90
L20,30"
android:valueType=“pathType” />
进行关联
android:drawable="@drawable/ic_toutiao"代码控制重复执行
object : Handler() {
override fun handleMessage(msg: Message) {
id:drawable="@drawable/ic_toutiao"代码控制重复执行
object : Handler() {
override fun handleMessage(msg: Message) {
评论列表(0条)