最终效果

实现思路

动画的表现形式是颜色以及大小的变化，整体效果可以看做多个单独的波纹效果的叠加。因此我们可以创建多个CALayer，分别赋予CABasicAnimation动画，组成最终的动画效果。

因此我们先从单个波纹扩散效果来尝试，然后根据时间差将效果叠加起来。

代码

1.新建动画 View RippleAnimationView，动画效果在animationLayer上实现。

新建RippleAnimationView类，继承自UIView，设置扩散倍数，然后重写- (void)drawRect:(CGRect)rect方法，在方法内部新建承载动画的animationLayer。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#import
@interface RippleAnimationView : UIView
/**
 设置扩散倍数。默认1.423倍
 */
@property (nonatomic, assign) CGFloat multiple;
- (instancetype)initWithFrame:(CGRect)frame;
@end
@implementation RippleAnimationView
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
     
    if (self) {
        self.backgroundColor = [UIColor clearColor];
       _multiple = 1.423;
    }
     
    return self;
}
- (void)drawRect:(CGRect)rect {
     
    CALayer *animationLayer = [CALayer layer];
     
    // 加入动画
     
    [self.layer addSublayer:animationLayer];
}

2.创建单个扩散的动画承载CALayer，实现扩散效果。

首先实现缩放动画

1
2
3
4
5
6
7
8
9
10
- (CABasicAnimation *)scaleAnimation {
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
     
    scaleAnimation.fromValue = @1;
    scaleAnimation.toValue = @(_multiple);
    scaleAnimation.beginTime = CACurrentMediaTime();
    scaleAnimation.duration = 3;
    scaleAnimation.repeatCount = HUGE;// 重复次数设置为无限
    return scaleAnimation;
}

新建CALayer，并在layer上加载动画。然后将这个Layer放在animationLayer上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
- (void)drawRect:(CGRect)rect {
     
    CALayer *animationLayer = [CALayer layer];
     
    // 新建缩放动画
    CABasicAnimation *animation = [self scaleAnimation];
     
    // 新建一个动画 Layer，将动画添加上去
    CALayer *pulsingLayer = [self pulsingLayer:rect animation:animation];
     
    //将动画 Layer 添加到 animationLayer
    [animationLayer addSublayer:pulsingLayer];
     
    [self.layer addSublayer:animationLayer];
}
- (CALayer *)pulsingLayer:(CGRect)rect animation:(CABasicAnimation *)animation {
    CALayer *pulsingLayer = [CALayer layer];
     
    pulsingLayer.borderWidth = 0.5;
    pulsingLayer.borderColor = [UIColor blackColor].CGColor;
    pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
    pulsingLayer.cornerRadius = rect.size.height / 2;
    [pulsingLayer addAnimation:animation forKey:@"plulsing"];
     
    return pulsingLayer;
}

可以看看现在的效果是这样的

3. 加入背景色以及边框色的渐变效果，将单一的缩放动画合并为动画组CAAnimationGroup。

