水波纹效果

水波纹效果

• Code

1.-(void)drawRect:(CGRect)rect {
2.    [super drawRect:rect];
3.    [[UIColor colorWithRed:22 / 255.0 green:163 / 255.0 blue:130 / 255.0 alpha:1] setFill];
4.    UIRectFill(rect);
5.
6.    NSInteger pulsingCount = 6; //  脉冲个数
7.    double animationDuration = 3; // 每个脉冲持续时间
8.
9.    for (int i = 0; i < pulsingCount; i++) {
10.        CALayer * pulsingLayer = [CALayer layer];
11.        pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
12.        pulsingLayer.borderColor = [UIColor whiteColor].CGColor;
13.        pulsingLayer.borderWidth = 1;
14.        pulsingLayer.cornerRadius = rect.size.height / 2;
15.
16.        CAMediaTimingFunction * easeInCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; // 控制变化速度
17.
18.        // 将一个layer的不同的动画效果组合起来
19.        CAAnimationGroup * animationGroup = [CAAnimationGroup animation];
20.        animationGroup.fillMode = kCAFillModeBackwards;
21.        animationGroup.beginTime = CACurrentMediaTime() + (double)i * animationDuration / (double)pulsingCount;
22.        animationGroup.duration = animationDuration;
23.        animationGroup.repeatCount = HUGE; // HUGE = MAXFLOAT
24.        animationGroup.timingFunction = easeInCurve;
25.
26.        CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
27.        scaleAnimation.fromValue = @0.5;
28.        scaleAnimation.toValue = @2.2;
29.
30.        // 关键帧动画
31.        CAKeyframeAnimation * opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];// 控制不透明度
32.        opacityAnimation.values = @[@1, @0.9, @0.8, @0.7, @0.6, @0.5, @0.4, @0.3, @0.2, @0.1, @0]; // 不透明度节点
33.        opacityAnimation.keyTimes = @[@0, @0.1, @0.2, @0.3, @0.4, @0.5, @0.6, @0.7, @0.8, @0.9, @1];// 指定每个节点路径的时间
34.
35.        animationGroup.animations = @[scaleAnimation, opacityAnimation];
36.        [pulsingLayer addAnimation:animationGroup forKey:@"plulsing"];
37.
38.        [self.layer addSublayer:pulsingLayer];
39.    }
40.}
41.

• effect picture