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的深浅拷贝

    详解iOS的深浅拷贝

    本文详细介绍了IOS中的三种拷贝方式,对iOS的深浅拷贝有疑问的朋友们可以参考下本文。
    2016-08-08
  • iOS仿微信摇一摇功能

    iOS仿微信摇一摇功能

    这篇文章主要为大家详细介绍了iOS仿微信摇一摇功能的实现方法 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • MAC系统下安装FFmpeg的图文教程

    MAC系统下安装FFmpeg的图文教程

    这篇文章主要给大家介绍了关于如何在MAC系统下安装FFmpeg的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • ios动态设置lbl文字标签的高度

    ios动态设置lbl文字标签的高度

    本文给大家分享的是ios动态设置lbl文字标签的高度宽度的方法,一共给大家汇总了3种方法,小伙伴们根据自己的项目需求自由选择。
    2015-05-05
  • 开发绘图、手势综合App注意点

    开发绘图、手势综合App注意点

    本篇文章主要给大家详细讲述了在IOS开发绘图、手势综合App容易遇到的坑以及注意事项等内容,有兴趣的朋友参考下吧。
    2018-02-02
  • iOS输入框(UITextField)密码明暗文切换方法

    iOS输入框(UITextField)密码明暗文切换方法

    这篇文章主要介绍了iOS输入框(UITextField)密码明暗文的切换方法,代码简短实用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • iOS 隐私权限和通过openURL实现跳转实例

    iOS 隐私权限和通过openURL实现跳转实例

    这篇文章主要介绍了iOS 隐私权限和通过openURL实现跳转实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 详解iOS应用程序内购/内付费(一)

    详解iOS应用程序内购/内付费(一)

    这篇文章主要介绍了详解iOS应用程序内购/内付费(一),小编觉得挺不错的,现在分享给大家,也给大家做个参考。
    2016-12-12
  • iOS实现手势解锁操作

    iOS实现手势解锁操作

    这篇文章主要为大家详细介绍了iOS实现手势解锁操作功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • IOS购物车界面实现效果示例

    IOS购物车界面实现效果示例

    本篇文章主要介绍了IOS购物车界面实现效果示例,有需要了解的朋友可参考。希望此文章对各位有所帮助。
    2017-02-02

最新评论