首先创建一个播放动画的载体view:

UIView *indicateView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

indicateView.center = self.view.center;

[self.view addSubview:indicateView];

//获取载体的宽高

CGFloat width = indicateView.bounds.size.width;

接着在这个view上添加图层,因为小菊花明显是否很多跟竖条,所以会用到复制图层,那我们暂且设置有10根竖条。继续添加如下代码:

CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.bounds = CGRectMake(0, 0, width, width);

//设置中点为父视图的中点

replicatorLayer.position = CGPointMake(width/2, width/2);

//复制图层次数

replicatorLayer.instanceCount = 10;

//复制延迟

replicatorLayer.instanceDelay = 0.15;

[indicateView.layer addSublayer:replicatorLayer];

接着我们需要创建出小菊花的“叶子”,就是单个的竖条,并且需要将“叶子”添加到复制图层上。如下:

CALayer *layer = [CALayer layer];

//小菊花“叶子”的宽高

layer.bounds = CGRectMake(0, 0, 2, 10);

layer.position = CGPointMake(width/2, 10);

//小菊花的颜色

layer.backgroundColor = [UIColor redColor].CGColor;

[replicatorLayer addSublayer:layer];

可是我们现在运行之后回发现咱们的界面中就一根叶子,那是因为还没有设置复制图层中每个“叶子”的偏移角度。这个也很容易计算,当然是360°/叶子个数。接下来这样添加代码即可:

CGFloat angle = (CGFloat) 2*M_PI/10;

replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);

到现在为止,我们运行程序之后回发现,咱们的小菊花已经出来了

接下来就是完成小菊花的动画效果了,系统小菊花的动画效果也很简易,只是简单的透明度动画,那么再加上动画即可:

CABasicAnimation *alphaAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];

alphaAnim.fromValue = [NSNumber numberWithFloat:0.1];

alphaAnim.toValue = [NSNumber numberWithFloat:0.8];

alphaAnim.duration = 1.5;

alphaAnim.repeatCount = HUGE;

[layer addAnimation:alphaAnim forKey:nil];

好了,效果已经实现了:

接着,如果将上述代码做些简单的改变,比如:

//创建一个播放动画的载体view 宽高大约都是50

UIView *indicateView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];

indicateView.backgroundColor = [UIColor grayColor];

indicateView.center = self.view.center;

[self.view addSubview:indicateView];

//获取载体的宽高

CGFloat width = indicateView.bounds.size.width;

CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.bounds = CGRectMake(0, 0, width, width);

replicatorLayer.position = CGPointMake(width/2, width/2);

replicatorLayer.instanceCount = 8;

replicatorLayer.instanceDelay = 0.15;

[indicateView.layer addSublayer:replicatorLayer];

CALayer *layer = [CALayer layer];

layer.bounds = CGRectMake(0, 0, 10, 10);

layer.position = CGPointMake(width/2, 10);

layer.cornerRadius = 5;

layer.backgroundColor = [UIColor whiteColor].CGColor;

layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);

[replicatorLayer addSublayer:layer];

CGFloat angle = (CGFloat) 2*M_PI/8;

replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);

CABasicAnimation *scaleAnim =[CABasicAnimation animationWithKeyPath:@"transform"];

CATransform3D t = CATransform3DIdentity;

CATransform3D t2 = CATransform3DScale(t, 0.5, 0.5, 0.0);

scaleAnim.fromValue = [NSValue valueWithCATransform3D:t2];

CATransform3D t3 = CATransform3DScale(t, 1.0, 1.0, 0.0);

scaleAnim.toValue = [NSValue valueWithCATransform3D:t3];

CABasicAnimation *alphaAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];

alphaAnim.fromValue = [NSNumber numberWithFloat:0.3];

alphaAnim.toValue = [NSNumber numberWithFloat:0.7];

CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];

groupAnimation.animations = @[alphaAnim,scaleAnim];

groupAnimation.duration = 1.2;

groupAnimation.repeatCount = HUGE;

[layer addAnimation:groupAnimation forKey:nil];

