音量振动条

效果图:

假设实现?

创建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;

Demo实例

https://github.com/Esdeath/volumeBar

iOS动画之模拟音量振动条的更多相关文章

  1. SVG动画实践篇-模拟音量高低效果

    git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/demo/step2/volumn 说明 这个动画的效果就是多个线条 ...

  2. iOS开发——UI进阶篇(十八)核心动画小例子,转盘(裁剪图片、自定义按钮、旋转)图片折叠、音量震动条、倒影、粒子效果

    一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...

  3. 解析 iOS 动画原理与实现

    这篇文章不会教大家如何实现一个具体的动画效果,我会从动画的本质出发,来说说 iOS 动画的原理与实现方式. 什么是动画 动画,顾名思义,就是能“动”的画.人的眼睛对图像有短暂的记忆效应,所以当眼睛看到 ...

  4. IOS动画总结

    IOS动画总结   一.基本方式:使用UIView类的UIViewAnimation扩展 + (void)beginAnimations:(NSString *)animationID context ...

  5. IOS 动画专题 --iOS核心动画

    iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看 ...

  6. iOS动画学习-视觉效果

    CALayer不仅仅是iOS动画学习-CALayer中介绍的那些内容,他还有一些其他属性,比如shadowColor,borderWidth,borderColor等等,这些属性我们只需要简单点设置就 ...

  7. iOS 动画Animation - 5:UIBezier

    首先说明:这是一系列文章,參考本专题下其它的文章有助于你对本文的理解. 在之前的bolg中大家会发现总是会出现UIBezier,可是我也没有做过多介绍,今天就集中介绍一下UIBezier.首先.UIB ...

  8. (转)iOS动画Core Animation

    文章转载:http://blog.sina.com.cn/s/blog_7b9d64af0101b8nh.html 在iOS中动画实现技术主要是:Core Animation. Core Animat ...

  9. IOS动画隐式,显式,翻页

    //  ViewController.m //  IOS动画0817 // //  Created by 张艳锋 on 15/8/17. //  Copyright (c) 2015年 张艳锋. Al ...

随机推荐

  1. ubutun lunix 64安装neo4j 图形数据库

    借鉴链接: https://my.oschina.net/zlb1992/blog/915038

  2. Ubuntu 环境下的mysql 远程访问,redis 远程访问和设置密码 ,mongo 安装 ,设置用户密码,开启远程访问

    MySQL远程访问 1.编辑mysql配置文件,把其中bind-address = 127.0.0.1注释了 vi /etc/mysql/mysql.conf.d/mysqld.cnf 2.使用roo ...

  3. 洛谷—— P1003 铺地毯

    https://www.luogu.org/problem/show?pid=1003 题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形 ...

  4. select & epoll

    同步.异步.堵塞和非堵塞差别 同步:发出一个功能调用时.在没有得到结果之前,该调用就不返回 异步:当一个异步过程调用发出后.调用者不能立马得到结果.实际处理这个调用的部件在完毕后.通过状态.通知和回调 ...

  5. psycopg2 ImportError: DLL load failed

    setup.py install 报错  error: command 'mt.exe' failed: No such file or directory  或者 Unable to find vc ...

  6. 深度拷贝java对象

    有时,如,修改session中对象的时候,如果直接修改session中的对象,修改步骤比较多,一部分修改成功,另一部分不成功,这个时候程序报错,数据库会回滚,但是session已经修改一部分了. 这样 ...

  7. JS控制光标定位,定位到文本的某个位置

    这是一个数字密码,要能够智能的跳转到文本的某个位置,就需要通过JS来控制跳转! 1.onkeyup监听 <input class="put" id="number- ...

  8. Intellij Idea创建的第一个JavaWeb程序

    第一个JavaWeb程序 1. 创建 2. 目录结构 src目录用于放java源文件,web目录用于放web资源,WEB-INF是Java web应用固定的存放配置及类库的目录,index.jsp是我 ...

  9. 3.AngularJS-过滤器

    转自:https://www.cnblogs.com/best/p/6225621.html 二.过滤器 使用过滤器格式化数据,变换数据格式,在模板中使用一个插值变量.语法格式如下: {{ expre ...

  10. Spring MVC 返回视图时添加的模型数据------POJO

    POJO(Plain Old Java Objects)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和 EJB混淆起来, 而且简 ...