QuartzCore之CAReplicatorLayer介紹

原文鏈接

CAReplicatorLayer是一個克隆容器Layer,你添加到該Layer的內(nèi)容會被克隆成instanceCount份返弹,并且兩份克隆延時instanceDelay 克隆到的位置instanceTransform等都會可控制的帮寻。

CAReplicatorLayer有以下屬性:

@interface CAReplicatorLayer : CALayer

@property NSInteger instanceCount;//克隆份數(shù),默認一份
@property BOOL preservesDepth;
@property CFTimeInterval instanceDelay;//每份
@property CATransform3D instanceTransform;//CATransform3D類型绝页,可以是位移,旋轉(zhuǎn),縮放
@property(nullable) CGColorRef instanceColor;

@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
@property float instanceAlphaOffset;

@end

通過幾個demo可以理解這幾個屬性的使用方式

示例一


  CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer new];
    replicatorLayer.bounds = CGRectMake(0, 0, 200, 100);
    replicatorLayer.backgroundColor = [UIColor grayColor].CGColor;
    replicatorLayer.position = CGPointMake(self.view.center.x, self.view.center.y - 150);
    [self.view.layer addSublayer:replicatorLayer];
    
    CALayer *subLayer = [CALayer new];
    subLayer.bounds = CGRectMake(0, 0, 8, 40);
    subLayer.cornerRadius = 2.0f;
    subLayer.position = CGPointMake(10, 115);
    subLayer.backgroundColor = [UIColor redColor].CGColor;
    [replicatorLayer addSublayer:subLayer];
    
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
    basicAnimation.fromValue = @(subLayer.position.y);
    basicAnimation.toValue = @(subLayer.position.y-30);
    basicAnimation.repeatCount = INFINITY;
    basicAnimation.autoreverses = YES;
    basicAnimation.duration = 0.5;
    [subLayer addAnimation:basicAnimation forKey:@"position.y"];

     replicatorLayer.instanceCount = 9;//復制9份
    ////設置每份的距離膳算,注意第K份是以第k-1份為參考的
    replicatorLayer.instanceTransform = CATransform3DMakeTranslation(20.0, 0.0, 0.0);
    //兩份之間的延時
    replicatorLayer.instanceDelay = 0.5/9

   // replicatorLayer.instanceColor = [UIColor greenColor].CGColor;
    replicatorLayer.masksToBounds = YES;//超出邊界的剪裁掉

運行效果:


1.gif

示例二


   CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer new];
    replicatorLayer.bounds = CGRectMake(0, 0, 200, 200);
    replicatorLayer.backgroundColor = [UIColor grayColor].CGColor;
    replicatorLayer.position = CGPointMake(self.view.center.x, self.view.center.y + 10);
    [self.view.layer addSublayer:replicatorLayer];

    CALayer *subLayer = [CALayer new];
    subLayer.bounds = CGRectMake(0, 0, 14, 14);
    subLayer.position = CGPointMake(100, 40);
    subLayer.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1.0].CGColor;
    subLayer.borderWidth = 1.0;
    subLayer.cornerRadius = 2.0;
    [replicatorLayer addSublayer:subLayer];
    
    CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scale.fromValue = @1.0;
    scale.toValue = @0.1;
    scale.duration = 1.5;
    scale.repeatCount = INFINITY;
//    scale.autoreverses = YES;
    [subLayer addAnimation:scale forKey:nil];
    
    replicatorLayer.instanceCount = 15;
    CGFloat angle = (2 * M_PI)/15;
    replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1.0);
    //兩份之間延時:scale.duration/replicatorLayer.instanceCount = 15
    replicatorLayer.instanceDelay = 1.5/15;
    subLayer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);

運行效果:


1.gif

示例三


- (void)followAnimation
{
    //
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer new];
    replicatorLayer.bounds = self.view.bounds;
    replicatorLayer.backgroundColor = [UIColor colorWithWhite:0 alpha:0.75].CGColor;
    replicatorLayer.position = self.view.center;
    [self.view.layer addSublayer:replicatorLayer];
    
    CALayer *subLayer = [CALayer new];
    subLayer.bounds = CGRectMake(0, 0, 10, 10);
    subLayer.backgroundColor =[UIColor redColor].CGColor; //[UIColor colorWithWhite:0.8 alpha:1.0].CGColor;
    subLayer.borderColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;
    subLayer.borderWidth = 1.0;
    subLayer.cornerRadius = 5.0;
    subLayer.shouldRasterize = YES;
    subLayer.rasterizationScale = [UIScreen mainScreen].scale;
    [replicatorLayer addSublayer:subLayer];
    
    CAKeyframeAnimation *move = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    move.path = [self path];
    move.repeatCount = INFINITY;
    move.duration = 4.0;
