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

本文手把手教你图片->SVG->Path的姿势.。

从此酷炫Path动画，如此简单。

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

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

随手复制的二维码icon

来自大佬wing的铁塔

前文回顾

这里简单回顾一下前文，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分隔开，方便我们复制黏贴。

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

以上所述是小编给大家介绍的Android自定义View实现支付宝支付成功-极速get花式Path炫酷动画，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    Android Path绘制贝塞尔曲线实现QQ拖拽泡泡

    这两天学习了使用Path绘制贝塞尔曲线相关,然后自己动手做了一个类似QQ未读消息可拖拽的小气泡,效果图如下: 最终效果图 接下来一步一步的实现整个过程. 基本原理 其实就是使用Path绘制三点的二次方贝塞尔曲线来完成那个妖娆的曲线的.然后根据触摸点不断绘制对应的圆形,根据距离的改变改变原始固定圆形的半径大小.最后就是松手后返回或者爆裂的实现. Path介绍: 顾名思义,就是一个路径的意思,Path里面有很多的方法,本次设计主要用到的相关方法有 moveTo() 移动Path到一个指定的点 qua

  • Android通过Path实现搜索按钮和时钟复杂效果

    Android通过Path实现搜索按钮和时钟复杂效果

    在Android中复杂的图形的绘制绝大多数是通过path来实现,比如绘制一条曲线,然后让一个物体随着这个曲线运动,比如搜索按钮,比如一个简单时钟的实现: 那么什么是path呢! 定义:path  就是路径,就是图形的路径的集合,它里边包含了路径里边的坐标点,等等的属性.我们可以获取到任意点的坐标,正切值. 那么要获取Path上边所有点的坐标还需要用到一个类,PathMeasure; PathMesure: PathMeasure是一个用来测量Path的类,主要有以下方法: 构造方法 公共方法 可

  • Android自定义View系列之Path绘制仿支付宝支付成功动画

    Android自定义View系列之Path绘制仿支付宝支付成功动画

    前言 使用支付宝付款时,我们可以看到成功或者失败都会有个动画提示,如果我们需要做这样的效果的话,当然,你可以让设计师给你做个GIF,但是我们知道图像比较耗内存的,我们自己可以用代码实现还是代码实现好点吧. 效果 实现方法 首先我们需要了解PathMeasure这个类,这个类我们可以理解为用来管理Path.我们主要看几个方法. PathMeasure(): 构造方法 ,实例化一个对象 PathMeasure(Path path,boolean isClosed):传入Path对象和是否闭合,pat

  • Android实现Path平滑的涂鸦效果实例

    Android实现Path平滑的涂鸦效果实例

    前言 在最近的一个项目中做了一个涂鸦的效果,手指快速移动,会出现折线,这篇文章记录笔触优化.下面话不多说了,来一起看看详细的介绍吧. 优化前 优化 设计到的类:Paint,Path Path类记录了坐标点集合决定线条轨迹,Paint决定怎么画 Paint处理 //连接的外边缘以圆弧的方式相交 paint.setStrokeJoin(Paint.Join.ROUND); //线条结束处绘制一个半圆 paint.setStrokeCap(Paint.Cap.ROUND); Path处理 这里用的到有

  • Android 使用Path实现涂鸦功能

    Android 使用Path实现涂鸦功能

    今天实现一个涂鸦效果,会分几步实现,这里有一个重要的知识点就是图层,要理解这个,不然你看这篇博客,很迷茫,迷茫的苍茫的天涯是我的爱,先从简单的需求做起,绘制一条线,代码如下: package com.tuya; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.util

  • Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

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

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

    本文手把手教你图片->SVG->Path的姿势.. 从此酷炫Path动画,如此简单. 效果先随便上几个图,以后你找到的图有多精彩,gif就有多精彩: 随便搜了一个铅笔画的图,丢进去 随手复制的二维码icon 来自大佬wing的铁塔 前文回顾 这里简单回顾一下前文,GIF如下图: PathAnimView接受的唯一数据源是Path(给我一个Path,还你一个动画View) 所以内置了几种将别的资源->Path的方法: 直接传string.(A-Z,0-9 "." &qu

  • Android自定义View仿支付宝输入六位密码功能

    Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android 自定义view仿支付宝咻一咻功能

    Android 自定义view仿支付宝咻一咻功能

    支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画 还有就是这是好几个圆,然后执行的动画有个延迟效果,其实这些动画是放在一起执行的,熟悉属性动画的知道已经给我们提供了同步执行动画和顺序执行动画的实现api,也会会有人说这几个view就是在onDraw()方法中画几个圆,可能会说我还要继承容器view去onLayout()方法中这些子view添加在某个特定的区域,当然

  • Android自定义View实现支付宝咻一咻效果

    Android自定义View实现支付宝咻一咻效果

    本篇文章介绍自定义View配合属性动画来实现如下的效果 实现思路挺简单: 画一个半透明的圆 实现两种动画效果,点击时扩散和不点击时扩散回收 使用线程的方式将上面两步结合起来 首先看下画半透明圆的部分 public class ClickCircleView extends View { private Bitmap bitmap; private Paint paint; private Canvas canvas; private boolean isSpreadFlag = false;//

  • Android自定义View实现微信支付密码输入框

    Android自定义View实现微信支付密码输入框

    本文实例为大家分享了Android实现微信支付密码输入框的具体代码,供大家参考,具体内容如下 效果图 项目中使用到了支付密码功能,其实这类界面是比较常用的,涉及支付密码的输入的一般都会用到对的,所以单独地把这部分抽取出来,有需要的朋友可以拿去用哈! 效果就是支付,弹出密码框,输入密码,这个过程密码不可见,并且提供一个输入完毕的监听! 这个弹出层呢,其实就是一个DialogFragment,逻辑封装在其内部 一.弹出层进出动画 (anim文件) push_bottom_in.xml <?xml v

  • Android自定义View仿支付宝芝麻信用分仪表盘

    Android自定义View仿支付宝芝麻信用分仪表盘

    先看下iOS的芝麻信用分截图 这是我做的效果,还是有点差距的 支付宝9.9版本芝麻信用分的实现 首先初始化各种画笔,默认的size,padding,小圆点. (因为实在找不到原版芝麻信用的带点模糊效果的小圆点,所以只好用这个代替) //View的默认大小 defaultSize = dp2px(250); //默认Padding大小 arcDistance = dp2px(14); //外层圆环画笔 mMiddleArcPaint = new Paint(Paint.ANTI_ALIAS_FLA

  • Android中PathMeasure仿支付宝支付动画

    Android中PathMeasure仿支付宝支付动画

    前言 在 Android 自定义 View 中,Path 可能用的比较多,PathMeasure 可能用的比较少,就我而言,以前也没有使用过 PathMeasure 这个 api,看到别人用 PathMeasure 和 ValueAnimator 结合在一起完成了很好的动画效果,于是我也学习下 PathMeasure ,此处记录下. PathMeasure 构造器: forceClosed 含义: // 创建一个 Path 对象 path = new Path(); path.moveTo(20

  • Android 自定义View手写签名并保存图片功能

    GIF压缩有问题,运行很顺滑!!! 1.自定义View--支持设置画笔颜色,画笔宽度,画板颜色,清除画板,检查是否有签名,保存画板图片(复制粘贴可直接使用) /** * Created by YyyyQ on 2020/3/5. * 电子签名 */ public class SignatureView extends View { private Context context; //X轴起点 private float x; //Y轴起点 private float y; //画笔 priva

  • Android自定义View实现选座功能

    我们在安卓开发中安卓自带的控件满足不了我们的需求,因此我们就需要用到自定义View来满足我们的需求,在这里我要讲解的是自定义View实现选座功能,在安卓中一个会使用自定义View的人一定会开发出与众不同以及美观的项目 首先,我展示一下效果 以上主要就是我们需要创建一个我们自己的View继承自Viewgroup控件并实现onMeasure以及onDraw方法 具体的代码是这样的 public class SearView extends ViewGroup { private Context co

  • Android自定义View实现水波纹扩散效果

    Android自定义View实现水波纹扩散效果

    目录 1.创建RippleView.class, 继承与View 1.1特殊属性解释 1.2新建attrs.xml文件(res/values) 1.3初始化画笔 2.开始绘制onDraw() 效果:水波纹扩散 场景:雷达.按钮点击效果.搜索等 实现:先上效果图,之前记得支付宝有一个咻一咻,当时就是水波纹效果,实现起来一共两步,第一画内圆,第二画多个外圆,不同时创建有间隔创建然后缓慢增大外圆半径,到达最远距离时移除掉,扩散时把透明度从255-1不断赋值即可.复杂在第二步,开工. 开工 1.创建Ri

随机推荐