SVG图片和动画

最新推荐文章于 2024-02-12 13:55:25 发布

0你太猖狂0

最新推荐文章于 2024-02-12 13:55:25 发布

阅读量229

点赞数

分类专栏： Android 文章标签： android svg

本文链接：https://blog.csdn.net/qq_27753689/article/details/117383570

版权

Android 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

SVG图片和动画

了解SVG图片和动画，能够自己画一些图片或动画，效果比较酷炫

代码放在github上了：传送门

效果图

在这里插入图片描述

SVG图片

在drawable下新建my_drawable.xml，内容如下

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="150dp"
   android:height="24dp"
   android:viewportHeight="24"
   android:viewportWidth="150">
   <path
       android:name="my_search_bar"
       android:pathData="M140,17
        A7,7,0,1,1,140.5,16.5
        L145,24
        L0,24"
       android:strokeColor="#ffffff"
       android:strokeLineCap="round"
       android:strokeWidth="2" />

   <path
       android:name="my_search_line"
       android:pathData="M0,5 L0,20"
       android:strokeColor="#ffffff"
       android:trimPathStart="1"
       android:strokeLineCap="round"
       android:strokeWidth="2" />

   <!--通过trimPathStart="1"隐藏-->
</vector>

vector标签

根标签，表示一个矢量动画
支持的属性：

android:name：定义矢量图形的名称
android:width：定义Drawable的宽度，支持所有dimension单位，一般使用dp。drawable的宽度不一定是最终绘制宽度，比如给ImageView设置background则Drawable绘制宽度等于ImageView的宽度，给ImageView设置src则在ImageView大于Drawable宽度时，Drawable绘制宽度等于自己定义的宽度。
android:height：定义Drawable的宽度，支持所有dimension单位，一般是dp。其它同上。
android:viewportWidth：定义矢量图形的视图(viewport)空间的宽度，viewport是一个虚拟的canvas，后面所有的path都在该坐标系上绘制。坐标系左上方为(0,0)，横轴从左向右，纵轴从上到下。横轴可视区域就是0~viewportWidth。一般和android:width相等
android:viewportHeight：定义矢量图形的可视区域的高度。其它见上。
android:tint：作为染色(tint)的色彩应用到drawable上。默认不应用tint。
android:tintMode：tint颜色的Porter-Duff混合模式，默认是src_in。
android:autoMirrored：如果drawable布局方向是RTL(right-to-left)时，drawable绘制是否需要镜像化（镜像化就是绕自身x轴中线旋转180度）。
android:alpha：drawable的透明度，取值0～1

group标签

定义一组路径和子group，另外还可以定义动画，定义在vector指定的视图区域内（与viewport坐标系相同）。动画的顺序是缩放–>旋转–>平移，所以同时定义的这些属性最先应用scaleX/scaleY属性，最后应用translateX/translateY属性。

一般是将几个path一起做动画时，添加group。见Demo中my_drawable_group.xml

支持的属性：

android:name：定义group的名称
android:rotation：group对应矢量图形的旋转角度，取值是360度制。
android:pivotX：Group旋转和缩放时的中心点的X轴坐标。取值基于viewport视图的坐标系，不能使用百分比。
android:pivotY：Group旋转和缩放时的中心点的Y轴坐标。取值基于viewport视图的坐标系，不能使用百分比。
android:scaleX：Group在X轴上的缩放比例，最先应用到图形上。
android:scaleY：Group在Y轴上的缩放比例，最先应用到图形上。
android:translateX：Group在X轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。
android:translateY：Group在Y轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。

path标签

定义一个路径，一个路径即可以表示一块填充区域也可以表示一根线条。
支持的属性：

android:name：定义路径的名称
android:pathData：定义路径的数据，路径由多条命令组成，格式与SVG标准的path data的属性完全相同，路径命令的参数定义在viewport视图的坐标系。
android:fillColor：指定填充路径的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path不被填充。
android:strokeColor：指定路径线条的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path的线条不会绘制出来。
android:strokeWidth：指定路径线条的宽度，基于viewport视图的坐标系（不要dp/px之类的结尾）。
android:strokeAlpha：指定路径线条的透明度。
android:fillAlpha：指定填充区域的透明度。
android:trimPathStart：取值从0到1，表示路径从哪里开始绘制。0~trimPathStart区间的路径不会被绘制出来。
android:trimPathEnd：取值从0到1，表示路径绘制到哪里。trimPathEnd~1区间的路径不会被绘制出来。
android:trimPathOffset：平移可绘制区域，取值从0到1，线条从(trimPathOffset+trimPathStart绘制到trimPathOffset+trimPathEnd)，注意：trimPathOffset+trimPathEnd如果超过1，其实也是绘制的的，绘制的是0～trimPathOffset+trimPathEnd-1的位置。
android:strokeLineCap：设置线条首尾的外观，三个值：butt（默认，向线条的每个末端添加平直的边缘）, round（向线条的每个末端添加圆形线帽）, square（向线条的每个末端添加正方形线帽。）。
android:strokeLineJoin：设置当两条线条交汇时，创建什么样的边角（线段连接类型）：三个值：miter（默认，创建尖角）,round（创建圆角）,bevel（创建斜角）
android:strokeMiterLimit：设置设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

