利用iOS动画来模拟音量振动条的实现

iOS动画来模拟音量振动条，即利用CAReplicatorLayer实现，以下将详细的介绍CAReplicatorLayer和实现方法。

音量振动条

效果图:

如何实现？

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

利用CAReplicatorLayer实现

1、什么是CAReplicatorLayer？

一种可以复制自己子层的layer,并且复制出来的layer和原生子层有同样的属性，位置，形变，动画。

2、CAReplicatorLayer属性

  • instanceCount: 子层总数（包括原生子层）
  • instanceDelay: 复制子层动画延迟时长
  • instanceTransform: 复制子层形变(不包括原生子层)，每个复制子层都是相对上一个。
  • instanceColor: 子层颜色，会和原生子层背景色冲突，因此二者选其一设置。
  • instanceRedOffset、instanceGreenOffset、instanceBlueOffset、instanceAlphaOffset: 颜色通道偏移量，每个复制子层都是相对上一个的偏移量。
  • 如果利用CAReplicatorLayer实现

1.首先创建复制layer,音乐振动条layer添加到复制layer上，然后复制子层就好了。

CAReplicatorLayer *layer = [CAReplicatorLayer layer];

 layer.frame = CGRectMake(50, 50, 200, 200);

 layer.backgroundColor = [UIColor lightGrayColor].CGColor;

 [self.view.layer addSublayer:layer];

2.先创建一个音量振动条，并且设置好动画,动画是绕着底部缩放，设置锚点

 CALayer *bar = [CALayer layer];

 bar.backgroundColor = [UIColor redColor].CGColor;

 bar.bounds = CGRectMake(0, 0, 30, 100);

 bar.position = CGPointMake(15, 200);

 bar.anchorPoint = CGPointMake(0.5, 1);

 [layer addSublayer:bar];

 CABasicAnimation *anim = [CABasicAnimation animation];

 anim.keyPath = @"transform.scale.y";

 anim.toValue = @(0.1);

 anim.autoreverses = YES;

 anim.repeatCount = MAXFLOAT;

 [bar addAnimation:anim forKey:nil];

3.复制子层

// 设置4个子层，3个复制层
 layer.instanceCount = 4;

 // 设置复制子层的相对位置，每个x轴相差40
 layer.instanceTransform = CATransform3DMakeTranslation(40, 0, 0);

 // 设置复制子层的延迟动画时长
 layer.instanceDelay = 0.3;

通过以上对CAReplicatorLayer的介绍以及利用CAReplicatorLayer来实现模拟音量振动条的实例的演示，希望对大家有所帮助。

赞 (0)

