【注释张豪华版 Path酷炫动画】极速get花式Path (支付宝支付成功动画)
本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布
转载请标明出处:
http://blog.csdn.net/zxt0601/article/details/54018970
本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)
代码传送门:喜欢的话,随手点个star。多谢
https://github.com/mcxtzhang/PathAnimView
概述
新年第一篇技术文章哈,大家新年快乐,先来个简单点的,主要介绍工具的使用,预预热,下周一奉上一个骚气的购物车动画按钮,敬请期待。
在前文 给我一个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
来自大佬wing的铁塔
前文回顾
这里简单回顾一下前文,GIF如下图:
PathAnimView
接受的唯一数据源是Path
(给我一个Path,还你一个动画View)
所以内置了几种将别的资源->Path的方法:
- 直接传string。(A-Z,0-9 “.” “- ” “)
//根据String 转化成PathsetSourcePath(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分隔开,方便我们复制黏贴。
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中,以以下形式存储:
<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
文章地址:
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
【注释张豪华版 Path酷炫动画】极速get花式Path (支付宝支付成功动画)相关推荐
- Android自定义控件(二)——支付宝支付成功动画
读律看书三九年,乌纱头上有青天,男儿欲画凌烟阁,第一功名不爱钱. 不知道大家关注过没有,在你使用支付宝的过程中,有一个支付成功的动画,虽然说很小,但看起来其实还是蛮实用的,涉及的知识点有Android ...
- css支付成功动画 svg打勾动画
动画是从b站看up主视频学的 非原创 <!DOCTYPE html> <html lang="en"><head><meta charse ...
- 【Android】 给我一个Path,还你一个酷炫动画
本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53040506 ...
- 给我一个Path,还你一个酷炫动画
一 概述 原本只是想模仿一下我魂牵梦萦的StoreHouse效果,没想到意外撸出来一个工具库. 最简单用法,给我一个path(可以有多段),我还你一个动画. I have a path.I have ...
- android 按键上浮动画_Android自定义动画酷炫的提交按钮
今天开始记录工作中遇到的需要实现的动画效果实现自定义view动画,后期会有一些列动画设计思路的文章. 在这里分享的是设计实现思路,仅供学习使用,让大家拿到稍微复杂点的动画的时候要知道该如何去一步步分解 ...
- canvas动画科技园_Canvas 写的酷炫动画代码分析
霓虹灯线形成的自发六边形,随机性生成火花 在看这篇文章时,里面有个动画的示例(如上图),然后感觉有点很酷炫,就打算了解一下怎么写的.( 先上代码示例链接) 前景提要 需要先确保你还记得三角函数的知识. ...
- Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果
一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...
- Android 酷炫的3d立体圆柱动画效果实现
最近在drrible上看到一个超酷炫的效果,立体圆柱缓慢上升:https://dribbble.com/shots/7077455-Spending-analytics 然后准备实现一波,做之前在网上 ...
- 一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。
一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部 前言介绍 手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文 效果展示: 说点 ...
最新文章
- C语言实例第2期:判断某一年是否为闰年
- 查询CPU占用高的SQL语句的解决方案
- 加载dll api_运行时类加载以支持不断变化的API
- 前端学习(1306):node.js模块的加载机制
- flowable springboot 集成 flowableDMN_05
- 从零开始学习springBoot(Contextpath+修改默认idk)
- vue用html做报表,Vue配置生成无限分割的表格,可快速实现任意复杂报表
- vmware虚拟机i copied it 和 i moved it的区别
- 易语言精益模块json_易语言Json解析
- java中如何连接SqlServer2000?
- java索引越界异常_java中的字符串索引越界错误(charAt)
- SnakeYaml使用
- 《智慧城市 顶层设计指南》解读与指导
- 通信协议(一)——UART协议
- PVE系统更换大硬盘的扩容方法
- APP开发的需求分析主要包括哪些?
- 树莓派-防火墙规则设置
- 自制Unity文件查找器,支持拼音搜索
- 解决linux有时候不能粘贴
- 深度分享:解读中国老年行业创新创业生态,六位创业者带来老年创投/社交电商/教育/旅游/化妆品一线实战经验心得!
热门文章
- python简易时钟,显示到毫秒
- 什么是软文, 软文怎么写
- jiaocheng https://github.com/CarpenterLee/JCFInternals
- 拼插机器人课和围棋课_开学第一课和机器人比围棋的人是谁
- 黑客攻防技术宝典(十八)
- 生成对角矩阵 numpy.diag
- 10月8日 团队管理专题 | 中秋国庆双节盛典
- P1345 [USACO5.4]奶牛的电信Telecowmunication
- VS Code 中选中英文单词大小写切换快捷键
- 软件测试的创新思维,解读测试设计