iOS - CAReplicatorLayer 的运用

http://www.cocoachina.com/ios/20151230/14822.html

 

序

---

CAReplicatorLayer可以复制自己子层的layer,并且复制的出来的layer和原来的子layer拥有相同的动效。然后通过设置一些属性，就可以完成很酷的效果，非常强大。。

效果

---

Demo

---

建议先下载demo,再结合下面的分析，会好理解点。地址https://github.com/Resory/RYReplicatorLayer

逻辑

---

• 本文主要讲述love动效的制作。music动效可参照love动效注释。

• 首先我们要得到一个love路径,这个路径用UIBezierPath来制作。

• 然后生成一个UIView,它的layer加上CAKeyframeAnimation,而CAKeyframeAnimation的路径是love路径。

• 把UIView的layer加入CAReplicatorLayer。并对设置CAReplicatorLayer相应属性即可。

实现

---

• love路径

  1 2 3 4 5

  UIBezierPath *tPath = [UIBezierPath bezierPath];   [tPath moveToPoint:CGPointMake(SYS_DEVICE_WIDTH/2.0, 200)];   [tPath addQuadCurveToPoint:CGPointMake(SYS_DEVICE_WIDTH/2.0, 400) controlPoint:CGPointMake(SYS_DEVICE_WIDTH/2.0 + 200, 20)];   [tPath addQuadCurveToPoint:CGPointMake(SYS_DEVICE_WIDTH/2.0, 200) controlPoint:CGPointMake(SYS_DEVICE_WIDTH/2.0 - 200, 20)];   [tPath closePath];

• 生成一个UIView

  1 2 3 4

  UIView *tView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];   tView.center = CGPointMake(SYS_DEVICE_WIDTH/2.0, 200);   tView.layer.cornerRadius = 5;   tView.backgroundColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];

• 给UIView添加上CAKeyframeAnimation动效

  1 2 3 4 5

  CAKeyframeAnimation *loveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];   loveAnimation.path = tPath.CGPath;   loveAnimation.duration = 8;   loveAnimation.repeatCount = MAXFLOAT;   [tView.layer addAnimation:loveAnimation forKey:@"loveAnimation"];

• 生成一个CAReplicatorLayer,并把UIView的layer加入其中

  1 2 3 4 5 6 7

  _loveLayer = [CAReplicatorLayer layer];   _loveLayer.instanceCount = 40;                // 复制39个子layer+原本的子layer共40个layer   _loveLayer.instanceDelay = 0.2;               // 每隔0.2出现一个layer   _loveLayer.instanceColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0].CGColor;   _loveLayer.instanceGreenOffset = -0.03;       // 颜色值递减。   _loveLayer.instanceRedOffset = -0.02;         // 颜色值递减。   _loveLayer.instanceBlueOffset = -0.01;        // 颜色值递减。

末

---

• CAReplicatorLayer里面还有一个instanceTransform属性，musicLayer就是用它的instanceTransform属性做的。所以还有很多效果可以做。就看你脑洞够不够大了。

• 如果你有疑问或者发现错误请留言给我。3Q~~