【注释张豪华版 Path酷炫动画】极速get花式Path （支付宝支付成功动画）

生成的数据如下：

标红处可以看到，1.5s, s并不在标准的SVG语法中，所以解析会出错。

图片->SVG->Path的正确姿势

---

那么为什么我今天又敢出来写（zhuang）博(b)客了呢，因为我已经有了解决这个问题的方案。

好，让我们想一下，实际开发中，如果要用Path动画，我们的场景是什么？

嗯，看到一张想要她动的图，或 UI妹子给了你一张，让你自己动的图。

步骤一：图->SVG

利用vmde软件,我们可以轻松完成将图->SVG。（大佬wing提供的方案）

首先我们先get一张喜欢的图，可以从Iconfont里取，下载方式直接不要选SVG，这里的SVG直接使用会有问题，原因不明.我们就选PNG下载即可。

然后打开vmde软件

• 直接将刚才的PNG图片拖入其中

• 点击右上角的全自动

• 点击完成

• 点击另存，格式记得选择***.svg**

其实现在我们已经可以用一些文本编辑工具直接打开SVG，并且复制其中的PathData,以String形式传入PathAnimView即可。

Path path = svgPathParser.parsePath(pathString);

storeView3.setSourcePath(path);

嗯，方法其实就这么简单，但是~有很多的图，是有N段PathData的，也就是说复制起来极其麻烦，

而且如果要从中剔除一些不需要的Path，或者改变几个Path的绘制顺序，就更难筛选了。

步骤二：利用工具网站预览Path

于是我就求白神给我做了一个工具页面，它可以完成SVG的解析、预览、并将每段Path分隔开，方便我们复制黏贴。

http://liuyouth.github.io/utils/svg2android/index.html

使用方式也相当简单，直接拖动SVG的图丢进去即可。

可以看到，我们可以方便的选取每一段Path，如果我只需要最外面的齿轮，那我只对齿轮部分点击select all即可。

也可以调整顺序，例如我想先绘制外圈，就将外圈的Path放在前面复制进我们的app中。

这里再拿文首第一张妹子图举例：

经过PNG->SVG->预览的步骤后，如下：

vmde给我们生成了海量的path数据，我们只想要其中一部分有用的，

于是通过预览&放大，我只复制了两段Path，效果就如文首了。

关于这个网站，白神已经承诺我，会尽快加上图片预览的放大和一键复制全部Path的功能，大家敬请期待。

手摸手实战：支付宝支付成功动画

---

其实支付宝支付成功动画相当简单，路径 就是画一个圆 + 一个勾.

路径的获取，可以：

• 利用本文介绍的图片->SVG->Path 的方法。

• 也直接用Path的一些draw方法实现。

我们利用本文的办法去实现：

1 拿到这张图

2 PNG丢进vmde

3 SVG丢进工具网页

4 根据预览，依次复制一个圆 + 一个勾的String。

String success = “…PathString”;

5 利用SvgPathParser工具类得到Path

Path path = svgPathParser.parsePath(success);

6 设置给PathAnimView.

storeView3.setSourcePath(path);

效果图：

总结

–

代码传送门：喜欢的话，随手点个star。多谢

https://github.com/mcxtzhang/PathAnimView

现在我们已经可以做到，I have a pic.I have a view. Oh~,Path(Anim)View.

步骤：

• 一张图

• 丢进vmde

• 丢进SVG-Path预览网站

• 复制需要的Path以String形式传入PathAnimView

• 酷炫动画

在提取出SVG中的Path数据后，我个人喜欢将比较长的Path，放进values目录下一个新建文件paths.xml中，以以下形式存储：

复制过来的Path数据

java代码中如下设置：

String xxx= getString(R.string.xxx);

Path path = svgPathParser.parsePath(xxx);

storeView.setSourcePath(path);

想了解更详细的使用以及细节，请下载DEMO后查看。

看大神们都有QQ群，

向他们靠齐。

我也建了个QQ搞基交流群：

557266366 。

下文预告

---

最近略忙，项目电商模块重构，UI升级，于是我撸了一个购物车的控件：

图录花了，我也不管了。。下次博文重新录个图吧，大家重点看购物车伸缩旋转闪转腾挪的动画即可。

代码已经撸完，考虑到了View的回收复用，

并且可以看到在RecyclerView中使用，切换LayoutManager也是没有问题的，

博文在梳理中，预计下周一输出。

心急可先去gayhub查看代码：

https://github.com/mcxtzhang/AnimShopButton

文章地址：

http://blog.csdn.net/zxt0601/article/details/54235736

鸣谢

–

白神的个人网站，很666的一个全栈

wing,邮电三精-大精，又称静静，奶zi静

转载请标明出处：
http://blog.csdn.net/zxt0601/article/details/54018970
本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)
代码传送门：喜欢的话，随手点个star。多谢
https://github.com/mcxtzhang/PathAnimView

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）

小福利：

在当下这个碎片化信息环境的时代，很多资源都可以在网络上找到，只取决于你愿不愿意找或是找的方法对不对了

很多朋友不是没有资料，大多都是有几十上百个G，但是杂乱无章，不知道怎么看从哪看起，甚至是看后就忘

如果大家觉得自己在网上找的资料非常杂乱、不成体系的话，我也分享一套给大家，比较系统，我平常自己也会经常研读。

2021大厂最新Android面试真题解析

各个模块学习视频：如数据结构与算法

只有系统，有方向的学习，才能在段时间内迅速提高自己的技术。

这份体系学习笔记，适应人群：**第一，**学习知识比较碎片化，没有合理的学习路线与进阶方向。**第二，**开发几年，不知道如何进阶更进一步，比较迷茫。第三，到了合适的年纪，后续不知道该如何发展，转型管理，还是加强技术研究。如果你有需要，我这里恰好有为什么，不来领取！说不定能改变你现在的状态呢！点赞+评论即可获得！

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！

0i4P-1712832927049)]

[外链图片转存中…(img-cBEJhc8I-1712832927049)]

这份体系学习笔记，适应人群：**第一，**学习知识比较碎片化，没有合理的学习路线与进阶方向。**第二，**开发几年，不知道如何进阶更进一步，比较迷茫。第三，到了合适的年纪，后续不知道该如何发展，转型管理，还是加强技术研究。如果你有需要，我这里恰好有为什么，不来领取！说不定能改变你现在的状态呢！点赞+评论即可获得！

《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！