Android使用SVG矢量图打造酷炫动效

向右看齐 2022-05-19 14:09 334阅读 0赞

转： FROM  GA\_studio   [http://blog.csdn.net/tianjian4592][http_blog.csdn.net_tianjian4592]

一个真正酷炫的动效往往让人虎躯一震，话不多说，咱们先瞅瞅效果：

![Center][]

\--------------------------------------------------

如果你想看 [GAStudio Github主页][GAStudio Github]，请戳[这里][GAStudio Github]；   
如果你想看 [GAStudio][http_blog.csdn.net_tianjian4592]更多[技术文章][http_blog.csdn.net_tianjian4592]，请戳[这里][http_blog.csdn.net_tianjian4592]；   
QQ技术交流群：277582728；

\--------------------------------------------------

这个效果我们需要考虑以下几个问题：

1. 这是图片还是文字；

2. 如果是图片该如何拿到图形的边沿线坐标，如果是文字呢？

3. 如果拿到了边沿线坐标，如何让光线沿着路径跑动；

4. 怎么处理过程的衔接；

以上四个问题似乎不是太好处理，而这几个问题也正好是这个效果精华所在，接下来咱们一个一个进行考虑，当然这种考虑已经基于一些国外大神的基础之上；

首先这是图片还是文字？

答案是：背景是图片，表面的文字还是图片，有些同学可能会说了，靠，这么没含量，一个帧动画而已，还虎躯一震，XXXXX，当然，答案肯定不会是这样的，背景我就不说了，普通的jpg或png图，但文字则是SVG格式的矢量图；

有了第一个问题的答案，我们来看第二个问题，如何拿到文字图形的边沿坐标；

要回答这个问题，我们先来简单的了解一个SVG(矢量图)；

SVG 意为可缩放矢量图形（Scalable Vector Graphics），是使用 XML 来描述二维图形和绘图程序的语言；

使用 SVG 的优势在于：

1.SVG 可被非常多的工具读取和修改（比如记事本）,由于使用xml格式定义，所以可以直接被当作文本文件打开，看里面的数据；

2.SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强，SVG 图就相当于保存了关键的数据点，比如要显示一个圆，需要知道圆心和半径，那么SVG 就只保存圆心坐标和半径数据，而平常我们用的位图都是以像素点的形式根据图片大小保存对应个数的像素点，因而SVG尺寸更小；

3.SVG 是可伸缩的，平常使用的位图拉伸会发虚，压缩会变形，而SVG格式图片保存数据进行运算展示，不管多大多少，可以不失真显示；

4.SVG 图像可在任何的分辨率下被高质量地打印;

5.SVG 可在图像质量不下降的情况下被放大;

6.SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）;

7.SVG 可以与 Java 技术一起运行;

8.SVG 是开放的标准;

9.SVG 文件是纯粹的 XML;

看起来好厉害的样子，还是回到我们的问题，从SVG图中我们可否拿到我们想要的数据点呢？根据上面的介绍，答案当然是肯定的，从SVG图中我们可以拿到我们想要的所有数据；

好的，拿到数据之后，怎么让一条线沿着路径跑起来呢？毋庸置疑，我们需要用到path；

最后我们根据效果的需要，设置几个绘制过程，进行绘制；

接下来我们一起来解决以上问题：

既然SVG是公认的xml文件格式定义的，那么我们则可以通过解析xml文件拿到对应SVG图的所有数据，我们先看下 path 类型的SVG 数据：

1.  `<?xml version="1.0" standalone="no"?>`
2.  `<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"`
3.  `"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">`
4.   
5.  `<svg width="100%" height="100%" version="1.1"`
6.  `xmlns="http://www.w3.org/2000/svg">`
7.   
8.  `<path d="M250 150 L150 350 L350 350 Z" />`
9.   
10. `</svg>`

上面有一个path 标签，里面用到了 M 和 Z 指令，M 就相当于 android Path 里的moveTo(),Z 则相当于 Path 里的close();

我们先看下SVG 里关于path 有哪些指令：

1.  `M = moveto 相当于 android Path 里的moveTo(),用于移动起始点`
2.  `L = lineto 相当于 android Path 里的lineTo()，用于画线`
3.  `H = horizontal lineto 用于画水平线`
4.  `V = vertical lineto 用于画竖直线`
5.  `C = curveto 相当于cubicTo(),三次贝塞尔曲线`
6.  `S = smooth curveto 同样三次贝塞尔曲线，更平滑`
7.  `Q = quadratic Belzier curve quadTo()，二次贝塞尔曲线`
8.  `T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线，更平滑`
9.  `A = elliptical Arc 相当于arcTo()，用于画弧`
10. `Z = closepath 相当于closeTo(),关闭path`

了解了以上path相关的指令，就可以看懂path构成的SVG图的数据了，除此之外，SVG里还定义了一些基本的图形和效果：

![Center 1][]

更多介绍和使用大家可以看 [W3School][]

好，以上内容，我们已经知道 SVG 图是通过 Xml 格式定义的，并且里面用到了一些基本的指令对数据进行组装，构成基本图形或复杂的路径；

而对于我们来说 ，这个xml 如何拿到呢？

1.我们根据最后要做的效果，利用PS等作图软件设计制作出想要的图形；

![Center 2][]

2. 使用 GIMP 之类的矢量图软件导出图片的SVG数据，方法如下：

先使用魔棒工具快速建立选区：

![Center 3][]

然后将选区导出为path：

![Center 4][]

这个时候在软件的右边栏就可以看见生成的路径了，然后将路径导出：

![Center 5][]

经过以上几步，我们就拿到了我们自己设计的文字或图形SVG图的Path数据，上面图片的SVG信息如下：

1.  `<?xml version="1.0" encoding="UTF-8" standalone="no"?>`
2.  `<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"`
3.  `"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">`
4.   
5.  `<svg xmlns="http://www.w3.org/2000/svg"`
6.  `width="6.95746in" height="1.82269in"`
7.  `viewBox="0 0 668 175">`
8.  `<path id="Selection"`
9.  `fill="none" stroke="black" stroke-width="1"`
10. `d="M 530.00,34.00`
11. `C 530.00,34.00 526.08,59.00 526.08,59.00`
12. `526.08,59.00 518.00,105.00 518.00,105.00`
13. `518.00,105.00 515.42,119.00 515.42,119.00`
14. `515.42,119.00 513.26,125.01 513.26,125.01`
15. `513.26,125.01 506.00,126.00 506.00,126.00`
16. `506.00,126.00 496.00,126.00 496.00,126.00`
17. `496.00,126.00 496.00,120.00 496.00,120.00`
18. `490.87,124.16 486.71,126.42 480.00,126.91`
19. `475.71,127.22 471.06,126.94 467.00,125.44`
20. `454.13,120.68 451.86,110.19 452.00,98.00`
21. `452.22,79.34 465.14,64.55 484.00,63.18`
22. `492.14,62.59 498.96,65.71 504.00,72.00`
23. `504.00,72.00 510.00,34.00 510.00,34.00`
24. `510.00,34.00 530.00,34.00 530.00,34.00 Z`
25. `M 551.00,56.89`
26. `C 539.01,55.86 537.45,39.82 551.00,35.55`
27. `568.60,33.45 567.67,58.33 551.00,56.89 Z`
28.

中间段省略

1.  `M 263.00,134.00`
2.  `C 263.00,134.00 263.00,145.00 263.00,145.00`
3.  `263.00,145.00 202.00,145.00 202.00,145.00`
4.  `202.00,145.00 202.00,134.00 202.00,134.00`
5.  `202.00,134.00 263.00,134.00 263.00,134.00 Z" />`
6.  `</svg>`

根据图形路径的复杂度，生成的path数据复杂度也不一样，但格式也算是非常的清楚，即采用一定的指令把数据点进行拼接；

现在有了这些数据点，我们需要做的则是对数据进行解析，封装成我们要的Path；

解析的过程也无非是 遇到指令则采用android Path 里的对应方法进行置换，解析方式如下：

1.  `public Path parsePath(String s) throws ParseException {`
2.  `mCurrentPoint.set(Float.NaN, Float.NaN);`
3.  `mPathString = s;`
4.  `mIndex = 0;`
5.  `mLength = mPathString.length();`
6.   
7.  `PointF tempPoint1 = new PointF();`
8.  `PointF tempPoint2 = new PointF();`
9.  `PointF tempPoint3 = new PointF();`
10.  
11. `Path p = new Path();`
12. `p.setFillType(Path.FillType.WINDING);`
13.  
14. `boolean firstMove = true;`
15. `while (mIndex < mLength) {`
16. `char command = consumeCommand();`
17. `boolean relative = (mCurrentToken == TOKEN_RELATIVE_COMMAND);`
18. `switch (command) {`
19. `case 'M':`
20. `case 'm': {`
21. `// m指令，相当于android 里的 moveTo()`
22. `boolean firstPoint = true;`
23. `while (advanceToNextToken() == TOKEN_VALUE) {`
24. `consumeAndTransformPoint(tempPoint1,`
25. `relative && mCurrentPoint.x != Float.NaN);`
26. `if (firstPoint) {`
27. `p.moveTo(tempPoint1.x, tempPoint1.y);`
28. `firstPoint = false;`
29. `if (firstMove) {`
30. `mCurrentPoint.set(tempPoint1);`
31. `firstMove = false;`
32. `}`
33. `} else {`
34. `p.lineTo(tempPoint1.x, tempPoint1.y);`
35. `}`
36. `}`
37. `mCurrentPoint.set(tempPoint1);`
38. `break;`
39. `}`
40.  
41. `case 'C':`
42. `case 'c': {`
43. `// c指令，相当于android 里的 cubicTo()`
44. `if (mCurrentPoint.x == Float.NaN) {`
45. `throw new ParseException("Relative commands require current point", mIndex);`
46. `}`
47.  
48. `while (advanceToNextToken() == TOKEN_VALUE) {`
49. `consumeAndTransformPoint(tempPoint1, relative);`
50. `consumeAndTransformPoint(tempPoint2, relative);`
51. `consumeAndTransformPoint(tempPoint3, relative);`
52. `p.cubicTo(tempPoint1.x, tempPoint1.y, tempPoint2.x, tempPoint2.y,`
53. `tempPoint3.x, tempPoint3.y);`
54. `}`
55. `mCurrentPoint.set(tempPoint3);`
56. `break;`
57. `}`
58.  
59. `case 'L':`
60. `case 'l': {`
61. `// 相当于lineTo()进行画直线`
62. `if (mCurrentPoint.x == Float.NaN) {`
63. `throw new ParseException("Relative commands require current point", mIndex);`
64. `}`
65.  
66. `while (advanceToNextToken() == TOKEN_VALUE) {`
67. `consumeAndTransformPoint(tempPoint1, relative);`
68. `p.lineTo(tempPoint1.x, tempPoint1.y);`
69. `}`
70. `mCurrentPoint.set(tempPoint1);`
71. `break;`
72. `}`
73.  
74. `case 'H':`
75. `case 'h': {`
76. `// 画水平直线`
77. `if (mCurrentPoint.x == Float.NaN) {`
78. `throw new ParseException("Relative commands require current point", mIndex);`
79. `}`
80.  
81. `while (advanceToNextToken() == TOKEN_VALUE) {`
82. `float x = transformX(consumeValue());`
83. `if (relative) {`
84. `x += mCurrentPoint.x;`
85. `}`
86. `p.lineTo(x, mCurrentPoint.y);`
87. `}`
88. `mCurrentPoint.set(tempPoint1);`
89. `break;`
90. `}`
91.  
92. `case 'V':`
93. `case 'v': {`
94. `// 画竖直直线`
95. `if (mCurrentPoint.x == Float.NaN) {`
96. `throw new ParseException("Relative commands require current point", mIndex);`
97. `}`
98.  
99. `while (advanceToNextToken() == TOKEN_VALUE) {`
100. `float y = transformY(consumeValue());`
101. `if (relative) {`
102. `y += mCurrentPoint.y;`
103. `}`
104. `p.lineTo(mCurrentPoint.x, y);`
105. `}`
106. `mCurrentPoint.set(tempPoint1);`
107. `break;`
108. `}`
109.  
110. `case 'Z':`
111. `case 'z': {`
112. `// 封闭path`
113. `p.close();`
114. `break;`
115. `}`
116. `}`
117.  
118. `}`
119.  
120. `return p;`
121. `}`
122.

有了图形对应的path，我们只需要按照我们想要的效果进行绘制即可，具体过程不再细讲，大家看代码：

1.  `@Override`
2.  `protected void onDraw(Canvas canvas) {`
3.  `super.onDraw(canvas);`
4.  `if (mState == STATE_NOT_STARTED || mGlyphData == null) {`
5.  `return;`
6.  `}`
7.   
8.  `long t = System.currentTimeMillis() - mStartTime;`
9.   
10. `// 绘制出现前的边沿线和跑动过程`
11. `for (int i = 0; i < mGlyphData.length; i++) {`
12. `float phase = MathUtil.constrain(0, 1,`
13. `(t - (mTraceTime - mTraceTimePerGlyph) * i * 1f / mGlyphData.length)`
14. `* 1f / mTraceTimePerGlyph);`
15. `float distance = INTERPOLATOR.getInterpolation(phase) * mGlyphData[i].length;`
16. `mGlyphData[i].paint.setColor(mTraceResidueColors[i]);`
17. `mGlyphData[i].paint.setPathEffect(new DashPathEffect(`
18. `new float[] {`
19. `distance, mGlyphData[i].length`
20. `}, 0));`
21. `canvas.drawPath(mGlyphData[i].path, mGlyphData[i].paint);`
22.  
23. `mGlyphData[i].paint.setColor(mTraceColors[i]);`
24. `mGlyphData[i].paint.setPathEffect(new DashPathEffect(`
25. `new float[] {`
26. `0, distance, phase > 0 ? mMarkerLength : 0,`
27. `mGlyphData[i].length`
28. `}, 0));`
29. `canvas.drawPath(mGlyphData[i].path, mGlyphData[i].paint);`
30. `}`
31.  
32. `if (t > mFillStart) {`
33. `if (mState < STATE_FILL_STARTED) {`
34. `changeState(STATE_FILL_STARTED);`
35. `}`
36.  
37. `// 绘制渐变出现的过程，即改变alpha过程`
38. `float phase = MathUtil.constrain(0, 1, (t - mFillStart) * 1f / mFillTime);`
39. `for (int i = 0; i < mGlyphData.length; i++) {`
40. `GlyphData glyphData = mGlyphData[i];`
41. `mFillPaint.setARGB((int) (phase * ((float) mFillAlphas[i] / (float) 255) * 255),`
42. `mFillReds[i],`
43. `mFillGreens[i],`
44. `mFillBlues[i]);`
45. `canvas.drawPath(glyphData.path, mFillPaint);`
46. `}`
47. `}`
48.  
49. `if (t < mFillStart + mFillTime) {`
50. `ViewCompat.postInvalidateOnAnimation(this);`
51. `} else {`
52. `changeState(STATE_FINISHED);`
53. `}`
54. `}`

好了，主要的问题和思路基本如上，有些人可能会说，你这讲的跟UX分享似的，没毛线用，其实我的目的只有一个，那就是不管你是否能看懂代码，都能按照我上面所说做出自己想要的效果，并加以改变，灵活运用，毕竟轮子不需要重复造！

我本人也是对SVG矢量图刚有所了解，主要参考国外大神的一篇博客，链接如下：http://www.willowtreeapps.com/blog/muzei-esque-animated-svg-drawing-for-android/

CSDN源码下载地址：[http://download.csdn.net/detail/tianjian4592/8548495][http_download.csdn.net_detail_tianjian4592_8548495]

\--------------------------------------------------

[http_blog.csdn.net_tianjian4592]: http://blog.csdn.net/tianjian4592
[Center]: /images/20220519/91c83ad5128a4b8caa5596ef4f7b03bc.png
[GAStudio Github]: https://github.com/Ajian-studio
[Center 1]: /images/20220519/4615a654d1e84c309b25d5690e3a00ef.png
[W3School]: http://www.w3school.com.cn/svg/svg_intro.asp
[Center 2]: /images/20220519/3b5e80443e0a4ef0ac6a888cce2ccc51.png
[Center 3]: /images/20220519/aac8dc50002b400f88f4dcaff67aa3ff.png
[Center 4]: /images/20220519/777431c247aa49b8844ba491d4ca636c.png
[Center 5]: /images/20220519/b69fe8c998834c77a374b14e7644a8ed.png
[http_download.csdn.net_detail_tianjian4592_8548495]: http://download.csdn.net/detail/tianjian4592/8548495