**M:**新建起点,参数x,y(M20, 30)
**L:**连接直线,参数x,y(L30, 20)
**H:**纵坐标不变,横向连线,参数x(H20)
**V:**横坐标不变,纵向连线,参数y(V30)
**Q:**二次贝塞尔曲线,参数x1,y1,x2,y2(Q10,20,30,40)
**C:**三次贝塞尔曲线,参数x1,y1,x2,y2,x3,y3(C10,20,30,40,50, 60)
**Z:**连接首尾,闭合曲线,无参数
光看没毛用,画一下。一根线画出来了,3根线也不是问题。(请无视贝塞尔曲线,我目前也不懂)
svg是一个公共标准,下面文件只是android对应的格式,一般我们android猿要获取一个svg文件的渠道是:
网上下。
http://iconfont.cn/
这个网站如何用?我是xjb点着点着就会了,无非就是看见图标就点,找download,实在不会网上搜下。
自己画。
**在线画图自定义生成svg:**http://editor.method.ac/
画好了之后,点击网页上的File->save默认保存为svg格式。但这个svg在android是无法使用的。需要下一步的转换。
**普通svg转换为android平台可识别的svg格式:**http://inloop.github.io/svg2android/
点开这个软件中间的区域,会让你选择本地文件,你就选刚刚生成的svg文件,完事之后保存,copy到项目drawAble目录下就能用了。
找有经验的UI做.(UI妹妹表示你一点也不怜香惜玉)
PS:你也可以去下Studio插件里有一个"SVG to VectorDrawable",这个也能将公共格式的svg转换为android格式的SVG。
这是本文用到SVG文件:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="300dp"
android:width="300dp"
android:viewportHeight="70"
android:viewportWidth="70" >
<group
android:name="rotationGroup"
android:pivotX="35"
android:pivotY="35"
android:rotation="0.0" >
group>
vector>
有了这个svg文件,你在xml布局文件内直接当做一个图片资源来用就行了。
<ImageView
android:id="@+id/img_xjbdraw"
android:src="@drawable/ic_xjbdraw"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:scaleType="fitXY" />
但是这么做了之后,并没有动画,这时候我们接下来学习svg动画。
请记得我们刚才在布局文件内的ImageView使用的是这个:android:src="@drawable/ic_xjbdraw"
,它是一个静态SVG文件,这时候我们需要去定义一个"动态的SVG文件",即SVG动画,它的根标签是animated-vector
。
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:drawable="@drawable/ic_xjbdraw"
tools:targetApi="lollipop">
<target
android:name="rotationGroup"
android:animation="@animator/rotation" />
<target
android:name="pathchangeGroup"
android:animation="@animator/pathchange" />
</animated-vector>
我们看到这里有俩target
标签,他是啥?请看我们一开始show出来的效果图。这个动画的构成是:
这里一个target就类似一个动画节点,它挂载一个动画文件,以便让加载这个文件的控件使用依附它的动画。
这里360度旋转我就不说了,他就是一个旋转的属性动画,直接看文件你就明白了。
<!-- rotation.xml -->
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
另外一个动画,是本文的重点。接下来看它。
<!-- rotation.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="1500"
android:propertyName="pathData"
android:valueFrom="M10,10 L60,10 L60,20 L10,20 Z M10,30 L60,30 L60,40
L10,40 Z M10,50 L60,50 L60,60 L10,60 Z"
android:valueTo="M5,35 L40,0 L47.072,7.072 L12.072,42.072 Z M10,30 L60,30 L60,40
L10,40 Z M12.072,27.928 L47.072,62.928 L40,70 L5,35 Z"
android:valueType="pathType" />
</set>
pathchange.xml是我本地命名,可以随便取。
可以看到它实际上也是一个属性动画,但是它这里使用的属性值:
android:propertyName=“pathData”
android:valueFrom
android:valueTo
android:valueType=“pathType”
重点是valueFrom,valueTo,它代表将来原本的三天平行直线汇聚成一个箭头。就是对应的字符串值,但是这是有前提的,即——同形Path
何谓同形Path?(摘自https://www.jianshu.com/p/89cfd9042b1e)
如果两个path拥有相同的命令数,并且对应位置的命令符相同,那么这两个path我们称之为同形path。
如:
M10,15 L20,20 L25,15 C10,20,20,20,30,10 L50,50 Z
M20,30 L10,10 L15,25 C25,10,30,30,10,20 L35,35 Z
<ImageView
android:id="@+id/img_xjbdraw"
android:src="@drawable/animvectordrawable"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:scaleType="fitXY" />
↓
ImageView xjbDrawImg = findViewById(R.id.img_xjbdraw);
AnimatedVectorDrawable animatedVectorDrawable = (AnimatedVectorDrawable) xjbDrawImg.getDrawable();
animatedVectorDrawable.start();
// 加载SVG
// anim1 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim1); anim1.start();
// anim2 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim2); anim2.start();
// anim3 = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.anim3); anim3.start();
本文到此结束,但涉及的深度还是太浅,下一篇将进一步研究SVG动画。有错误请直接指出,感谢。
2018年9月29日更新:Lottie库使用
https://blog.csdn.net/dg_summer/article/details/78871397
https://github.com/zj614android/Svg-/tree/master/svg1
**Android高级动画(2):**https://www.jianshu.com/p/89cfd9042b1e
**Android高级动画(3):**https://www.jianshu.com/p/d6cc8d218900
**Android使用矢量图(SVG, VectorDrawable)实践篇:**https://www.jianshu.com/p/0555b8c1d26a
**手把手教学, android 使用 SVG:**https://www.jianshu.com/p/5c81970ddf33
**Android Study 之 聊聊有关SVG那些事儿:**https://blog.csdn.net/u012400885/article/details/78956947
**PathView案例:**https://blog.csdn.net/crazy__chen/article/details/47728241