形狀圖層和復(fù)制圖層的簡單搭配使用


// ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController


@end


// ViewController.m
#import "ViewController.h"
#import "UIView+Frame.h"

//屏幕寬高
#define screenW [UIScreen mainScreen].bounds.size.width
#define screenH [UIScreen mainScreen].bounds.size.height

@interface ViewController ()

@end

@implementation ViewController

/*
    主要實(shí)現(xiàn)思路:
    1.創(chuàng)建形狀圖層
    2.創(chuàng)建復(fù)制圖層
    3.創(chuàng)建透明度動(dòng)畫
    4.創(chuàng)建縮放動(dòng)畫
    5.創(chuàng)建動(dòng)畫組把2個(gè)動(dòng)畫添加進(jìn)去
    6.把動(dòng)畫組添加到形狀圖層
 */
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    [self setUp];
}

- (void)setUp {

    UIView *animBack = [[UIView alloc] init];
    animBack.width = screenW;
    animBack.height = screenW;
    animBack.center = self.view.center;
    [self.view addSubview:animBack];

    // 形狀圖層
    CAShapeLayer *shapL = [CAShapeLayer layer];
    shapL.frame = animBack.bounds;
    shapL.fillColor = [UIColor redColor].CGColor;
    shapL.path = [UIBezierPath bezierPathWithOvalInRect:shapL.bounds].CGPath;
//    shapL.path = [UIBezierPath bezierPathWithRect:shapL.bounds].CGPath;
    // 這句代碼不加的話,程序一起來,就會(huì)出現(xiàn)一個(gè)很大的紅色的圓
    shapL.opacity = 0;

    // 復(fù)制圖層
    CAReplicatorLayer *repL = [CAReplicatorLayer layer];
    repL.frame = animBack.bounds;
    // 復(fù)制的份數(shù)算自己本身一份
    repL.instanceCount = 3;
    // 每一份顯示的間隔時(shí)間
    repL.instanceDelay = 0.5;
    [animBack.layer addSublayer:repL];
    // 把形狀圖層添加到復(fù)制層中去
    [repL addSublayer:shapL];

    // 添加透明動(dòng)畫
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"opacity"];
    anim.fromValue = @(0.3);
    anim.toValue = @(0);

    // 添加放大動(dòng)畫
    CABasicAnimation *anim2  = [CABasicAnimation animationWithKeyPath:@"transform"];
    anim2.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0, 0, 0)];
    anim2.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 0)];

    // 創(chuàng)建動(dòng)畫組
    CAAnimationGroup *groupA = [CAAnimationGroup animation];
    groupA.animations = @[anim, anim2];
    groupA.duration = 3.0;
    groupA.repeatCount = HUGE;
    // 給形狀圖層添加動(dòng)畫
    [shapL addAnimation:groupA forKey:nil];
}

@end

  • 實(shí)現(xiàn)效果:
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容