美文网首页
CAReplicatorLayer 复制层(音乐播放条案例)

CAReplicatorLayer 复制层(音乐播放条案例)

作者: 努力奔跑的小男孩 | 来源:发表于2017-10-17 13:45 被阅读14次

    1.把绘制一个复制层CAReplicatorLayer.frame和view的bounds一样大
    2.把复制层添加到view的layer层上
    3.在复制层添加一个layer,并对layer添加动画
    4.对复制层的一些属性进行设置
    效果图

    效果图.gif
    - (void)viewDidLoad {
        [super viewDidLoad];
        UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(80, 100, 300, 200)];
        bgView.backgroundColor= [UIColor redColor];
        [self.view addSubview:bgView];
        // 赋值层
        CAReplicatorLayer *repL = [CAReplicatorLayer layer];
        repL.frame = bgView.bounds;
        [bgView.layer addSublayer:repL];
        // 赋值5次
        repL.instanceCount = 5; 
        // 沿X轴平移45距离
        repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
        // 设置复制出来的动画延时时长
        repL.instanceDelay = 1;
        
        //创建一个震动条
        CALayer *layer = [CALayer layer];
        layer.backgroundColor = [UIColor blueColor].CGColor;
        layer.bounds = CGRectMake(0, 0, 30, 100);
        layer.anchorPoint = CGPointMake(0, 1); // 修改锚点
        layer.position = CGPointMake(0, bgView.bounds.size.height);
        [repL addSublayer:layer];
        
        //添加动画
        CABasicAnimation *animation = [CABasicAnimation animation];
        animation.keyPath = @"transform.scale.y";
        animation.toValue = @0;
        animation.repeatCount = MAXFLOAT;
        animation.duration = 1;
        animation.autoreverses = true;
        [layer addAnimation:animation forKey:nil];
    }
    
    图片倒影案例

    效果图

    效果图.png
    - (void)viewDidLoad {
        [super viewDidLoad];
        CAReplicatorLayer *repL = (CAReplicatorLayer *)self.view.layer;
        repL.instanceCount = 2;
        repL.position = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height * 0.5);
        // 绕着复制层的锚点旋转
        repL.instanceTransform = CATransform3DMakeRotation(M_PI, 1, 0, 0);
        // 阴影
        repL.instanceRedOffset -= 0.2;
        repL.instanceGreenOffset -= 0.2;
        repL.instanceBlueOffset -= 0.2;
        repL.instanceAlphaOffset -= 0.1;
    }
    

    图片倒影案例源码

    相关文章

      网友评论

          本文标题:CAReplicatorLayer 复制层(音乐播放条案例)

          本文链接:https://www.haomeiwen.com/subject/qnkduxtx.html