#效果
#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; // 颜色值递减。
#末
-
CAReplicatorLayer里面还有一个instanceTransform属性，musicLayer就是用它的instanceTransform属性做的。所以还有很多效果可以做。就看你脑洞够不够大了。
-
如果你有疑问或者发现错误请留言给我。3Q~~