path data语法

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY) ：同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射同样二次贝塞尔曲线，更平滑
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线，相当于arcTo()
Z = closepath()：关闭路径（会自动绘制链接起点和终点）
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

圆弧参数具体见下图解释：
在这里插入图片描述

引用

ImageView中设置android:src="@drawable/my_drawable"

<ImageView
       android:layout_gravity="center_horizontal"
       android:id="@+id/my_imageView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/my_drawable"
    />

SVG动画

SVG动画分为2种方式，添加和启动动画方式不一样

属性动画(详见Demo中my_animator_move.xml和my_drawable_group.xml)
需要使用group包裹，为什么要使用它来包裹path？因为属性动画要改变绘制的图片属性来实现动画，可是path标签中并没有translateX和translateY属性，因此，VectorDrawable要想使用属性，就需要用group标签来封装path标签，将属性动画作用在group标签中，但是group不支持直接操作path的属性。所以这种动画形式是直接移动整个path或者矢量图，它不能根据矢量图参数来变化动画。
path动画(详见Demo中anim_fill.xml，anim_empty.xml和my_drawable.xml)
直接使用path的name的动画，这个动画支持trimPathStart、trimPathEnd、pathData，fillColor，fillAlpha这几种与path有关的属性，这种动画形式可以直接看懂，trimPathStart与trimPathEnd是绘制步骤动画、pathData是改变参数动画（变形动画）。
基本流程：
1.创建矢量图
2.创建animator目录（注意！是animator目录。不是anim目录。）
3.在animator里添加动画xml
4.在drawable目录里创建 animated-vector 组合器文件，组合动画xml与矢量图xml
5.在View 添加这个组合器

set标签

一个set中可以有多个objectAnimator，通过ordering属性控制执行顺序。ordering：取值[“sequentially”|“together”], sequentially（默认）。

objectAnimator标签

支持的属性：

android:propertyName ：动画属性名称,取值详见下
android:valueType：根据PropertyName指定属性值的类型，共有四种类型，分别是：[“intType”|“floatType”|“colorType”|pathType]。
android:valueFrom ：动画的起始值，根据PropertyName指定的属性类型，值的类型为ValueType（如位置、颜色、透明、PathData等）。
android:valueTo ：动画的结束值
android:repeatCount ：重复次数，定义动画重复次数，[“infinite”]为无限次。
android:repeatMode ：重复模式，定义重复的行为 [“restart”|“reverse”]， restart：直接跳到起始位置重新开始；reverse：倒退到起始位置重新开始。
android:duration ：动画时长，动画执行一次的时间，单位ms。
android:interpolator ：动画插值,详见下
android:startOffset ：动画延迟开始时间，单位ms，只延时第一次播放，重复播放时不延时

propertyName属性值

取值有：

translateX ： X轴移动
translateY ： Y轴移动
scaleX ：X轴放大或者缩小比例
scaleY ：Y轴放大或者缩小比例
rotation ：旋转
trimPathStart ：属性表示截掉从起点到某个位置的部分，保留剩下的部分,轨迹的起点位置是0%，轨迹的终点位置是100%
trimPathEnd ：表示截掉从某个位置到终点的部分，保留剩下的部分
fillAlpha ：透明度
fillColor ：颜色
pathData ：比较特殊，注意两点：第一点，当android:propertyName取值是pathData时，对应的android:valueFrom 取值是pathType（android:valueType=“pathType” ）；
第二点，矢量动画要求初始帧的路径命令序列（android:valueFrom ）与结束帧的路径命令序列（ android:valueTo）内的命令必须一一对应，只有参数值可以不同，这样才能插值，从而矢量动画才能执行。否则编译后运行时就崩溃了。

注： translateX ，translateY ，scaleX，scaleY，rotation对应属性动画，需要group标签包裹。

interpolator属性值

Accelerate:加速，共有下面四种模式
["@android:interpolator/accelerate_decelerate"|"@android:interpolator/accelerate_cubic"|"@android:interpolator/accelerate_quad"|"@android:interpolator/accelerate_quint"]

