layui菊花_ios 实现系统加载动画 红色小菊花
首先创建一个播放动画的载体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 实现系统加载动画 红色小菊花相关推荐
- 自定义 View 之联想手机 ZUI 系统加载动画
博主声明: 转载请在开头附加本文链接及作者信息,并标记为转载.本文由博主 威威喵 原创,请多支持与指教. 本文首发于此 博主:威威喵 | 博客主页:https://blog.csdn.net/ ...
- android菊花动画,仿ios系统加载动画(菊花旋转)
无需添加图片,通过自定义view方式绘制菊花图,代码极简 效果图: image 一.自定义loadingview: public class LoadingView extends View { pr ...
- 微信小程序列表加载动画示例
微信小程序列表加载动画 微信小程序列表加载动画示例 实现思路 什么是动画? 导航栏设置 列表动画加载 完整代码demo 微信小程序列表加载动画示例 初学微信小程序开发,记录一下.网上找了很久这种效果, ...
- 【微信小程序】自定义加载动画
前言 在编写微信小程序的代码时,我们会发现:原生加载动画样式不多,可供我们设置的参数也不多. 通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代 ...
- CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转 原文:CSS 实现加载动画之一-菊花旋转 最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
- ionic 去掉启动页的加载动画 菊花转
ionic 去掉启动页的加载动画 菊花转 在config.xml文件里添加 <preference name="ShowSplashScreenSpinner" value= ...
- layui的tree如何实现动态加载_layui tree动态加载 利用CAReplicatorLayer实现的加载动画 - 电脑常识 - 服务器之家...
layui tree动态加载 利用CAReplicatorLayer实现的加载动画 发布时间:2017-04-12 来源:服务器之家 在上一篇中,笔者简要介绍了CAReplicatorLayer,在本 ...
- 直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画 首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
- 安卓设置菊花动画_这种 “小菊花”式加载动画,会让人觉得等了很久
IT之家讯 9月3日消息,最近一项研究表明,当人们在看电视或者刷网页时,遇到网络不佳而出现的加载动画,有可能影响到人们等待过程的感受.例如我们常见的环形菊花状的加载动动画,当我们在等待视频或页面加载的 ...
最新文章
- EF lamda表达式模糊查询关键字字符串数组
- 删除已使用过且无法删除的替代
- css3动画 --- Transition
- 简单的INSERT语句
- 极简风海报设计灵感作品欣赏
- Bokeh 增加交互方式
- Activity (一)工作流简介 :概念与由来
- dedecms织梦 list列表页pagesize数量不对
- 202204读书-《上瘾:让用户养成使用习惯的四大产品逻辑》
- 在WIN系统中直接安装黑苹果系统
- 效果最接近《羊了个羊》(卡牌堆叠游戏)的开源代码 微信小程序开源了
- php 数组 按拼音首字母 排序 并分组
- 与MySQL相识的第二天
- 程序员找工作黑名单,避雷针!
- android系统息屏设置_安卓实现熄屏功能。
- Web前端期末大作业-在线手机商城网站设计(HTML+CSS+JS)
- 使用基于Apache Spark的随机森林方法预测贷款风险
- DHU deeplearning 深度学习处理文本数据 章节阶测
- 汽车零部件高低温振动环境试验服务CNAS检测报告
- python画五角星和六角星程序
热门文章
- 推荐系统实践 - 第2章
- 中国液体早餐市场趋势报告、技术动态创新及市场预测
- PostgreSQL EXPLAIN
- 【测试】新手刚入也来评iPlayer,其实FLV更适合
- 计算机关机慢什么原因,电脑关机速度特别慢是怎么回事|电脑关机速度特别慢如何处理...
- PL/SQL developer 导入Excel数据到linux安装的Oracle中文乱码问题
- 金笛短信中间件Web版本和研发信息发布
- 偶遇“奇市江湖”,淘宝造物节的freestyle你有吗?
- PHP数组函数 array_unique (删除数组中重复的值)
- MogaFX—现在阿姆利则机场可兑换外币