美文网首页
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开发-音量振动条的实现

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

  • 音量振动条

    OC代码实现: #import"ViewController.h" @interfaceViewControlle...

  • 音量振动条

    音量振动条的效果图 相信大家对老版音乐播...

  • 音量振动条

    音量振动条 如果实现? 创建3个layer,按顺序播放y轴缩放动画 利用CAReplicatorLayer实现 1...

  • iOS CALayer综合学习

    实现图片随者手势拖动进行翻转 效果图: CAlayer复制层CAReplicatorLayer 实现效果也:音量振动条

  • iOS开发 振动实现

    1.AudioServicesPlaySystemSound简单实现手机震动,首先导入AudioToolBox.f...

  • 音量振动动画实现

    最近在学习Animation时,模仿了一个音量振动的Demo,在这里记录下,大神略过! 以下为主要核心代码块儿,相...

  • 传送门

    iOS音频篇:AVPlayer的缓存实现 iOS流媒体开发之二:滑动手势控制音量、亮度和进度 UI调试神器 for...

  • iOS 开发 铃声与振动调用 单独分开调用

    1、iOS 中调用系统铃声与振动 在iOS APP开发中,有时我们需要调用手机系统铃声与振动,用以作消息提醒。这个...

  • ios开发实现画板功能

    ios开发实现画板功能 ios开发实现画板功能

网友评论

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

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