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~~