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

所属分类: 软件编程 / IOS 阅读数: 217
收藏 0 赞 0 分享

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

具体的实现代码如下

首先监听控制器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开发笔记--详解UILabel的相关属性设置

这篇文章主要介绍了iOS开发笔记--详解UILabel的相关属性设置,对初学者具有一定的参考价值,有需要的可以了解一下。
收藏 0 赞 0 分享

iOS中获取系统相册中的图片实例

这篇文章主要介绍了iOS中获取系统相册中的图片实例,具有一定的参考价值没有需要的朋友可以了解一下。
收藏 0 赞 0 分享

iOS 检测网络状态的两种方法

一般有Reachability和AFNetworking监测两种方式,都是第三方的框架,下文逐一详细给大家讲解,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

IOS 性能优化中离屏渲染

本文主要介绍了IOS 性能优化中离屏渲染的资料,提供了几种方法讲解了优化,有需要的小伙伴可以参考下
收藏 0 赞 0 分享

iOS获取当前设备型号等信息(全)包含iPhone7和iPhone7P

这篇文章主要介绍了iOS获取当前设备型号设备信息的总结包含iPhone7和iPhone7P,包括ios7之前之后的获取方式,本文接的非常详细,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS实现爆炸的粒子效果示例代码

之前在网上看到了一个Android实现的爆炸效果,感觉非常不错,所以自己尝试用iOS来实现下效果,现在将实现的过程、原理以及遇到的问题分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧。
收藏 0 赞 0 分享

iOS毕业设计之天气预报App

这篇文章主要为大家详细介绍了iOS毕业设计之天气预报App,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS轻点、触摸和手势代码开发

这篇文章主要为大家详细介绍了iOS轻点、触摸和手势代码开发,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS 实现多代理的方法及实例代码

这篇文章主要介绍了iOS 实现多代理的方法及实例代码的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS文字渐变色效果的实现方法

在大家日常开发iOS的过程中,可能会遇到要实现文字渐变色的效果,这篇文章文章通过示例代码和详细的步骤介绍了如何利用iOS实现文字渐变色的效果,实现后的很不错,感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享
查看更多