標籤：
序
CAReplicatorLayer可以複製自己子層的layer,並且複製的出來的layer和原來的子layer擁有相同的動效。然後通過設定一些屬性，就可以完成很酷的效果，非常強大。。
效果
love_music.gifDemo
建議先下載demo,再結合下面的分析，會好理解點。地址https://github.com/Resory/RYReplicatorLayer
邏輯
- 本文主要講述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; // 顏色值遞減。
- [_loveLayer addSublayer:tView.layer];
[self.view.layer addSublayer:_loveLayer];
末
//建立path
UIBezierPath *p11 = [UIBezierPath bezierPath];
[p11 setLineWidth:2.0];
[p11 moveToPoint:(CGPointMake(100, 200))];
[p11 addLineToPoint:(CGPointMake(150, 200))];
[p11 addLineToPoint:(CGPointMake(175, 150))];//zhong
p11.lineCapStyle = kCGLineCapSquare;
p11.lineJoinStyle = kCGLineJoinMiter;
[p11 addLineToPoint:(CGPointMake(200, 200))];
[p11 addLineToPoint:(CGPointMake(250, 200))];
[p11 addLineToPoint:(CGPointMake(210, 230))];
[p11 addLineToPoint:(CGPointMake(235, 275))];
[p11 addLineToPoint:(CGPointMake(175, 250))];//
[p11 addLineToPoint:(CGPointMake(115, 275))];
[p11 addLineToPoint:(CGPointMake(140, 230))];
[p11 closePath];
CALayer *tView = [[CALayer alloc] init];
tView.frame = CGRectMake(0, 0, 10, 10);
// tView.position = CGPointMake(self.view.frame.size.width/2, 400);
tView.cornerRadius = 5;
tView.backgroundColor = [UIColor whiteColor].CGColor;
tView.opacity = 0.1;
//移動Animation
CAKeyframeAnimation *loveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
loveAnimation.path = p11.CGPath;
loveAnimation.duration = 10;
loveAnimation.repeatCount = MAXFLOAT;
//縮放Animation
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];
scaleAnimation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
scaleAnimation.toValue = [NSValue valueWithCATransform3D:(CATransform3DMakeScale(0.15, 0.15, 1.0))];
scaleAnimation.duration = 1;
scaleAnimation.repeatCount = MAXFLOAT;
//透明度Animation
CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.duration = 10;
opacityAnimation.toValue = @(1.0);
opacityAnimation.fillMode = kCAFillModeForwards;
//組動畫
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[loveAnimation,scaleAnimation,opacityAnimation];
group.duration = 10;
group.repeatCount = MAXFLOAT;
[tView addAnimation:group forKey:nil];
CAReplicatorLayer *loveLayer = [CAReplicatorLayer layer];
loveLayer.instanceCount = 40;
loveLayer.instanceDelay = 0.2;
loveLayer.instanceColor = [UIColor greenColor].CGColor;
loveLayer.instanceGreenOffset = -0.01;
loveLayer.instanceRedOffset = -0.01;
loveLayer.instanceBlueOffset = -0.01;
[loveLayer addSublayer:tView];
[self.view.layer addSublayer:loveLayer];
音樂動畫
_musicLayer = [CAReplicatorLayer layer];
_musicLayer.frame = CGRectMake(0, 0, 60, 80);
_musicLayer.position = self.view.center;
_musicLayer.instanceCount = 3;
_musicLayer.instanceTransform = CATransform3DMakeTranslation(20, 0, 0); //每個layer的間距。
_musicLayer.instanceDelay = 0.2;
_musicLayer.backgroundColor = [UIColor whiteColor].CGColor;
_musicLayer.masksToBounds = YES;
[self.view.layer addSublayer:_musicLayer];
CALayer *tLayer = [CALayer layer];
tLayer.frame = CGRectMake(10, 100, 10, 30);
tLayer.backgroundColor = [UIColor redColor].CGColor;
[_musicLayer addSublayer:tLayer];
CABasicAnimation *musicAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
musicAnimation.duration = 0.35;
musicAnimation.fromValue = @(100);
musicAnimation.toValue = @(75);
musicAnimation.autoreverses = YES;
musicAnimation.repeatCount = MAXFLOAT;
[tLayer addAnimation:musicAnimation forKey:@"musicAnimation"];
iOS quartzCore第六章—— CAReplicatorLayer的運用
