iOS实现手指点击出现波纹的效果

 更新时间:2016年12月04日 11:13:46   作者:尹啟星  
最近在闲暇的时间做了一个反馈手指点击屏幕的效果,用到了CAShapeLayer和基本的动画知识,实现的效果很赞,这种效果使用在某些页面上肯定会给用户更有趣的体验,特别是面向儿童的app中。文中给出了详细的示例代码,感兴趣的朋友们下面来一起看看吧。

实现来看看模拟器上效果:

具体的实现代码如下

首先监听控制器view的Tap事件

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onTap:)];
 [self.view addGestureRecognizer:tap];
- (void)onTap:(UITapGestureRecognizer*)sender {
 CGPoint center = [sender locationInView:sender.view];
 [FingerWaveView showInView:self.view center:center];
}

FingerWaveView.h

#import <UIKit/UIKit.h>
@interface FingerWaveView : UIView
+ (instancetype)showInView:(UIView *)view center:(CGPoint)center;
@end

FingerWaveView.m

#import "FingerWaveView.h"
@interface FingerWaveView () <CAAnimationDelegate>
{
 CGSize waveSize;
 NSTimeInterval duration;
}
@end
@implementation FingerWaveView
- (instancetype)initWithFrame:(CGRect)frame{
 self=[super initWithFrame:frame];
 if (self) {
  waveSize = CGSizeMake(150, 150);
  duration = 1.0;
 }
 return self;
}
+ (instancetype)showInView:(UIView *)view center:(CGPoint)center {
 FingerWaveView *waveView = [FingerWaveView new];
 [waveView setframeWithCenter:center];
 [view addSubview:waveView];
 return waveView;
}
- (void)didMoveToSuperview{
 CAShapeLayer *waveLayer = [CAShapeLayer new];
 waveLayer.backgroundColor = [UIColor clearColor].CGColor;
 waveLayer.opacity = 0.6;
 waveLayer.fillColor = [UIColor whiteColor].CGColor;
 [self.layer addSublayer:waveLayer];

 [self startAnimationInLayer:waveLayer];
}
- (void)startAnimationInLayer:(CALayer *)layer{
 UIBezierPath *beginPath = [UIBezierPath bezierPathWithArcCenter:[self pathCenter] radius:[self animationBeginRadius] startAngle:0 endAngle:M_PI*2 clockwise:YES];
 UIBezierPath *endPath = [UIBezierPath bezierPathWithArcCenter:[self pathCenter] radius:[self animationEndRadius] startAngle:0 endAngle:M_PI*2 clockwise:YES];

 CABasicAnimation *rippleAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
 rippleAnimation.delegate = self;
 rippleAnimation.fromValue = (__bridge id _Nullable)(beginPath.CGPath);
 rippleAnimation.toValue = (__bridge id _Nullable)(endPath.CGPath);
 rippleAnimation.duration = duration;

 CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
 opacityAnimation.delegate = self;
 opacityAnimation.fromValue = [NSNumber numberWithFloat:0.6];
 opacityAnimation.toValue = [NSNumber numberWithFloat:0.0];
 opacityAnimation.duration = duration;

 [layer addAnimation:rippleAnimation forKey:@"rippleAnimation"];
 [layer addAnimation:opacityAnimation forKey:@"opacityAnimation"];
}
- (void)setframeWithCenter:(CGPoint)center{
 CGRect frame = CGRectMake(center.x-waveSize.width*0.5, center.y-waveSize.height*0.5, waveSize.width, waveSize.height);
 self.frame = frame;;
}
- (CGFloat)animationBeginRadius{
 return waveSize.width*0.5*0.2;
}
- (CGFloat)animationEndRadius{
 return waveSize.width*0.5;
}
- (CGPoint)pathCenter{
 return CGPointMake(waveSize.width*0.5, waveSize.height*0.5);
}
#pragma mark - CAAnimationDelegate
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
 if (flag) {
  [self removeFromSuperview];
 }
}
@end

总结

大家也可以DIY我的代码,做出很多其他的效果,比如改成其他的波纹颜色。以上就是这篇文章的全部内容了,希望本文的内容ui各位iOS开发者们能有所帮助,如果有疑问大家可以留言交流。

相关文章

  • 详解iOS应用开发中autoresizing尺寸自动适应属性的用法

    详解iOS应用开发中autoresizing尺寸自动适应属性的用法

    这篇文章主要介绍了iOS应用开发中autoresizing尺寸自动适应属性的用法,文中讲解了使用代码和Storyboard两种方式调节autoresizing的方法,示例代码为Objective-C,需要的朋友可以参考下
    2016-03-03
  • 详解iOS设计中的UIWindow使用

    详解iOS设计中的UIWindow使用

    这篇文章主要介绍了iOS设计中的UIWindow使用,包括UIWindowLevel和KeyWindow两个大的方面的讲解,需要的朋友可以参考下
    2015-09-09
  • iOS开发定时器的三种方法分享

    iOS开发定时器的三种方法分享

    相信在大家开发过程中,常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法。在这个时候,我们就需要用到定时器。然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?下面就通过这篇文章来一起学习学习吧。
    2016-09-09
  • iOS之加载Gif图片的方法

    iOS之加载Gif图片的方法

    本篇文章主要介绍了iOS之加载Gif图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • iOS自定义时间滚动选择控件

    iOS自定义时间滚动选择控件

    这篇文章主要为大家详细介绍了iOS自定义时间滚动选择控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • iOS开发项目- 基于WebSocket的聊天通讯(1)

    iOS开发项目- 基于WebSocket的聊天通讯(1)

    这篇文章主要介绍了iOS开发项目- 基于WebSocket的聊天通讯,WebSocket是web通信方式的一种,有需要的可以了解一下。
    2016-11-11
  • iOS Remote Notification远程消息推送处理

    iOS Remote Notification远程消息推送处理

    这篇文章主要为大家详细介绍了iOS Remote Notification远程消息推送处理,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • iOS开发之路--仿网易抽屉效果

    iOS开发之路--仿网易抽屉效果

    本文是IOS开发之路系列的第一篇,主要讲诉了如何仿网易新闻客户端实现抽屉效果,全部源代码都分享给大家,希望对大家有所帮助
    2014-08-08
  • iOS开发之详谈属性设置readwrite、readonly、retain、copy、assign、nonatomic

    iOS开发之详谈属性设置readwrite、readonly、retain、copy、assign、nonatomic

    这篇文章主要介绍了iOS开发之详谈属性设置readwrite、readonly、retain、copy、assign、nonatomic的相关资料,需要的朋友可以参考下
    2015-10-10
  • iOS中表单列表样式键盘遮挡的解决方案

    iOS中表单列表样式键盘遮挡的解决方案

    这篇文章主要给大家介绍了关于iOS中表单列表样式键盘遮挡的解决方案,文中通过示例代码将解决的方法一步步介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2019-01-01

最新评论