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

MrLee 5月前 269 0

闲暇时间做了一个反馈手指点击屏幕的效果,用到了CAShapeLayer和基本的动画知识,模拟器上效果如下:

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


fingerWave.gif
  • 这种效果使用在某些页面上肯定会给用户更有趣的体验,特别是面向儿童的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我的代码,做出很多其他的效果,比如改成其他的波纹颜色。

来自:http://www.jianshu.com/p/35e6f53ca0fe




本文固定链接:http://www.ithtw.com/thread-11377.htm
转载请注明:MrLee 5月前 于 IT十万个为什么 发表
最新回复 (0)
回复
登录发表 or 还没有账号?去注册