最終效果
實現思路
動畫的表現形式是顏色以及大小的變化，整體效果可以看做多個單獨的波紋效果的疊加。因此我們可以創建多個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之下即可實現最上方的效果。關閉背景色，重調邊框色和邊框寬度即可實現第二種效果。