iOS動畫-擴散波紋效果

Mervin1024發表於2018-03-17

iOS動畫

最終效果

實現思路

動畫的表現形式是顏色以及大小的變化，整體效果可以看做多個單獨的波紋效果的疊加。因此我們可以建立多個CALayer，分別賦予CABasicAnimation動畫，組成最終的動畫效果。

因此我們先從單個波紋擴散效果來嘗試，然後根據時間差將效果疊加起來。

程式碼

1.新建動畫 View `RippleAnimationView`，動畫效果在`animationLayer`上實現。

新建RippleAnimationView類，繼承自UIView，設定擴散倍數，然後重寫- (void)drawRect:(CGRect)rect方法，在方法內部新建承載動畫的animationLayer。

#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;
}

複製程式碼

可以看看現在的效果是這樣的

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;
}
複製程式碼

現在就有種漸變的感覺了

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;
}

... ...

複製程式碼

然後效果有點……一言難盡……

真是很有紀律性的變化啊~~好吧，只需要加入動畫曲線就好了

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 極小，同時擴散倍數增大即可。

將動畫View墊在另一個圓形View之下即可實現最上方的效果。關閉背景色，重調邊框色和邊框寬度即可實現第二種效果。

最後

demo及程式碼在這裡。

個人的動畫彙總帖在這裡動畫實踐系列。

歡迎交流意見 mervin1024@163.com.

屬性動畫-波紋擴散WaveView
2019-01-07
動畫View
Android 點選波紋擴散動畫
2019-03-04
Android動畫
[Android]多層波紋擴散動畫——自定義View繪製
2019-03-04
Android動畫View
繪製聲音訊率的波紋動畫效果
2016-08-04
音訊動畫
自定義波紋動畫
2017-07-06
動畫
Flutter | 如何實現一個水波紋擴散效果的 Widget
2019-08-28
Flutter
RecyclerView點選新增波紋效果
2021-09-09
View
漪漣波紋效果 css3 animation
2019-01-15
CSSS3
CSS3 光弧擴散效果
2018-06-02
CSSS3
SVG 建立 Material Design 波紋效果按鈕
2017-10-16
SVGMaterial Design
SVG建立Material Design波紋效果按鈕
2017-10-15
SVGMaterial Design
iOS自定義UIView動畫效果
2018-02-26
iOSUIView動畫
iOS UITableViewCell的動畫效果(一)
2017-12-13
iOSUIView動畫
Android 設定主題實現點選波紋效果
2016-01-31
Android
iOS加入購物車動畫效果
2017-12-13
iOS動畫
Flutter 實現底部擴散模糊動畫（二）頁面互動
2019-08-23
Flutter動畫
Flutter 實現底部擴散模糊動畫（一）跳轉頁面
2019-08-21
Flutter動畫
css3和jQuery實現的點選出現波紋效果
2017-04-18
CSSS3jQuery
css3實現的滑鼠懸浮出現輻射波紋效果
2017-02-21
CSSS3
Gif（2）-載入檢視-波紋
2018-04-30
matlab練習程式（波紋扭曲）
2014-07-19
Matlab
iOS專案開發實戰——檢視動畫效果
2015-08-19
iOS動畫
Item點選水波紋效果
2018-11-26
jQuery 效果 – 動畫
2022-07-25
jQuery動畫
UGUI動畫效果
2017-09-01
UGUI動畫
iOS開發中動畫之點贊圖示放大效果
2017-06-25
iOS動畫
JS動畫效果——多物體動畫
2021-09-09
JS動畫
jQuery 動畫效果與動畫佇列
2018-08-14
jQuery動畫佇列
純 CSS 實現斜紋效果
2019-02-26
CSS
Android 水波紋效果的探究
2018-05-27
Android
Android水波紋效果實現
2017-11-07
Android
水紋效果(Water)源程式. (轉)
2007-12-06
jQuery 效果 – 停止動畫
2022-07-25
jQuery動畫
JavaScript元素動畫效果
2017-04-17
JavaScript動畫
「Premiere中文新手教程」水墨散開效果
2021-11-17
REM
iOS 動畫
2019-01-16
iOS動畫
iOS動畫-按鈕動畫
2016-09-14
iOS動畫
jQuery動畫效果的刪除行效果
2017-03-07
jQuery動畫

iOS動畫-擴散波紋效果

最終效果

實現思路

程式碼

1.新建動畫 View RippleAnimationView，動畫效果在animationLayer上實現。

2.建立單個擴散的動畫承載CALayer，實現擴散效果。

3. 加入背景色以及邊框色的漸變效果，將單一的縮放動畫合併為動畫組CAAnimationGroup。

4. 同時建立三個擴散動畫的CALyer，將開始動畫的時間錯開，同時新增到animationLayer上。

5. 最後加入動畫速度曲線

最後

相關文章

1.新建動畫 View `RippleAnimationView`，動畫效果在`animationLayer`上實現。

2.建立單個擴散的動畫承載`CALayer`，實現擴散效果。

3. 加入背景色以及邊框色的漸變效果，將單一的縮放動畫合併為動畫組`CAAnimationGroup`。

4. 同時建立三個擴散動畫的`CALyer`，將開始動畫的時間錯開，同時新增到`animationLayer`上。