CAReplicatorLayer(重復(fù)圖層)

CAReplicatorLayer的目的是為了高效生成許多相似的圖層捆姜。它會繪制一個或多個圖層的子圖層,并在每個復(fù)制體上應(yīng)用不同的變換。

gitHub地址在/layer/replicatorLayer里面

CAReplicatorLayer屬性說明:

  • @property NSInteger instanceCount;
    指定圖層需要重復(fù)多少次

  • @property CFTimeInterval instanceDelay;
    圖層出現(xiàn)的延遲

  • @property CATransform3D instanceTransform;
    重復(fù)圖層的transform

  • @property(nullable) CGColorRef instanceColor;
    重復(fù)圖層的顏色

  • @property float instanceRedOffset;
    @property float instanceGreenOffset;
    @property float instanceBlueOffset;
    @property float instanceAlphaOffset;
    重復(fù)圖層的顏色漸變值

1负蚊、圓形重復(fù)圖層效果

達到的效果為:

replicatorLayer-1

示例代碼為:

/**
 * @func 重復(fù)圖層圓形
 */
-(void)cicleReplicatorLayer{
    //創(chuàng)建一個ReplicatorLayer
    CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
    //設(shè)置大小
    replicatorLayer.frame = self.bounds;
    [self.layer addSublayer:replicatorLayer];
    
    //設(shè)置ReplicatorLayer的復(fù)制個數(shù)
    replicatorLayer.instanceCount = 10;
    //給每個instance添加transform
    CATransform3D transform = CATransform3DIdentity;
    //向下平移200
//    transform = CATransform3DTranslate(transform, 50, 0, 0);
    //繞著Z軸旋轉(zhuǎn)
    transform = CATransform3DRotate(transform, M_PI/5.0, 0, 0, 1);
    //上移200
    transform = CATransform3DTranslate(transform, -50, 50, 0);
    replicatorLayer.instanceTransform = transform;
    //添加漸變顏色
    replicatorLayer.instanceBlueOffset = -0.1;
    replicatorLayer.instanceGreenOffset = -0.1;
    //設(shè)置subLayer和位置大小
    CALayer * layer = [CALayer layer];
    layer.frame = CGRectMake(50, 100, 50, 50);
    layer.backgroundColor = [UIColor whiteColor].CGColor;
    [replicatorLayer addSublayer:layer];
}

2神妹、實現(xiàn)一個雷達的動畫

實現(xiàn)效果為:

雷達效果.gif

示例代碼:

/**
 *雷達動畫
 */
-(void)radarAnimation{
//    創(chuàng)建一個shaperLayer圖層,也就是做變大動畫
    CAShapeLayer * shaperLayer = [CAShapeLayer layer];
    shaperLayer.backgroundColor = [UIColor whiteColor].CGColor;
    shaperLayer.bounds = CGRectMake(0, 0, 20, 20);
    shaperLayer.cornerRadius = 10;
    shaperLayer.position = CGPointMake(kWidth/2, kHeight/2);
//    創(chuàng)建動畫
    CABasicAnimation *transform = [CABasicAnimation animationWithKeyPath:@"transform"];
    NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeScale(10, 10, 1)];
    transform.toValue = value;
    transform.duration = 3;
    transform.repeatCount = MAXFLOAT;
    //設(shè)置透明度家妆,可以直接設(shè)置replicatorLayer的instanceAlphaOffset來設(shè)置
    CABasicAnimation * alpha = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alpha.fromValue = @(1);
    alpha.toValue = @(0);
    alpha.duration = 2;
//    創(chuàng)建動畫組
    CAAnimationGroup * group = [CAAnimationGroup animation];
    group.animations = @[transform,alpha];
    group.duration = 2;
    group.repeatCount = MAXFLOAT;
    [shaperLayer addAnimation:group forKey:@"radarAnimation"];
//    創(chuàng)建replicatorLayer
    CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
    [replicatorLayer addSublayer:shaperLayer];
