仿支付宝的付款转圈动画---CAShapeLayer、UIBezierPath、CABasicAnimation

最新推荐文章于 2022-12-27 15:35:10 发布
原创 最新推荐文章于 2022-12-27 15:35:10 发布 · 3.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iOS #动画 #支付宝 #支付 #控件

本文介绍了一个仿照支付宝支付过程中的动画效果所封装的按钮组件。该组件能够在支付中及支付成功时显示不同的动画，并提供了支付完成后调用block的方法。

支付宝在支付过程中，支付按钮会有动画效果。最终效果如下图所示。

支付过程中：


支付成功：



觉得挺实用，就封装成了一个按钮，方便日后使用，话不多说，上代码。


先来看一下封装好的button的.h文件中暴露的方法。


一 支付中代码



二 支付成功代码


三 动画结束之后 调用block方法



微信小程序顶部滚动通知 仿支付宝顶部通知 小程序滚动文字
Taurus_666
05-06 2297
先呈上效果图 主要代码 //wxml部分 <view class="scroll-top" hidden="{{isHiddenMsg}}"> <scroll-view> <view class="msg-icon notice-icon"> <image src="../../../static/images/show-info...
【核心动画-转场动画-CATransition Objective-C语言】
最新发布
madoca的博客
06-05 1254
【核心动画-转场动画-CATransition Objective-C语言】
【详细】小程序仿支付宝APP实现
m0_37218227的博客
06-18 8721
展示效果，做的支付宝首页，代码如下，本质是探究flex布局的用法 wxss css代码 /**index.wxss**/ .blue-group{ background: #1e82d2; padding: 20rpx; } .blue-group .top-group{ height: 58rpx; width: 100%; display: flex; } .top-group .search-group{ flex: 1; display: flex; }
玩转PathMeasure之自定义支付结果动画 路径动画
chuyouyinghe的专栏
03-04 173
概述 最近在研究Android的路径动画，恕我直言，PathMeasure是个神器，可以帮助我们绘制任意的路径，只要你能draw出来的Path，它都能绘制出来，你可能会问，既然drawPath都可以了，要它何用？ PathMeasure的强大之处在于它能够通过根据起点和终点截取某一段路径进行绘制，可以理解为对Path片段的绘制，然你可能还是会说： 但如果再结合属性动画，那简直就可以为所欲为了。 突然想到之前遇到过的一些支付场景经常会有一个支付状态的展示动画，就是一直循环转圈然后最终打勾或者打叉的效
支付成功 对勾动画
12-16
基于Bezier绘制的类似支付宝支付成功的动画，有这个需求的朋友们可以参考或者提出宝贵意见。
支付宝小程序使用lottie加载动画
weixin_44705979的博客
12-27 1539
uniapp开发支付宝小程序使用lottiefiles动画
android 支付动画,Android—ValueAnimator+PathMeasure实现支付宝支付动画
weixin_32384723的博客
05-25 440
我的优快云: ListerCi我的简书: 东方未曦一、效果展示动画分为三种状态：Loading、Success、Fail，可以点击按钮切换状态。加载后成功的效果如下所示。Loading->Success.gif加载后失败的效果如下所示。Loading->Fail.gif二、前置知识1. ValueAnimatorValueAnimator是属性动画的一种，它不直接改变View的属性，...
iOS 动画解析 支付宝支付动画 上
孟宪亮的技术博客
04-17 4252
平时在用支付宝付款时，会有一个支付中的动画和一个支付完成的动画。这篇博客主要分析一下 支付中 的动画效果，效果如下：一、动画解析为了方便观察，添加了放慢加载动画的速度并添加辅助线：从图中可以看出：加载圆弧运动轨迹可分为前半段和后半段；并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化；前半段: 从-0.5π到π，这一段运动中速度较快；StartAngle不变，始
易语言图像转圈源码-易语言
06-13
在这个“易语言图像转圈源码-易语言”资源中，我们可以了解到如何在易语言环境下实现图像旋转的编程技术。 首先，我们要明白“图像转圈”这个概念在编程中通常指的是图像围绕其中心点进行旋转。这个过程涉及到图形...
1803右键转圈补丁-自动权限Bata3.BAT
09-08
1803右键转圈补丁-自动权限Bata3.BAT
模仿支付宝首页的下拉刷新功能
11-18
用ViewGroup类实现模仿支付宝首页的下拉滑动刷新功能。
完整的仿输入支付密码界面，带完成支付后的动画。扩展性高，界面简单，清晰易懂
11-08
完整的仿输入支付密码界面，带完成支付后的动画。扩展性高，界面简单，清晰易懂 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
ios-支付宝首页动画效果.zip
07-11
支付宝首页，各个模块增加删除，位置移动，一种比较简单，更容易理解的Demo，初次上传，多多指教，第一个版本，后续会维护更新。
swift-基于FreeStreamer播放器二次封装。仿网易云封面图旋转转圈音乐动效。全局基于ASDK
08-15
4. **UI交互**：本项目中的亮点是“仿网易云封面图旋转转圈音乐动效”。这种动效通常是通过Core Animation或者UIKit实现的，结合CAPropertyAnimation或CADisplayLink来控制动画的时间和速度，实现封面图片的旋转效果...
swift-lodingAnimation旋转圈
08-15
在Swift开发中，加载动画（Loding Animation）是提升用户体验的重要元素之一，它可以在应用程序进行后台处理时向用户展示一个视觉反馈，表明程序正在运行并未挂起。"Swift-LodingAnimation旋转圈"就是一个专注于实现...
仿支付宝笑脸刷新加载动画的实现
LHavoc的博客
11-28 6550
看到支付宝的下拉刷新有一个笑脸的动画，因此自己也动手实现一下。效果图如下： 一、总体思路1、静态部分的笑脸。这一部分的笑脸就是一个半圆弧，加上两颗眼睛，这部分比较简单，用于一开始的展示。2、动态笑脸的实现。2.1、先是从底部有一个圆形在运动，运动在左眼位置时把左眼给绘制，同时圆形继续运动，运动到右眼位置时绘制右眼，圆形继续运动到最右边的位置。 2.2、当上面的圆形运动到最右边时候，开始不断绘制脸
动画特效二十：仿支付宝转账动画
秋恨雪
12-19 4703
本人录制技术视频地址：https://edu.youkuaiyun.com/lecturer/1899 欢迎观看。最近比较忙碌，有一段时间没有更新自己的博客了。这一节为大家介绍的动画特效是: 仿支付宝转账动画。 先看看最终效果图。处理这种多变的动画，我们的分析思路就是各个击破。在这里，我将这个动画分解为三组进行处理：1.  一小段弧线的运动，在效果图中转了3圈。2. 绘制一个完整的圆，在效果图中转了1圈。3....
iOS开发：仿支付宝界面拖拽按钮动画
踏莎行的博客
06-12 5759
两种方式实现模仿支付宝生活界面可拖拽定制方块button的动画效果，当长按方块，可以拖拽方块到新的位置，其他的方块自动移动布局，也可以添加、删除方块。 预览 思路 两种动画效果：一种是移动方块时与响铃方块交换位置，另一种是记录索引，方块到达新位置时其他方块依次迁移用到了ios框架的手势识别维持方块内部数据索引与界面布局一致 定义一个方块button类
支付宝支付成功动画（Path）
BoyiKia的博客
03-12 1654
1.效果展示 2.实现步骤 public PathMeasureView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); //1.关闭硬件加速（否则有问题） set...
GWLIndicator: Objective-C实现的自定义加载动画
GWLIndicator是一个自定义的视图组件，专门设计用来展示动画效果，类似于操作系统中的"菊花"（通常指等待或加载时显示的转圈动画）。开发者可以将此组件集成到iOS应用中，以提供一致的用户界面反馈，表明后台进程或...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值