accelerate_decelerate：在动画开始与结束的地方速率改变比较慢，在中间的时候加速；
accelerate_cubic：拟合立方缓和函数的曲线加速。
accelerate_quad：曲线匹配的quadtratic缓解功能加速。
accelerate_ quint：曲线匹配功能昆特缓解加速。
Decelerate:减速，共有下面四种模式，同 Accelerate["@android:interpolator/accelerate_decelerate"|"@android:interpolator/decelerate_cubic"|"@android:interpolator/decelerate_quad"|"@android:interpolator/decelerate_quint"]。
Anticipate：开始的时候向后然后向前甩["@android:interpolator/accelerate_decelerate"] 。
AnticipateOvershoot：开始的时候向后然后向前甩一定值后返回最后的值["@android:interpolator/anticipate_overshoot"]。
Bounce：动画结束的时候弹起["@android:interpolator/bounce"] 。
Cycle：动画循环播放特定的次数，速率改变沿着正弦曲线["@android:interpolator/cycle"] 。
Linear：以常量速率改变["@android:interpolator/linear"]
Overshoot：向前甩一定值后再回到原来位置["@android:interpolator/overshoot"]

属性动画

步骤：

第一步：创建矢量图，在drawable目录新建my_drawable_group.mxl(path需要用group包裹)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="150dp"
   android:height="24dp"
   android:viewportHeight="24"
   android:viewportWidth="150">

   <group
       android:name="my_search_group">

       <path
           android:name="my_search_bar"
           android:pathData="M140,17
        A7,7,0,1,1,140.5,16.5
        L145,24
        L0,24"
           android:strokeColor="#ffffff"
           android:strokeLineCap="round"
           android:strokeWidth="2" />
       <path
           android:name="my_search_line"
           android:pathData="M0,20 L0,5"
           android:strokeColor="#ffffff"
           android:strokeLineCap="round"
           android:strokeWidth="2" />
   </group>
</vector>

第二步：创建动画xml，在animator目录新建anim_move.xml
android:propertyName属性取值范围是 translateX ，translateY ，scaleX，scaleY，rotation

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:interpolator/decelerate_cubic"
   android:duration="1000"
   android:repeatMode="restart"
   android:propertyName="translateX"
   android:valueFrom="0"
   android:valueTo="10"
   android:valueType="floatType">
</objectAnimator>

第三步：创建组合器，将第一步的矢量图xml和第二步的动画xml结合。在drawable目录新建my_animator_move.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/my_drawable_group">
   <target
       android:name="my_search_group"
       android:animation="@animator/anim_move" />
</animated-vector>

第四步：启动动画，先布局中添加一个ImageView

my_imageView.setImageResource(R.drawable.my_animator_move)
val drawable: Drawable = my_imageView.drawable
     if (drawable is Animatable) {
          (drawable as Animatable).start()
     }

path动画

步骤：

第一步：创建矢量图，在drawable目录新建my_drawable.mxl

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="150dp"
   android:height="24dp"
   android:viewportHeight="24"
   android:viewportWidth="150">
   <path
       android:name="my_search_bar"
       android:pathData="M140,17
        A7,7,0,1,1,140.5,16.5
        L145,24
        L0,24"
       android:strokeColor="#ffffff"
       android:strokeLineCap="round"
       android:strokeWidth="2" />
   <path
       android:name="my_search_line"
       android:pathData="M0,5 L0,20"
       android:strokeColor="#ffffff"
       android:trimPathStart="1"
       android:strokeLineCap="round"
       android:strokeWidth="2" />
       
   <!--通过trimPathStart="1"隐藏-->
</vector>

第二步：创建动画xml，在animator目录新建anim_fill.xml和anim_empty.xml

anim_fill.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="800"
   android:interpolator="@android:interpolator/fast_out_slow_in"
   android:propertyName="trimPathStart"
   android:valueFrom="1"
   android:valueTo="0"
   android:valueType="floatType" />

anim_empty.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="800"
   android:interpolator="@android:interpolator/fast_out_slow_in"
   android:propertyName="trimPathStart"
   android:valueFrom="0"
   android:valueTo="1"
   android:valueType="floatType" />

第三步：创建组合器，将第一步的矢量图xml和第二步的动画xml结合。在drawable目录新建my_animator_line.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:drawable="@drawable/my_drawable">
   <target
       android:name="my_search_bar"
       android:animation="@animator/anim_empty" />

   <target
       android:name="my_search_line"
       android:animation="@animator/anim_fill" />
</animated-vector>

第四步：布局中添加一个ImageView，引用第一步的矢量图xml

     <ImageView
       android:layout_gravity="center_horizontal"
       android:id="@+id/my_imageView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/my_drawable"
    />

第五步：启动动画

       animatorLine = resources.getDrawable(R.drawable.my_animator_line) as AnimatedVectorDrawable
       my_imageView.setImageDrawable(animatorLine)
       animatorLine.start()

0你太猖狂0

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
SVG图片和动画

SVG图片和动画了解SVG图片和动画，能够自己画一些图片或动画，效果比较酷炫代码放在github上了：传送门效果图SVG图片在drawable下新建my_drawable.xml，内容如下<?xml version="1.0" encoding="utf-8"?><vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="150dp" android:heig
复制链接

扫一扫