（ps: 除了改变背景色，还要设置并改变边框色的更主要原因是去除锯齿）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// 设置一个初始化颜色的宏
#define ColorWithAlpha(r,g,b,a) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a]
- (void)drawRect:(CGRect)rect {
     
    CALayer *animationLayer = [CALayer layer];
     
    // 这里同时创建[缩放动画、背景色渐变、边框色渐变]三个简单动画
    NSArray *animationArray = [self animationArray];
     
    // 将三个动画合并为一个动画组
    CAAnimationGroup *animationGroup = [self animationGroupAnimations:animationArray];
     
    //修改方法，将原先添加的动画由“简单动画”改为“动画组”
    CALayer *pulsingLayer = [self pulsingLayer:rect animation:animationGroup];
     
    //将动画 Layer 添加到 animationLayer
    [animationLayer addSublayer:pulsingLayer];
    [self.layer addSublayer:animationLayer];
}
- (NSArray *)animationArray {
    NSArray *animationArray = nil;
     
    CABasicAnimation *scaleAnimation = [self scaleAnimation];
    CAKeyframeAnimation *borderColorAnimation = [self borderColorAnimation];
    CAKeyframeAnimation *backgroundColorAnimation = [self backgroundColorAnimation];
    animationArray = @[scaleAnimation, backgroundColorAnimation, borderColorAnimation];
     
    return animationArray;
}
- (CAAnimationGroup *)animationGroupAnimations:(NSArray *)array {
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
     
    animationGroup.beginTime = CACurrentMediaTime();
    animationGroup.duration = 3;
    animationGroup.repeatCount = HUGE;
    animationGroup.animations = array;
    animationGroup.removedOnCompletion = NO;
    return animationGroup;
}
- (CABasicAnimation *)scaleAnimation {
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
     
    scaleAnimation.fromValue = @1;
    scaleAnimation.toValue = @(_multiple);
    return scaleAnimation;
}
// 使用关键帧动画，使得颜色动画不要那么的线性变化
- (CAKeyframeAnimation *)backgroundColorAnimation {
    CAKeyframeAnimation *backgroundColorAnimation = [CAKeyframeAnimation animation];
     
    backgroundColorAnimation.keyPath = @"backgroundColor";
    backgroundColorAnimation.values = @[(__bridge id)ColorWithAlpha(255, 216, 87, 0.5).CGColor,
                                        (__bridge id)ColorWithAlpha(255, 231, 152, 0.5).CGColor,
                                        (__bridge id)ColorWithAlpha(255, 241, 197, 0.5).CGColor,
                                        (__bridge id)ColorWithAlpha(255, 241, 197, 0).CGColor];
    backgroundColorAnimation.keyTimes = @[@0.3,@0.6,@0.9,@1];
    return backgroundColorAnimation;
}
- (CAKeyframeAnimation *)borderColorAnimation {
    CAKeyframeAnimation *borderColorAnimation = [CAKeyframeAnimation animation];
     
    borderColorAnimation.keyPath = @"borderColor";
    borderColorAnimation.values = @[(__bridge id)ColorWithAlpha(255, 216, 87, 0.5).CGColor,
                                    (__bridge id)ColorWithAlpha(255, 231, 152, 0.5).CGColor,
                                    (__bridge id)ColorWithAlpha(255, 241, 197, 0.5).CGColor,
                                    (__bridge id)ColorWithAlpha(255, 241, 197, 0).CGColor];
    borderColorAnimation.keyTimes = @[@0.3,@0.6,@0.9,@1];
    return borderColorAnimation;
}
- (CALayer *)pulsingLayer:(CGRect)rect animation:(CAAnimationGroup *)animationGroup {
    CALayer *pulsingLayer = [CALayer layer];
     
    pulsingLayer.borderWidth = 0.5;
    pulsingLayer.borderColor = ColorWithAlpha(255, 216, 87, 0.5).CGColor;
    pulsingLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
    pulsingLayer.cornerRadius = rect.size.height / 2;
    [pulsingLayer addAnimation:animationGroup forKey:@"plulsing"];
    return pulsingLayer;
}

现在就有种渐变的感觉了

4. 同时创建三个扩散动画的CALyer，将开始动画的时间错开，同时添加到animationLayer上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 设置静态常量 pulsingCount ，表示 Layer 的数量
static NSInteger const pulsingCount = 3;
// 设置静态常量 animationDuration ，表示动画时间
static double const animationDuration = 3;
- (void)drawRect:(CGRect)rect {
     
    CALayer *animationLayer = [CALayer layer];
     
    // 利用 for 循环创建三个动画 Layer
    for (int i = 0; i < pulsingCount; i++) {
        NSArray *animationArray = [self animationArray];
         
        // 通过传入参数 i 计算，错开动画时间
        CAAnimationGroup *animationGroup = [self animationGroupAnimations:animationArray index:i];
        CALayer *pulsingLayer = [self pulsingLayer:rect animation:animationGroup];
        [animationLayer addSublayer:pulsingLayer];
    }
    [self.layer addSublayer:animationLayer];
}
... ...
- (CAAnimationGroup *)animationGroupAnimations:(NSArray *)array index:(int)index {
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
     
    animationGroup.beginTime = CACurrentMediaTime() + (double)(index * animationDuration) / (double)pulsingCount;
    animationGroup.duration = animationDuration;
    animationGroup.repeatCount = HUGE;
    animationGroup.animations = array;
    animationGroup.removedOnCompletion = NO;
    return animationGroup;
}
... ...

然后效果有点……一言难尽……

真是很有纪律性的变化啊~~好吧，只需要加入动画曲线就好了

5. 最后加入动画速度曲线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
... ...
- (CAAnimationGroup *)animationGroupAnimations:(NSArray *)array index:(int)index {
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
     
    animationGroup.beginTime = CACurrentMediaTime() + (double)(index * animationDuration) / (double)pulsingCount;
    animationGroup.duration = animationDuration;
    animationGroup.repeatCount = HUGE;
    animationGroup.animations = array;
    animationGroup.removedOnCompletion = NO;
     
    // 添加动画曲线。关于其他的动画曲线，也可以自行尝试
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    return animationGroup;
}
... ...

