iOS - CAReplicatorLayer 的运用

时间 2019-11-25

标签 ios careplicatorlayer 运用栏目 iOS 繁體版

原文原文链接

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

序

CAReplicatorLayer能够复制本身子层的layer,而且复制的出来的layer和原来的子layer拥有相同的动效。而后经过设置一些属性，就能够完成很酷的效果，很是强大。。ios

效果

Demo

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

逻辑

本文主要讲述love动效的制做。music动效可参照love动效注释。github
首先咱们要获得一个love路径,这个路径用UIBezierPath来制做。spa
而后生成一个UIView,它的layer加上CAKeyframeAnimation,而CAKeyframeAnimation的路径是love路径。code
把UIView的layer加入CAReplicatorLayer。并对设置CAReplicatorLayer相应属性便可。orm

实现

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属性作的。因此还有不少效果能够作。就看你脑洞够不够大了。htm
若是你有疑问或者发现错误请留言给我。3Q~~blog