美文网首页
CAReplicatorLayer

CAReplicatorLayer

作者: 翻这个墙 | 来源:发表于2017-11-23 10:54 被阅读62次

    CAReplicatorLayer(复制层)

    • 父类是CALayer

    CAReplicatorLayer所有独有属性

    //复制实例数量(以加入到复制层的所有被复制对象组为一份)
    @property NSInteger instanceCount;
    
    //默认为NO,如果YES,使其实例遵守相同的限制
    @property BOOL preservesDepth;
    
    //延迟xx秒复制下一份实例
    @property CFTimeInterval instanceDelay;
    //实例间形变
    @property CATransform3D instanceTransform;
    
    //实例颜色,用处不大(被复制对象设置自身颜色即可)
    @property(nullable) CGColorRef instanceColor;
    
    //设置倒影属性
    @property float instanceRedOffset;
    @property float instanceGreenOffset;
    @property float instanceBlueOffset;
    @property float instanceAlphaOffset;
    

    CAReplicatorLayer实现音量振动条

    • 实现方法步骤:
      1. 首先设置一个音量振动条
      • 为音量振动条增加不断伸缩的动画
      • 将音量振动条加入到复制层中,设置复制层属性,复制一定数量的形变等不一的音量振动条,形成先后的感觉(注意要将复制层加入到UIView的layer层中,并设置frame)
    // 复制层
        // 复制层工作原理:它只会复制它的子层
        CAReplicatorLayer *repLayer = [CAReplicatorLayer layer];
    
        repLayer.frame = _contentView.bounds;
    
        // 复制instanceCount - 1份
        // 设置复制层里面的总份数
        repLayer.instanceCount = 5;
    
        // 设置复制层的形变,都是相对于上一个
        repLayer.instanceTransform = CATransform3DMakeTranslation(40, 0, 0);
    
        // 设置复制层动画延迟时间,也是相对于上一个
        repLayer.instanceDelay = 0.3;
    
    //    repLayer.instanceAlphaOffset -= 0.3;
    
        [_contentView.layer addSublayer:repLayer];
    
        // 添加音量振动条
        CALayer *redLayer = [CALayer layer];
    
    //    redLayer.frame = CGRectMake(0, 100, 30, 100);
    
        redLayer.anchorPoint = CGPointMake(0, 1);
    
        redLayer.position = CGPointMake(0, 200);
    
        redLayer.bounds = CGRectMake(0, 0, 30, 100);
    
        redLayer.backgroundColor = [UIColor redColor].CGColor;
    
        [repLayer addSublayer:redLayer];
    
        // 添加动画
        CABasicAnimation *anim = [CABasicAnimation animation];
    
        // 修改Layer的哪个属性
        anim.keyPath = @"transform.scale.y";
    
        // 设置修改的值
        anim.toValue = @0;
    
        anim.repeatCount = MAXFLOAT;
    
        anim.duration = .5;
    
        // 动画反转
        anim.autoreverses = YES;
    
        [redLayer addAnimation:anim forKey:nil];
    

    CAReplicatorLayer实现活动指示器(效果是绿色点在圆中有规律的“此起彼伏”)

    • 实现方案一步骤(难点是想到粒子是伸缩而不是旋转):
      1. 首先设置一个矩形粒子
      • 为矩形粒子增加不断伸缩的动画(注意初始化伸缩为0)
      • 将矩形粒子加入到复制层中,设置复制层属性,复制一定数量的形变等不一的矩形粒子,形成先后的感觉(注意要将复制层加入到UIView的layer层中,并设置frame)
    // 复制层
        CAReplicatorLayer *repLayer = [CAReplicatorLayer layer];
        repLayer.frame = _contentView.bounds;
    
        int count = 20;
        // 设置总分数
        repLayer.instanceCount = count;
    
        // 计算每个小块的占用的度数
        CGFloat angle = M_PI * 2 / count;
        repLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
    
        // 设置动画延长时间 = 动画时长 / 总个数
        repLayer.instanceDelay = 1.0 / count;
        [_contentView.layer addSublayer:repLayer];
    
    
        // 添加绿色块,到复制层
        CALayer *greenDot = [CALayer layer];
        greenDot.transform = CATransform3DMakeScale(0, 0, 0);//使所有粒子一开始不是都一同展示到屏幕中
        greenDot.frame = CGRectMake(70, 10, 10, 10);
        greenDot.backgroundColor = [UIColor greenColor].CGColor;
        [repLayer addSublayer:greenDot];
    
        // 添加动画
        CABasicAnimation *anim = [CABasicAnimation animation];
        anim.keyPath = @"transform.scale";
        anim.fromValue = @1;//使所有粒子一开始不是都一同展示到屏幕中
        anim.toValue = @0;
        anim.repeatCount = MAXFLOAT;
        anim.duration = 1;
        [greenDot addAnimation:anim forKey:nil];
    

    CAReplicatorLayer实现倒影(效果像是水中倒影)

    //需要修改控制器的view的图层是复制层,才能复制UIImageView
    ###在VCView.m中
    // 设置当前view的图层类型
    + (Class)layerClass
    {
        return [CAReplicatorLayer class];
    }
    
    ###vc.m中viewDidLoad方法:
        // 复制图片
        CAReplicatorLayer *repL = (CAReplicatorLayer *)self.view.layer;
    
        repL.instanceCount = 2;
    
        // 旋转,绕着父层的锚点旋转(图片层的锚点必须在中心点才能实现效果)
        repL.instanceTransform = CATransform3DMakeRotation(M_PI, 1, 0, 0);
    ##核心代码
        // 倒影
        repL.instanceRedOffset -= 0.1;
        repL.instanceGreenOffset -= 0.1;
        repL.instanceBlueOffset -= 0.1;
        repL.instanceAlphaOffset -= 0.1;
    

    相关文章

      网友评论

          本文标题:CAReplicatorLayer

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