wow报复之路,qq万人骑,索爱w595c拆机
本文手把手教你图片->svg->path的姿势.。
从此酷炫path动画，如此简单。
效果先随便上几个图，以后你找到的图有多精彩，gif就有多精彩：
随便搜了一个铅笔画的图，丢进去
随手复制的二维码icon
来自大佬wing的铁塔
前文回顾
这里简单回顾一下前文，gif如下图：
pathanimview接受的唯一数据源是path（给我一个path，还你一个动画view）
所以内置了几种将别的资源->path的方法：
我要评论
//根据string 转化成path
setsourcepath(pathparserutils.getpathfromarrayfloatlist(storehousepath.getpath("zhangxutong", 1.1f, 16)));
//动态设置 从stringarray里取 storeview2.setsourcepath(pathparserutils.getpathfromstringarray(this, r.array.storehouse, 3));
//svg转-》path
//还在完善中，我从github上找了如下工具类，发现简单的svg可以转path，复杂点的 就乱了
/* svgpathparser svgpathparser = new svgpathparser();
try {
path path = svgpathparser.parsepath("m1,1 l1,50 l50,50 l50,50 l50,1 z");
storeview3.setsourcepath(path);
} catch (parseexception e) {
e.printstacktrace();
}*/
当时我称之为简单的svg ，因为当时我对svg也不是很懂，现在经过一段时间的学习和基友们的讨论（wing神，白神，群友等），我才知道我从gayhub上找到的这个工具类，是可以将标准的svg转换为android中的path(android.graphics.path)的。
之前的痛点
之前我转换失败的，所谓 复杂的svg，其实是我直接利用as生成的vector（我称之android svg）。里面对标准svg进行了一些语法的扩充，才导致我转换的失败。（例如扩充了 s，q等标记）
例如我们利用as的工具，直接生成一个android机器人的icon的vector，之前我以为这就是svg数据了，实际上我发现这是对标准svg进行了扩展，
生成的数据如下：
标红处可以看到，1.5s, s并不在标准的svg语法中，所以解析会出错。
图片->svg->path的正确姿势
那么为什么我今天又敢出来写（zhuang）博(b)客了呢，因为我已经有了解决这个问题的方案。
好，让我们想一下，实际开发中，如果要用path动画，我们的场景是什么？
嗯，看到一张想要她动的图，或 ui妹子给了你一张，让你自己动的图。
步骤一：图->svg
利用vmde软件,我们可以轻松完成将图->svg。（大佬wing提供的方案）
首先我们先get一张喜欢的图，可以从iconfont里取，下载方式直接不要选svg，这里的svg直接使用会有问题，原因不明.我们就选png下载即可。
然后打开vmde软件
其实现在我们已经可以用一些文本编辑工具直接打开svg，并且复制其中的pathdata,以string形式传入pathanimview即可。
path path = svgpathparser.parsepath(pathstring); storeview3.setsourcepath(path);
嗯，方法其实就这么简单，但是~有很多的图，是有n段pathdata的，也就是说复制起来极其麻烦，
而且如果要从中剔除一些不需要的path，或者改变几个path的绘制顺序，就更难筛选了。
步骤二：利用工具网站预览path
于是我就求白神给我做了一个工具页面，它可以完成svg的解析、预览、并将每段path分隔开，方便我们复制黏贴。
使用方式也相当简单，直接拖动svg的图丢进去即可。
解析后的效果图
可以看到，我们可以方便的选取每一段path，如果我只需要最外面的齿轮，那我只对齿轮部分点击select all即可。
也可以调整顺序，例如我想先绘制外圈，就将外圈的path放在前面复制进我们的app中。
这里再拿文首第一张妹子图举例：
经过png->svg->预览的步骤后，如下：
vmde给我们生成了海量的path数据，我们只想要其中一部分有用的，
于是通过预览&放大，我只复制了两段path，效果就如文首了。
关于这个网站，白神已经承诺我，会尽快加上图片预览的放大和一键复制全部path的功能，大家敬请期待。
手摸手实战：支付宝支付成功动画
其实支付宝支付成功动画相当简单，路径 就是画一个圆 + 一个勾.
路径的获取，可以：
我们利用本文的办法去实现：
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.
步骤：
在提取出svg中的path数据后，我个人喜欢将比较长的path，放进values目录下一个新建文件paths.xml中，以以下形式存储：
<string name="xxx"> 复制过来的path数据</string>
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
以上所述是小编给大家介绍的android自定义view实现支付宝支付成功-极速get花式path炫酷动画，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android Manifest中meta-data扩展元素数据的配置与获取方式
Android实现获取meta-data和build.gradle的值
Android获取清单文件中的meta-data,解决碰到数值为null的问题
解决webview 第二次调用loadUrl页面不刷新的问题
解决Android WebView拦截url,视频播放加载失败的问题
Android webview加载https链接错误或无响应的解决
网友评论