//    move.autoreverses = YES;
    [subLayer addAnimation:move forKey:nil];
//
    replicatorLayer.instanceDelay = 0.1;
    replicatorLayer.instanceCount = 40;
    replicatorLayer.instanceColor = [UIColor colorWithRed:0 green:1.0 blue:0 alpha:1.0].CGColor;
    replicatorLayer.instanceGreenOffset = -0.03;//
}

- (CGPathRef)path
{
    UIBezierPath *bezierPath = [UIBezierPath new];
    [bezierPath moveToPoint:(CGPointMake(31.5, 78.5))];
    [bezierPath addLineToPoint:(CGPointMake(31.5, 23.5))];
    [bezierPath addCurveToPoint:CGPointMake(58.5, 38.5) controlPoint1:CGPointMake(31.5, 23.5) controlPoint2:CGPointMake(62.46, 18.69)];
    [bezierPath addCurveToPoint:CGPointMake(53.5, 45.5) controlPoint1:CGPointMake(57.5, 43.5) controlPoint2:CGPointMake(53.5, 45.5)];
    [bezierPath addLineToPoint:(CGPointMake(43.5, 48.5))];
    [bezierPath addLineToPoint:(CGPointMake(53.5, 66.5))];
    [bezierPath addLineToPoint:(CGPointMake(62.5, 51.5))];
    [bezierPath addLineToPoint:(CGPointMake(70.5, 66.5))];
    [bezierPath addLineToPoint:(CGPointMake( 86.5, 23.5))];
    [bezierPath addLineToPoint:(CGPointMake(86.5, 78.5))];
//    [bezierPath addLineToPoint:(CGPointMake(31.5, 78.5))];
//    [bezierPath addLineToPoint:(CGPointMake(31.5, 71.5))];
    [bezierPath closePath];
    
    CGAffineTransform T = CGAffineTransformMakeScale(3.0, 3.0);
    return CGPathCreateCopyByTransformingPath(bezierPath.CGPath, &T);
}

運行效果:

1.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市更舞,隨后出現(xiàn)的幾起案子畦幢,更是在濱河造成了極大的恐慌,老刑警劉巖缆蝉,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宇葱,死亡現(xiàn)場離奇詭異,居然都是意外死亡刊头,警方通過查閱死者的電腦和手機黍瞧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來原杂,“玉大人印颤,你說我怎么就攤上這事〈┮蓿” “怎么了年局?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵际看,是天一觀的道長。 經(jīng)常有香客問我矢否,道長仲闽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任僵朗,我火速辦了婚禮赖欣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘验庙。我一直安慰自己顶吮,他們只是感情好,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布粪薛。 她就那樣靜靜地躺著悴了,像睡著了一般。 火紅的嫁衣襯著肌膚如雪汗菜。 梳的紋絲不亂的頭發(fā)上让禀,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天,我揣著相機與錄音陨界,去河邊找鬼巡揍。 笑死,一個胖子當著我的面吹牛菌瘪,可吹牛的內(nèi)容都是我干的腮敌。 我是一名探鬼主播,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼俏扩,長吁一口氣:“原來是場噩夢啊……” “哼糜工!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起录淡,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤捌木,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后嫉戚,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刨裆,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年彬檀,在試婚紗的時候發(fā)現(xiàn)自己被綠了帆啃。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡窍帝,死狀恐怖努潘,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤疯坤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布报慕,位于F島的核電站,受9級特大地震影響贴膘,放射性物質(zhì)發(fā)生泄漏卖子。R本人自食惡果不足惜略号,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一刑峡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧玄柠,春花似錦突梦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至这弧,卻和暖如春娃闲,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背匾浪。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工皇帮, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蛋辈。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓属拾,卻偏偏與公主長得像,于是被迫代替她去往敵國和親冷溶。 傳聞我的和親對象是個殘疾皇子渐白,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容