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

   <p>闲暇时间做了一个反馈手指点击屏幕的效果,用到了CAShapeLayer和基本的动画知识，模拟器上效果如下：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/71e4d9f7be1179aa95807197b85d4ef4.gif"></p>    <p style="text-align:center">fingerWave.gif</p>    <ul>     <li> <p>这种效果使用在某些页面上肯定会给用户更有趣的体验，特别是面向儿童的app中。</p> </li>    </ul>    <h2><strong>具体的实现代码如下</strong></h2>    <ul>     <li> <p>首先监听控制器view的Tap事件</p> <pre>  <code class="language-objectivec">UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onTap:)];    [self.view addGestureRecognizer:tap];</code></pre> <pre>  <code class="language-objectivec">- (void)onTap:(UITapGestureRecognizer*)sender {    CGPoint center = [sender locationInView:sender.view];    [FingerWaveView  showInView:self.view center:center];  }</code></pre> </li>     <li> <p>FingerWaveView.h</p> <pre>  <code class="language-objectivec">#import <UIKit/UIKit.h>  @interface FingerWaveView : UIView  + (instancetype)showInView:(UIView *)view center:(CGPoint)center;  @end</code></pre> </li>     <li> <p>FingerWaveView.m</p> <pre>  <code class="language-objectivec">#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</code></pre> </li>     <li> <p>大家也可以DIY我的代码，做出很多其他的效果，比如改成其他的波纹颜色。</p> </li>    </ul>    <p> </p>    <p>来自：http://www.jianshu.com/p/35e6f53ca0fe</p>    <p> </p>