相关推荐

  • IOS代码修改音量实例详解

    IOS代码修改音量实例详解

    IOS代码修改音量实例详解 最近在做一个项目,需要用户在打开APP后,自动将音量调节到某个值,于是研究了一下. 之前做过iOS上声音的研究,苹果对iPhone设备的输入/输出的控制很严格,因为苹果要控制用户体验的一致性.比如:用户将耳机拔下来的时候,苹果认为,用户这时候不希望其他人知道自己在听什么,于是这时候声音会被自动暂停.在音量调整上,苹果也采取了类似的策略.苹果认为,用户不需要APP来为他指定音量,因为这样有时候用户会感到不舒服.苹果的开发文档是这么说的: You cannot chang

  • iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）

    iOS中滑动控制屏幕亮度和系统音量（附加AVAudioPlayer基本用法和Masonry简单使用）

    如图,左侧上下滑动改变亮度,右侧上下滑动改变音量. 1.改变屏幕亮度 //获得当前屏幕亮度 light = [UIScreen mainScreen].brightness; light = 0.5f; //直接赋值或者使用set方法皆可 [UIScreen mainScreen].brightness = light; 2.改变系统音量 使用的比较多的就是通过MPMusicPlayerController来改变系统音量,主要归功于MPMusicPlayerController的音量和系统的同步

  • 利用iOS动画来模拟音量振动条的实现

    利用iOS动画来模拟音量振动条的实现

    iOS动画来模拟音量振动条,即利用CAReplicatorLayer实现,以下将详细的介绍CAReplicatorLayer和实现方法. 音量振动条 效果图: 如何实现? 创建3个layer,按顺序播放y轴缩放动画 利用CAReplicatorLayer实现 1.什么是CAReplicatorLayer? 一种可以复制自己子层的layer,并且复制出来的layer和原生子层有同样的属性,位置,形变,动画. 2.CAReplicatorLayer属性 instanceCount: 子层总数(包括原

  • iOS快速实现环形渐变进度条

    iOS快速实现环形渐变进度条

    前言 进度条相信我们大家都不陌生,往往我们很多时候需要使用到圆形进度条.这篇文章给大家分享了利用iOS如何快速实现环形进度条,下面来一起看看. 一:先制作一个不带颜色渐变的进度条 自定义一个cycleView,在.m 中实现drawRect方法 - (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext();//获取上下文 CGPoint center = CGPointMake(100, 100)

  • iOS中利用CoreAnimation实现一个时间的进度条效果

    iOS中利用CoreAnimation实现一个时间的进度条效果

    在iOS中实现进度条通常都是通过不停的设置progress来完成的,这样的进度条适用于网络加载(上传下载文件.图片等).但是对于录制视频这样的需求的话,如果是按照每秒来设置进度的话,显得有点麻烦,于是我就想直接用CoreAnimation来按时间做动画,只要设置最大时间,其他的就不用管了,然后在视频暂停与继续录制时,对动画进行暂停和恢复即可.录制视频的效果如下: 你可以在这里下载demo 那么接下来就是如何用CoreAnimation实现一个进度条控件了. 首先呢,让我们创建一个继承自CASha

  • 利用iOS开发实现翻转扑克牌动画的方法

    利用iOS开发实现翻转扑克牌动画的方法

    前言 本文主要给大家介绍的关于利用iOS开发实现翻转扑克牌动画的方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍吧. 动画效果 实现原理 实现原理就是创建三个扑克牌pockerView , 先在扑克牌上添加一个imageview,作为牌的背面.然后实现翻转动画,在翻转的时候将imageview移除,添加另一个imageview作为正面. 核心代码: 方法一: 翻转动画,内部实现还是方法二 + (void)transitionWithView:(UIView *)view dura

  • iOS动画解析之圆球加载动画XLBallLoading的实现

    iOS动画解析之圆球加载动画XLBallLoading的实现

    前言 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,本文将详细给大家介绍关于iOS圆球加载动画XLBallLoading实现的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.显示效果 二.原理分析 1.拆解动画 从效果图来看,动画可拆解成两部分:放大动画.位移动画 放大动画 比较简单,这里主要来分析一下位移动画 (1).先去掉缩放效果: 屏蔽放大效果 (2).去掉其中的一个圆球 现

  • python 利用栈和队列模拟递归的过程

    一.递归 递归调用:一个函数,调用的自身,称为递归调用 递归函数:一个可以调用自身的函数称为递归函数 凡是循环能干的事,递归都能干 方法: 1.写出临界条件 2.找这一次和上一次的关系 3.假设当前函数已经能用,调用自身计算上一次的结果再求出本次的结果 下面我们通过两段代码简单看一下递归和非递归的区别: 输入一个大于等于1的数,求1到n的和! # 普通函数方法 def hanshu(n): sum = 0 # 循环遍历每一个数字,将他们加到一个事先定义好的变量上,直到加完 for x in ra

  • iOS动画解析之支付宝支付打钩动画的实现方法

    iOS动画解析之支付宝支付打钩动画的实现方法

    前言 我们平时在用支付宝付款时,会有一个支付中的动画和一个支付完成的动画.这篇博客主要分析一下这种动画效果,效果如下: 支付宝支付动画 一.动画解析 为了方便观察,放慢了动画的速度并添加辅助线: 放慢后的动画 从图中可以看出:加载圆弧运动轨迹可分为前半段和后半段:并且圆弧的起始角度(StartAngle)和结束角度(EndAngle)在做有规律的变化: 前半段: 从-0.5π到π,这一段运动中速度较快:StartAngle不变,始终未-0.5π:EndAngle在匀速上升,一直到π:前半段中圆弧

  • 利用iOS绘制图片生成随机验证码示例代码

    利用iOS绘制图片生成随机验证码示例代码

    先来看看效果图 实现方法 .h文件 @property (nonatomic, retain) NSArray *changeArray; @property (nonatomic, retain) NSMutableString *changeString; @property (nonatomic, retain) UILabel *codeLabel; -(void)changeCode; @end .m文件 @synthesize changeArray = _changeArray;

  • iOS动画案例(1) 类似于qq账号信息里的一个动画效果

    iOS动画案例(1) 类似于qq账号信息里的一个动画效果

    受人所托,做一个类似于qq账号信息里的一个动画,感觉挺有意思,也没感觉有多难,就开始做了,结果才发现学的数学知识都还给体育老师了,研究了大半天才做出来. 先看一下动画效果: 用到的知识点: (1)三角函数 (2)CALayer (3)CATransaction (4)UIBezierPath (5)CAKeyframeAnimation (6)CAAnimationGroup 如图,这明显是一段圆弧,那么要确定这段一段圆弧的位置,就得确定这段圆弧的圆心和圆心角.我规定圆心在手机屏幕的左顶点,也就

  • iOS动画-定时对UIView进行翻转和抖动的方法

    (翻转)方式一: [NSTimer scheduledTimerWithTimeInterval:3.f repeats:YES block:^(NSTimer * _Nonnull timer) { CABasicAnimation* rotationAnimation = [CABasicAnimation animation];; rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.

随机推荐