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

最新推荐文章于 2023-10-20 09:17:24 发布
最新推荐文章于 2023-10-20 09:17:24 发布
阅读量587 收藏 1
点赞数
分类专栏： svg Android 文章标签： svg android

转： FROM  GA_studio   http://blog.csdn.net/tianjian4592

 

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

 

 

 

--------------------------------------------------

如果你想看 GAStudio Github主页，请戳这里； 
如果你想看 GAStudio更多技术文章，请戳这里； 
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里还定义了一些基本的图形和效果：

 

 

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

 

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

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

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

 

 

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

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

 

 

然后将选区导出为path：

 

 

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

 

 

经过以上几步，我们就拿到了我们自己设计的文字或图形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

 

 

--------------------------------------------------

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

--------------------------------------------------

 

 

 

版权声明：本文为博主原创文章，转载请带上文章链接，谢谢！ https://blog.csdn.net/tianjian4592/article/details/44733123

易_
关注
专栏目录
android中使用svg
海阔天空
10-10 385
android中使用svg
svg实现炫酷动画
qq_29158381的博客
05-18 1540
尊重原创，欢迎转载，转载请注明： FROM  GA_studio   http://blog.csdn.net/tianjian4592         一个真正酷炫的动效往往让人虎躯一震，话不多说，咱们先瞅瞅效果： 这个效果我们需要考虑以下几个问题： 1. 这是图片还是文字； 2. 如果是图片该如何拿到图形的边沿线坐标，如果是文字呢？ 3. 如果
Android使用SVG矢量图打造酷炫动效！
热门推荐
GAStudio
03-31 6万+
这个效果我们需要考虑以下几个问题： 1. 这是图片还是文字； 2. 如果是图片该如何拿到图形的边沿线坐标，如果是文字呢？ 3. 如果拿到了边沿线坐标，如何让光线沿着路径跑动； 4. 怎么处理过程的衔接； 以上四个问题似乎不是太好处理，而这几个问题也正好是这个效果精华所在，接下来咱们一个一个进行考虑，
android利用SVG矢量图打造酷炫动效
03-30
android利用SVG矢量图打造酷炫动效，可以供于交流学习！
android Material Desgin动效——SVG动画
01-30 384
参考博客：蓝色的天空ywj 简书 一个成功的AnimatedVectorDrawable由三部分组成：animator/anim_rotat；drawable/anim_vector；drawable/vector drawable/vector：定义动画初始的样子，可缺省 animator/anim_rotat：定义动画（可有多个） drawable/anim_vector：管理animator...
SVG实例入门与动画实战
weixin_42684490的博客
03-22 1329
前言 在日常开发过程中，我们或多或少都接触过SVG，有可能是用它来画一些简单的图形，有可能是使用它来构建工程的字体文件库，甚至是用它来绘制一些复杂的可视化模块。本文会详细介绍SVG的基本图形以及常见的动画形式，帮助你了解入门SVG。 基本图形 下面会介绍SVG预设的数种形状以及对应的属性介绍，在实际开发或者设计过程中，绘画SVG图标大多数时候都是会使用一些工具的。 矩形 <svg width="200px" height="200px" version="1.1" xmlns="http://
基本 SVG 动画
web开发
01-07 247
本主题将介绍基本 SVG 动画，它是学习中级 SVG 动画之前必须掌握的内容。此主题假定你基本了解 HTML 和 JavaScript。若要完全理解此主题所述的内容，请计划花 1 小时左右的时间来学习。 注意 要查看本主题中包含的示例，必须使用一个支持 SVG 元素的浏览器，如 Windows Internet Explorer 9。 尽管在 Internet Explorer 9 中不支...
动画图svg的实现
12-03
综上所述，Android使用SVG矢量图能够为应用程序带来丰富的视觉体验和良好的设备适应性。通过巧妙地利用Android的动画框架和SVG的特性，开发者可以创造出各种酷炫的动效，提升用户体验。在实际开发中，不断尝试和优化...
android动效开篇
GAStudio
03-09 2万+
在现在的Android App开发中，动效越来越受到产品和设计师同学的重视，如此一来，也就增大了对开发同学的考验，虽说简单的动效：如移动，旋转，缩放，渐变或普通的界面跳转相对简单，但在目前日益激烈的竞争条件下，出彩复杂的动效也越来越多，并且很多效果已经无法直接用android提供的Animation或Animator框架进行实现，需要通过自定义View或ViewGroup解决，当然，同一个效果的实现方式往往有多种，在实现一个效果的同时，怎么去进行权衡，比如多用图就会增大包大小并影响运行时内存，增加推广成本和
SVG动画示例
weixin_30521161的博客
01-02 117
package com.loaderman.customviewdemo; import android.graphics.drawable.Animatable; import android.os.Bundle; import android.support.graphics.drawable.AnimatedVectorDrawableCompat; import andro...
SVGdemo动画
09-24
资源内容是关于安卓使用vector动画效果的一个演示demo。 简单的演示了如何使用vector动画。 效果简单，代码精简
12种炫酷HTML5 SVG和CSS3表单浮动标签特效
12-12
这是一组效果非常炫酷的SVG和CSS3表单浮动标签特效。这组浮动标签特效共12种效果，这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完成，一部分则使用SVG来制作变形动画。
12种炫酷html5 svg加载loading动画特效
08-15
12种炫酷html5 svg加载loading动画特效 包括 audio、ball-triangle、bars等
inkscape矢量图像编辑软件
11-27
nkscape是开源的矢量图像编辑软件，与Illustrator、Freehand、CorelDraw、Xara X 等软件很相似，它使用 W3C 标准的 ScalableVector Graphics (SVG) 文件格式，支持包括形状、路径、文本、标记、克隆、alpha 混合、变换、渐变、图案、组合等 SVG特性。它也支持创作共用的元数据、节点编辑、图层、复杂的路径运算、位图描摹(根据点阵16进制色差复制绘制矢量图的算法)、文本绕路径、流动文本、直接编辑 XML 等。它可以导入JPEG、PNG、TIFF 等格式，并输出为 PNG 和多种位图格式。除了支持Windows外，Inkscape还有支持Linux与Mac的版本。
svg 动画_分享一个非常炫酷的svg动画
weixin_39652646的博客
12-10 253
最终效果：本代码作者：Ali Klein http://www.aliklein.com 你一定不敢相信，上图是由短短五十行代码画出来的！！！代码： body { background-color: #E1DFDE; overflow-x: hidden; overflow-y: scroll; } svg { display: block; width: 85vw; ma...
svg常用属性及动画效果
最新发布
jieyucx的博客
10-20 3794
SVG是可缩放矢量图形（）的缩写。它是一种基于XML语法的2D矢量图形格式，用于描述二维图形和图像。与传统的栅格图像（如JPEGPNG等）相比，SVG使用数学描述来定义图形，因此可以无损地缩放和放大，而不会失真或失去清晰度。SVG可在各种分辨率和尺寸的设备上显示，并且支持交互性和动画效果，使得它成为一种非常强大和灵活的图形格式。viewBox是SVG元素的一个属性，用于定义SVG画布中可见区域的坐标系和大小。它是一个由4个数值组成的字符串，分别表示左上角的x坐标、左上角的y坐标、宽度和高度。viewBox。
Android实现炫酷SVG动画效果
diandingyin9417的博客
07-28 102
svg是眼下十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们能够直接用代码来描画图像，能够用不论什么文字处理工具打开svg图像。通过改变部分代码来使图像具有交互功能，并能够随时插入到HTML中通过浏览器(如火狐浏览器)来观看。使用svg格式可让你设计激动人心的、高分辨率的Web图形页面。 svg格式具备眼下网络流行...
炫酷线条动画--svg
weixin_30770783的博客
09-20 234
　　我们经常可以在一些页面看到看起来很酷的线条动画，有些可以用css实现，有些css就无能为力了，今天来研究另一种实现方式，svg 　　如果对svg是什么还不了解的话，可以先去看看svg的基础教程； 　　一般对于复杂的线条，不提倡自己去手动画，而应该借助illustrator之类的绘图软件生成后保存位svg文件 　　 svg做线条动画的主要方式使用stroke-dasharr...
SVG-Android开源库——关于动画的使用
MegatronKings的博客
11-22 4717
Android官方的Vector除了对SVG图片的显示支持外，还支持动画效果，可以与Animator动画框架相结合，实现出各种各样的动画，甚至可以针对SVG图片的部分内容做动画。然而，Vector是5.0版本才开始出现，尽管提供了Support兼容库，但是动画却仍然存在一些兼容问题(主要是AnimatorInflater不兼容)。
SVG矢量图：网络图形的新标准
"SVG矢量图是一种基于XML的网络图像格式，设计用于创建可缩放的图形，保持高质量的图像表现，即使在放大或更改尺寸时也是如此。它与DOM和XSL等其他W3C标准兼容，并且是万维网联盟的标准。与Flash不同，SVG在各种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值