//    復(fù)制層的個數(shù)
    replicatorLayer.instanceCount = 3;
//    復(fù)制層延遲時間
    replicatorLayer.instanceDelay = 0.5;
//    replicatorLayer.instanceAlphaOffset = -0.1;
    [self.layer addSublayer:replicatorLayer];
}

3鸵荠、圓點縮放轉(zhuǎn)圈效果

實現(xiàn)效果為:

圓點縮放轉(zhuǎn)圈.gif

示例代碼:

/**
 * @func 轉(zhuǎn)圈動畫,帶大小縮放
 */
-(void)cicleScaleAnimation{
    //創(chuàng)建一個shaperLayer,動畫效果layer
    CAShapeLayer * shaperLayer = [CAShapeLayer layer];
    shaperLayer.backgroundColor = [UIColor whiteColor].CGColor;
    shaperLayer.bounds = CGRectMake(0, 0, 20, 20);
    shaperLayer.cornerRadius = 10;
    shaperLayer.position = CGPointMake(kWidth/2, 100);
    shaperLayer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);
    
    //創(chuàng)建縮放動畫
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 2;
    animation.repeatCount = MAXFLOAT;
    //動畫起始為原來大小
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)];
    //動畫結(jié)束為原來的0.1倍
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
    [shaperLayer addAnimation:animation forKey:nil];
    
    //創(chuàng)建replicatorLayer
    CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
    //這里設(shè)置的高度500伤极,顯示區(qū)域Y值在100-(500-100)之間蛹找,動畫占用區(qū)域高度為300
    replicatorLayer.frame = CGRectMake(0, 0, kWidth, 500);
    [replicatorLayer addSublayer:shaperLayer];
//重復(fù)層的個數(shù)
    replicatorLayer.instanceCount = 20;
//重復(fù)層的延時
    replicatorLayer.instanceDelay = 0.1;
    CGFloat angle = 2*M_PI / 20.0;
    //創(chuàng)建replicatorLayer的instance的transform繞著Z軸旋轉(zhuǎn)angle角度
    replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
    [self.layer addSublayer:replicatorLayer];
}

這是重復(fù)圖層的用法,其他效果哨坪,大家可以自己嘗試庸疾。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市当编,隨后出現(xiàn)的幾起案子届慈,更是在濱河造成了極大的恐慌,老刑警劉巖凌箕,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拧篮,死亡現(xiàn)場離奇詭異,居然都是意外死亡牵舱,警方通過查閱死者的電腦和手機串绩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芜壁,“玉大人礁凡,你說我怎么就攤上這事』弁” “怎么了顷牌?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長塞淹。 經(jīng)常有香客問我窟蓝,道長,這世上最難降的妖魔是什么饱普? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任运挫,我火速辦了婚禮,結(jié)果婚禮上套耕,老公的妹妹穿的比我還像新娘谁帕。我一直安慰自己,他們只是感情好冯袍,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布匈挖。 她就那樣靜靜地躺著碾牌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪儡循。 梳的紋絲不亂的頭發(fā)上舶吗,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音贮折,去河邊找鬼裤翩。 笑死,一個胖子當著我的面吹牛调榄,可吹牛的內(nèi)容都是我干的踊赠。 我是一名探鬼主播,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼每庆,長吁一口氣:“原來是場噩夢啊……” “哼筐带!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起缤灵,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤伦籍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后腮出,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體帖鸦,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年胚嘲,在試婚紗的時候發(fā)現(xiàn)自己被綠了作儿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡馋劈,死狀恐怖攻锰,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情妓雾,我是刑警寧澤娶吞,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站械姻,受9級特大地震影響妒蛇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜楷拳,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一材部、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧唯竹,春花似錦、人聲如沸苦丁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至产上,卻和暖如春棵磷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背晋涣。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工仪媒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谢鹊。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓算吩,卻偏偏與公主長得像,于是被迫代替她去往敵國和親佃扼。 傳聞我的和親對象是個殘疾皇子偎巢,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

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