那么他的动画效果就变成这样,也就是自定义的加载等待动画了:

不过我做出来的颜色效果极其丑陋就是了,可以将载体放大点,圆圈放多点,颜色调配一下,效果就比这个好看了。

layui菊花_ios 实现系统加载动画 红色小菊花相关推荐

  1. 自定义 View 之联想手机 ZUI 系统加载动画

    博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此   博主:威威喵  |  博客主页:https://blog.csdn.net/ ...

  2. android菊花动画,仿ios系统加载动画(菊花旋转)

    无需添加图片,通过自定义view方式绘制菊花图,代码极简 效果图: image 一.自定义loadingview: public class LoadingView extends View { pr ...

  3. 微信小程序列表加载动画示例

    微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...

  4. 【微信小程序】自定义加载动画

           前言 在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多. 通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代 ...

  5. CSS 实现加载动画之一-菊花旋转

    CSS 实现加载动画之一-菊花旋转 原文:CSS 实现加载动画之一-菊花旋转 最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...

  6. ionic 去掉启动页的加载动画 菊花转

    ionic 去掉启动页的加载动画 菊花转 在config.xml文件里添加 <preference name="ShowSplashScreenSpinner" value= ...

  7. layui的tree如何实现动态加载_layui tree动态加载 利用CAReplicatorLayer实现的加载动画 - 电脑常识 - 服务器之家...

    layui tree动态加载 利用CAReplicatorLayer实现的加载动画 发布时间:2017-04-12 来源:服务器之家 在上一篇中,笔者简要介绍了CAReplicatorLayer,在本 ...

  8. 直播app系统源码通过CSS液体实现加载动画

    直播app系统源码通过CSS液体实现加载动画 首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...

  9. 安卓设置菊花动画_这种 “小菊花”式加载动画,会让人觉得等了很久

    IT之家讯 9月3日消息,最近一项研究表明,当人们在看电视或者刷网页时,遇到网络不佳而出现的加载动画,有可能影响到人们等待过程的感受.例如我们常见的环形菊花状的加载动动画,当我们在等待视频或页面加载的 ...

最新文章

  1. EF lamda表达式模糊查询关键字字符串数组
  2. 删除已使用过且无法删除的替代
  3. css3动画 --- Transition
  4. 简单的INSERT语句
  5. 极简风海报设计灵感作品欣赏
  6. Bokeh 增加交互方式
  7. Activity (一)工作流简介 :概念与由来
  8. dedecms织梦 list列表页pagesize数量不对
  9. 202204读书-《上瘾:让用户养成使用习惯的四大产品逻辑》
  10. 在WIN系统中直接安装黑苹果系统
  11. 效果最接近《羊了个羊》(卡牌堆叠游戏)的开源代码 微信小程序开源了
  12. php 数组 按拼音首字母 排序 并分组
  13. 与MySQL相识的第二天
  14. 程序员找工作黑名单,避雷针!
  15. android系统息屏设置_安卓实现熄屏功能。
  16. Web前端期末大作业-在线手机商城网站设计(HTML+CSS+JS)
  17. 使用基于Apache Spark的随机森林方法预测贷款风险
  18. DHU deeplearning 深度学习处理文本数据 章节阶测
  19. 汽车零部件高低温振动环境试验服务CNAS检测报告
  20. python画五角星和六角星程序

热门文章

  1. 推荐系统实践 - 第2章
  2. 中国液体早餐市场趋势报告、技术动态创新及市场预测
  3. PostgreSQL EXPLAIN
  4. 【测试】新手刚入也来评iPlayer,其实FLV更适合
  5. 计算机关机慢什么原因,电脑关机速度特别慢是怎么回事|电脑关机速度特别慢如何处理...
  6. PL/SQL developer 导入Excel数据到linux安装的Oracle中文乱码问题
  7. 金笛短信中间件Web版本和研发信息发布
  8. 偶遇“奇市江湖”,淘宝造物节的freestyle你有吗?
  9. PHP数组函数 array_unique (删除数组中重复的值)
  10. MogaFX—现在阿姆利则机场可兑换外币