欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

程序员文章站 2024-02-23 15:09:52
本文手把手教你图片->svg->path的姿势.。 从此酷炫path动画,如此简单。 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便...

本文手把手教你图片->svg->path的姿势.。

从此酷炫path动画,如此简单。

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

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

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

随手复制的二维码icon

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

来自大佬wing的铁塔

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

前文回顾

这里简单回顾一下前文,gif如下图:

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

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进行了扩展,

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

生成的数据如下:

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

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

图片->svg->path的正确姿势

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

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

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

步骤一:图->svg

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

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

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

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

然后打开vmde软件

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

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画

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

path path = svgpathparser.parsepath(pathstring);
  storeview3.setsourcepath(path);

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

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

步骤二:利用工具网站预览path

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

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

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

解析后的效果图

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

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

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

经过png->svg->预览的步骤后,如下:

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

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

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

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

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

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

路径的获取,可以:

  • 利用本文介绍的图片->svg->path 的方法。
  • 也直接用path的一些draw方法实现。

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

1 拿到这张图

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

2 png丢进vmde

3 svg丢进工具网页

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

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

 string success = "...pathstring";

5 利用svgpathparser工具类得到path 

 path path = svgpathparser.parsepath(success);

6 设置给pathanimview.

 storeview3.setsourcepath(path);

效果图:

Android自定义View实现支付宝支付成功-极速get花式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中,以以下形式存储:  

<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升级,于是我撸了一个购物车的控件:

Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画 

项目中使用的效果

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

代码已经撸完,考虑到了view的回收复用,

并且可以看到在recyclerview中使用,切换layoutmanager也是没有问题的,

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

心急可先去gayhub查看代码:

https://github.com/mcxtzhang/animshopbutton

以上所述是小编给大家介绍的android自定义view实现支付宝支付成功-极速get花式path炫酷动画,希望对大家有所帮助