思考

屏幕快照 2016-04-07 下午4.50.21.png

類似上圖中的水波效果怎樣實現(xiàn)？

1. 首先需要幾個圓圈；
2. 需要做放大動畫（radius）；
3. 需要做Alpha的動畫；
4. 相鄰的圓圈 做動畫時間需要有間隔；
5. 需要無限循環(huán)；

根據(jù)需求分析

1. 需要做兩個動畫，用CAAnimationGroup;
2. 需要做放大動畫，用CABasicAnimation， transform.scale.xy;
3. 需要做透明度動畫，但是不能太突兀， 用CAKeyframeAnimation ,關(guān)鍵幀動畫；
4. 圓圈不確定，需要根據(jù)需求變，這樣無法使用固定值，如果循環(huán)創(chuàng)建也不是一個好的做法，這樣我們就需要用到CAReplicatorLayer,利用它能高效生成許多相似的圖層的特性，來解決這個問題

實現(xiàn)

下面貼代碼
第一步 新建一個類 繼承于CAReplicatorLayer；

@interface DWRipplesLayer : CAReplicatorLayer

第二步 添加屬性 (屬性的配置我都以懶加載的方式寫在了getter方法中)

/**
 *  漣漪圈
 */
@property (nonatomic, strong) CALayer *roundLayer;

/**
 *  動畫組
 */
@property (nonatomic, strong) CAAnimationGroup *ripplesAnimationGroup;

/**
 *  漣漪圈半徑的初始值
 */
@property (nonatomic, assign) CGFloat fromValueForRadius;

/**
 *  漣漪圈Alpha初始值
 */
@property (nonatomic, assign) CGFloat fromValueForAlpha;

第三步 將 roundLayer 添加到self上 并做一些初始值設(shè)置

- (instancetype)init{
  if (self = [super init]) {
    [self addSublayer:self.roundLayer];
    [self setUp];
  }
  return self;
}

#pragma mark - Private Methods
- (void)setUp{

  self.roundLayer.backgroundColor = [[UIColor greenColor] CGColor];
  
  self.radius = 60;
  self.animationDuration = 3;
  self.fromValueForAlpha = 0.f;
  self.fromValueForRadius = 0.f;
  
// 必須 CAReplicatorLayer的重要特性
  self.repeatCount = INFINITY;
  self.instanceCount = 3;
  self.instanceDelay = 1;
}

第四步 配置動畫

#pragma mark - Private Methods
- (void)setUpAnimation{
  
  self.ripplesAnimationGroup.duration = self.animationDuration;
  self.ripplesAnimationGroup.repeatCount = self.repeatCount;
  self.ripplesAnimationGroup.timingFunction =  [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];;
  
  // 圓圈放大
  CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
  scaleAnimation.fromValue = @(self.fromValueForRadius);
  scaleAnimation.toValue = @1.0;
  scaleAnimation.duration = self.animationDuration;
  
  // 改變 alpha (關(guān)鍵幀動畫)
  CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
  opacityAnimation.values = @[@(self.fromValueForAlpha), @0.5, @0];
  opacityAnimation.keyTimes = @[@0, @(0.4), @1];
  opacityAnimation.duration = self.animationDuration;
  
  self.ripplesAnimationGroup.animations = @[scaleAnimation, opacityAnimation];
}

最后 給外界一個開始動畫的方法

#pragma mark - Public Methods

- (void)startAnimation{
  [self setUpAnimation];
  [self.roundLayer addAnimation:self.ripplesAnimationGroup forKey:@"ripples"];
}

使用 只需要將layer 插入到你想要做效果的layer的下方

  self.frontView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 30, 30)];
  self.frontView.backgroundColor = [UIColor grayColor];
  [self.view addSubview:self.frontView];
  
  self.ripplesLayer = [[DWRipplesLayer alloc] init];
  [self.view.layer insertSublayer:self.ripplesLayer below:self.frontView.layer];
  self.ripplesLayer.position = self.frontView.center;
  
  [self.ripplesLayer startAnimation];

本文Demo地址：https://github.com/94haox/DWRipplesLayer