iOS動畫-擴散波紋效果
最終效果
實現思路
動畫的表現形式是顏色以及大小的變化，總體效果能夠看作多個單獨的波紋效果的疊加。所以咱們能夠建立多個CALayer，分別賦予CABasicAnimation動畫，組成最終的動畫效果。git
所以咱們先從單個波紋擴散效果來嘗試，而後根據時間差將效果疊加起來。 github
代碼
1.新建動畫 View RippleAnimationView，動畫效果在animationLayer上實現。
新建RippleAnimationView類，繼承自UIView，設置擴散倍數，而後重寫- (void)drawRect:(CGRect)rect方法，在方法內部新建承載動畫的animationLayer。bash
#import <UIKit/UIKit.h>
@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，實現擴散效果。
- 首先實現縮放動畫
- (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上。
- (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;
}
複製代碼
能夠看看如今的效果是這樣的post
3. 加入背景色以及邊框色的漸變效果，將單一的縮放動畫合併爲動畫組CAAnimationGroup。
（ps: 除了改變背景色，還要設置並改變邊框色的更主要緣由是去除鋸齒）動畫
// 設置一個初始化顏色的宏
#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;
}
複製代碼
如今就有種漸變的感受了ui
4. 同時建立三個擴散動畫的CALyer，將開始動畫的時間錯開，同時添加到animationLayer上。
// 設置靜態常量 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;
}
... ...
複製代碼
而後效果有點……一言難盡……atom
真是頗有紀律性的變化啊~~好吧，只須要加入動畫曲線就行了spa
5. 最後加入動畫速度曲線
... ...
- (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 極小，同時擴散倍數增大便可。3d
將動畫View墊在另外一個圓形View之下便可實現最上方的效果。關閉背景色，重調邊框色和邊框寬度便可實現第二種效果。code
最後
demo及代碼 在這裏。
我的的動畫彙總帖在這裏 動畫實踐系列。
歡迎交流意見 mervin1024@163.com.
相關文章
- 1. iOS波紋動畫
- 2. 水波擴散效果(shader)
- 3. HTML動畫實現波紋效果
- 4. 水紋波浪效果動畫
- 5. 騰訊地圖，附着物的擴散水波紋效果
- 6. Flutter | 如何實現一個水波紋擴散效果的 Widget
- 7. html5 +css3 點擊後水波紋擴散效果 兼容移動端
- 8. 【移動開發】Android波紋動畫效果實現
- 9. Unity 實現水紋波動效果
- 10. Android水波紋效果
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • ionic 加載動畫 - ionic 教程
- • 算法總結-滑動窗口
- • SpringBoot中properties文件不能自動提示解決方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章