序

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

效果

Demo

建议先下载demo,再结合下面的分析，会好理解点。地址

逻辑

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

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

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

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

实现

love路径

                               
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

                               
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动效

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

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

                               
_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;        
// 颜色值递减。