iOS 水波纹动画

春节后经过数天的努力上架了公司一个项目后，暂时又进入了空闲期，于是就着手整理一下项目中遇到的一些有意思的需求。废话不多说，先上效果图：

美工MM提供的效果图

首先我们先创建一个工程，然后创建一个文件继承UIView,命名为Water。

在ViewController.h的viewDidLoad方法里面添加如下代码：

self.centerRadarView = [[Water alloc] initWithFrame:CGRectMake(0.25*[UIScreen mainScreen].bounds.size.width, 0.17*[UIScreen mainScreen].bounds.size.height, 0.48*[UIScreen mainScreen].bounds.size.width, 0.26*[UIScreen mainScreen].bounds.size.height)];

[self.view addSubview:_centerRadarView];

这里是为了在视图里面添加一个中心视图，在Water文件里创建的波纹动画可以以该视图为中心点做动画。然后我们可以在这个子视图上根据具体需求添加我们想要的东西，例如效果图里的倒计时。

然后在Water的.m文件里添加以下代码就行啦~

- (void) drawRect : (CGRect) rect {

[super drawRect:rect];

[[UIColor magentaColor] setFill];//中间部位的背景颜色

UIRectFill(rect);

NSInteger pulsingCount = 10;

double animationDuration = 8;

CALayer * animationLayer = [CALayer layer];

for (int i = 0; i < pulsingCount; i++) {

CALayer * pulsingLayer = [CALayer layer];

pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);

pulsingLayer.borderColor = [UIColor colorWithRed:0.96 green:0.65 blue:0.05 alpha:1].CGColor;

pulsingLayer.borderWidth = 18;

pulsingLayer.cornerRadius = rect.size.height / 2;

CAMediaTimingFunction * defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];

CAAnimationGroup * animationGroup = [CAAnimationGroup animation];

animationGroup.fillMode = kCAFillModeBackwards;

animationGroup.beginTime = CACurrentMediaTime() + (double)i * animationDuration / (double)pulsingCount;

animationGroup.duration = animationDuration;

animationGroup.repeatCount = HUGE;

animationGroup.timingFunction = defaultCurve;

CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

scaleAnimation.fromValue = @1;

scaleAnimation.toValue = @3.2;

CAKeyframeAnimation * opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];

opacityAnimation.values= @[@0, @0.1, @0.2, @0.3, @0.4, @0.5, @0.6, @0.7, @0.8, @0.9, @1];

animationGroup.animations = @[scaleAnimation, opacityAnimation];

[pulsingLayer addAnimation:animationGroup forKey:@"plulsing"];

[animationLayer addSublayer:pulsingLayer];

}

[self.layer addSublayer:animationLayer];

}

到此就大功告成了！（此处应有“啪啪啪...”）

放上我的效果图（自我感觉和美工MM需求的差不多，逃~~~）：

demo效果图

谢谢阅读，喜欢的可以扫一扫订阅我的公众号：

好了，我要去“修仙”了~~哈哈