iOS模仿安卓Material Design的涟漪动画按钮

最新推荐文章于 2020-12-04 14:39:56 发布

iOS猿

最新推荐文章于 2020-12-04 14:39:56 发布

阅读量2.2k

点赞数

分类专栏： ios开发文章标签： ios uiview 动画

本文链接：https://blog.youkuaiyun.com/qq_30286135/article/details/68945869

版权

本文介绍了如何在iOS中模仿安卓的Material Design涟漪动画按钮，通过使用UIView+UITapGestureRecognizer模拟按钮，记录点击位置并用CALayer画圆，结合CAAnimationGroup实现涟漪效果。最后在动画停止时清除动画。提供了项目的GitHub链接供下载和测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先来看看实现后的效果吧

实现思路

其实这个按钮的实现时分简单，我的思路是：
- 用UIView + UITapGestureRecognizer 来模拟实现一个按钮的效果
- 记录每次手指点击的位置，以该位置为圆心用CALayer画圆
- 采用block回调实现点击事件
- 采用CAAnimationGroup来实现组合动画(涟漪效果)
- 最后在CAAnimationDelegate中- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;方法中消除动画。

是不是很简单？
下面我们来看下代码实现

//在ZYCRippleButton.h文件中
#import <UIKit/UIKit.h>

typedef void (^ZYCRippleButtonBlock)(void);

@interface ZYCRippleButton : UIView
//用于模拟button的tittle
@property (nonatomic, strong) UILabel *textLabel;
//“涟漪”颜色
@property (nonatomic, strong) UIColor *rippleColor;
//“涟漪”的粗细
@property (nonatomic, assign) NSUInteger rippleLineWidth;
//点击回调block
@property (nonatomic, copy)   ZYCRippleButtonBlock rippleBlock;

- (void) setButtonTittle:(NSString *)tittle;
- (void) setButtonTittleColor:(UIColor *)tColor;
- (void) setButtonBackgroundColor:(UIColor *)bgColor;
- (void) setButtonTittle:(NSString *)tittle withTittleColor:(UIColor *)tColor;
- (void) setButtonTittle:(NSString *)tittle withTittleColor:(UIColor *)tColor backgroundColor:(UIColor *)bgColor;

@end

//在ZYCRippleButton.m文件中
#import "ZYCRippleButton.h"

const CGFloat ZYCRippleInitialRaius = 20;

@interface ZYCRippleButton()<CAAnimationDelegate>

@end

@implementation ZYCRippleButton

- (instancetype)initWithFrame:(CGRect)frame{
    if<

最低0.47元/天解锁文章