美文网首页
iOS开发-音量振动条的实现

iOS开发-音量振动条的实现

作者: iOS_ZZ | 来源:发表于2018-10-11 11:25 被阅读0次

    今天呢给同学们讲解一下通过核心动画实现一个音量振动条的功能,那么废话不多说直接上代码~先看演示视频

    iOS开发-音量振动条的实现.gif

    音量振动条如何实现?

    • 创建3个layer,按顺序播放y轴缩放动画

    利用CAReplicatorLayer实现

    • 1、什么是CAReplicatorLayer?
      一种可以复制自己子层的layer,并且复制出来的layer和原生子层有同样的属性,位置,形变,动画。
    • 2、CAReplicatorLayer属性
      instanceCount: 子层总数(包括原生子层)
      instanceDelay: 复制子层动画延迟时长
      instanceTransform: 复制子层形变(不包括原生子层),每个复制子层都是相对上一个。
      instanceColor: 子层颜色,会和原生子层背景色冲突,因此二者选其一设置。
      instanceRedOffset、instanceGreenOffset、instanceBlueOffset、instanceAlphaOffset: 颜色通道偏移量,每个复制子层都是相对上一个的偏移量。

    如何利用CAReplicatorLayer实现?

    - (void)viewDidLoad {
        [super viewDidLoad];
        
        // 0.创建背景view
        UIView *bgView = [[UIView alloc] init];
        bgView.backgroundColor = [UIColor grayColor];
        CGFloat bgViewX = self.view.frame.size.width * 0.5  ;
        CGFloat bgViewY = 300;
        CGFloat bgViewW = 200;
        CGFloat bgViewH = 200;
        bgView.center = CGPointMake(bgViewX, bgViewY);
        bgView.bounds = CGRectMake(0, 0, bgViewW, bgViewH);
        [self.view addSubview:bgView];
        
        // 1.创建复制图层 可以把图层里面所有子层复制
        CAReplicatorLayer *repL = [CAReplicatorLayer layer];
        repL.frame = bgView.bounds;
        [bgView.layer addSublayer:repL];
        
        CALayer *layer = [CALayer layer];
        layer.anchorPoint = CGPointMake(0.5, 1);
        layer.position = CGPointMake(15, bgView.bounds.size.height);
        layer.bounds = CGRectMake(0, 0, 30, 150);
        layer.backgroundColor = [UIColor whiteColor].CGColor;
        [repL addSublayer:layer];
        
        // 2.创建动画
        CABasicAnimation *anim = [CABasicAnimation animation];
        anim.keyPath = @"transform.scale.y";
        anim.toValue = @0.1;
        anim.duration = 0.5;
        anim.repeatCount = MAXFLOAT;
        
        // 设置反转动画
        anim.autoreverses = YES;
        [layer addAnimation:anim forKey:nil];
        
        // 复制层中子层总数
        // instanceCount:表示复制层里面有多少个子层,包括原始层
        repL.instanceCount = 4;
        
        // 设置复制子层偏移量,不包括原始层,相对于原始层x偏移
        repL.instanceTransform = CATransform3DMakeTranslation(45, 0, 0);
        
        // 设置复制层动画延迟时间
        repL.instanceDelay = 0.1;
        
        // 如果设置了原始层背景色,就不需要设置这个属性
        repL.instanceColor = [UIColor greenColor].CGColor;
        
        repL.instanceGreenOffset = -0.3;
    }
    

    相关文章

      网友评论

          本文标题:iOS开发-音量振动条的实现

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