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

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

具体的实现代码如下

首先监听控制器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 
@interface FingerWaveView : UIView
+ (instancetype)showInView:(UIView *)view center:(CGPoint)center;
@end

FingerWaveView.m

#import "FingerWaveView.h"
@interface FingerWaveView () 
{
 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开发者们能有所帮助，如果有疑问大家可以留言交流。