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

概述

新年第一篇技术文章哈，你们新年快乐，先来个简单点的，主要介绍工具的使用，预预热，下周一奉上一个骚气的购物车动画按钮，敬请期待。

在前文 给我一个Path，还你一个酷炫动画 中，我详细的阐述了如何撸出一个酷炫的Path动画View，咱们的口号是：
I have a path.I have a view. Oh~,Path(Anim)View.

也就是说，只要有了Path，剩下的就是绚丽的动画。

可是，这个Path要怎么获取呢，这是一个重点&痛点。
以前我也给出了三种解决方案，能够知足一些场景，可是SVG->Path的方案，在我心中还是未完品。

这就至关于我给你们看了一晚好喝的鸡汤，Path动画是很酷，然而我给的勺子还不够好，有些喝的不尽兴。

因此本文的目标是:I have a pic.I have a view. Oh~,Path(Anim)View.

考虑到实际SVG/美工给的图->Path也是一种很大的数据源来源。
因而我通过一段时间的搅基讨论，有了此文。
本文会先简单回顾上文，而后手把手教你图片->SVG->Path的姿式.。
今后酷炫Path动画，如此简单。

效果先随便上几个图，之后你找到的图有多精彩，gif就有多精彩：

随便搜了一个铅笔画的图，丢进去

随手复制的二维码icon

随手复制的二维码icon

来自大佬wing的铁塔

转载请标明出处：
gold.xitu.io/post/586c63…
本文出自:【张旭童的稀土掘金】(gold.xitu.io/user/56de21…)
代码传送门：喜欢的话，随手点个star。多谢
github.com/mcxtzhang/P…

前文回顾

这里简单回顾一下前文，GIF以下图：

上文效果图

PathAnimView接受的惟一数据源是Path（给我一个Path，还你一个动画View）
因此内置了几种将别的资源->Path的方法：

• 直接传string。（A-Z,0-9 "." "- " "）

//根据String 转化成Path
    setSourcePath(PathParserUtils.getPathFromArrayFloatList(StoreHousePath.getPath("ZhangXuTong", 1.1f, 16)));复制代码

• 定义在R.array.xxx里

  //动态设置 从StringArray里取
   storeView2.setSourcePath(PathParserUtils.getPathFromStringArray(this, R.array.storehouse, 3));复制代码

• 简单的SVG(半成品)

  //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软件

• 直接将刚才的PNG图片拖入其中
• 点击右上角的全自动
• 点击完成
• 点击另存，格式记得选择*.svg
  

  

其实如今咱们已经能够用一些文本编辑工具直接打开SVG，而且复制其中的PathData,以String形式传入PathAnimView便可。

Path path = svgPathParser.parsePath(pathString);
            storeView3.setSourcePath(path);复制代码

嗯，方法其实就这么简单，可是~有不少的图，是有N段PathData的，也就是说复制起来极其麻烦，
并且若是要从中剔除一些不须要的Path，或者改变几个Path的绘制顺序，就更难筛选了。

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

因而我就求白神给我作了一个工具页面，它能够完成SVG的解析、预览、并将每段Path分隔开，方便咱们复制黏贴。
liuyouth.github.io/utils/svg2a…
使用方式也至关简单，直接拖动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。多谢
github.com/mcxtzhang/P…

如今咱们已经能够作到，I have a pic.I have a view. Oh~,Path(Anim)View.
步骤：

• 一张图
• 丢进vmde
• 丢进SVG-Path预览网站
• 复制须要的Path以String形式传入PathAnimView
• 酷炫动画

在提取出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查看代码：
github.com/mcxtzhang/A…

鸣谢

白神的我的网站，很666的一个全栈
wing,邮电三精-大精，又称静静，奶zi静

转载请标明出处：
gold.xitu.io/post/586c63…
本文出自:【张旭童的稀土掘金】(gold.xitu.io/user/56de21…)
代码传送门：喜欢的话，随手点个star。多谢
github.com/mcxtzhang/P…