如果需要点扩散，那就设置 frame 极小，同时扩散倍数增大即可。

将动画View垫在另一个圆形View之下即可实现最上方的效果。关闭背景色，重调边框色和边框宽度即可实现第二种效果。

iOS动画-扩散波纹效果的更多相关文章

  1. css3动画图片波纹效果

    这里的图片很有特点,下面有演示图片样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  2. ios 动画效果CATransition笔记

    初学ios开发,很多概念还不清楚,所以只有边学边做例子.又怕学了后面忘了前面,因此用自己的博客来纪录自己的学习历程,也是对自己学习不要懈怠做个监督. 刚学ios做动画效果.因为ios封装得很好,实现i ...

  3. iOS动画开发之五——炫酷的粒子效果

    在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...

  4. ios点击产生波纹效果

    ios点击产生波纹效果 by 伍雪颖 - (void)viewDidLoad { [super viewDidLoad]; RippleView = [[UIView alloc] initWithF ...

  5. iOS开发——图形编程OC篇&粘性动画以及果冻效果

    粘性动画以及果冻效果 在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲 ...

  6. IOS 动画专题 --iOS核心动画

    iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看 ...

  7. iOS动画进阶 - 手摸手教你写ShineButton动画

    移动端访问不佳,请访问我的个人博客 前段时间在github上看见一个非常nice的动画效果,可惜是安卓的,想着用swift写一个iOS版的,下下来源代码研究了一下,下面是我写代码的心路历程 先上图和d ...

  8. Android自定义组件系列【14】——Android5.0按钮波纹效果实现

    今天任老师发表了一篇关于Android5.0中按钮按下的波纹效果实现<Android L中水波纹点击效果的实现>,出于好奇我下载了源代码看了一下效果,正好手边有一个Nexus手机,我结合实 ...

  9. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

随机推荐

  1. POJ - 3045 Cow Acrobats （二分，或者贪心）

    一开始是往二分上去想的,如果risk是x,题目要求则可以转化为一个不等式,Si + x >= sigma Wj ,j表示安排在i号牛上面的牛的编号. 如果考虑最下面的牛那么就可以写成 Si + ...

  2. 求最大公约数和最小公倍数_python

    """写两个函数,分别求两个整数的最大公约数和最小公倍数,调用这两个函数,并输出结果.两个整数由键盘输入.""" ''' 设两个整数u和v, ...

  3. cout对象一些常用方法的总结

    cout.precision(n); 这个方法的功能是,设置精度为n,返还值是上一次的设置精度. #include <iostream> using namespace std; int ...

  4. 海量数据GPS定位数据库表设计

    在开发工业系统的数据采集功能相关的系统时,由于数据都是定时上传的,如每20秒上传一次的时间序列数据,这些数据在经过处理和计算后,变成了与时间轴有关的历史数据(与股票数据相似,如下图的车辆行驶过程中的油 ...

  5. Ubuntu 14.04 LTS 触摸板无法使用

    c16b上,触摸板不能使用,查找后发现,需要在加载驱动时增加参数. 如下所说: 1.使用以下命令后,触摸板可以使用 sudo modprobe -r psmouse sudo modprobe psm ...

  6. （79）zabbix key总是not supported的解决方法

    zabbix定义好key之后,总是会出现Not supported,看到这个问题,大家不用着急,问题其实很容易解决,首先鼠标点击当前key的大红叉上,会显示出报错内容. 常见的有: 1. zabbix ...

  7. PHP去掉字符串中的数字

    这个比较简单,但是也有些需要注意的地方,先贴代码 $class=preg_replace("\\d+",'', $res); 需要使用preg_replace函数,但是只是这么写的 ...

  8. PHP 优化

    来源:歪麦博客 https://www.awaimai.com/1050.html 1 字符串 1.1 少用正则表达式 能用PHP内部字符串操作函数的情况下,尽量用他们,不要用正则表达式, 因为其效率 ...

  9. 动态拼接SQL语句

    1.参考官方文档 ? if:字符判断 ? choose (when, otherwise):分支选择 ? trim (where, set):字符串截取:其中where标签封装查询条件,set标签封装 ...

  10. 问题 B: 分组统计

    分组统计 问题 B: 分组统计时间限制: 1 Sec 内存限制: 32 MB 提交: 416 解决: 107 [提交][状态][讨论版][命题人:外部导入] 题目描述 先输入一组数,然后输入其分组,按 ...