android 数字画圈动画,【iOS】画圈的轨迹动画
动画
最近接到一个需求,需要做一个启动的加载动画,如下图:
load.gif
思考下,可以拆分几个部分
动画拆分
1 . 中间圆圈的旋转动画!
2 . 两边的画线轨迹!
3 . 动态变化的进度显示!
1.中间的圆圈旋转
我这边使用的4张图片,已附上:
>
02.png
03.png
juhua.png
是不是很明显,使用图片的好处就是可以是动画颜色和样式更多变!
那么怎么让它变成旋转的呢?其实很简单,Apple 就已经提供给我们很好的API 以供使用!
首先声明需要使用的图片视图:
/**
加载图
*/
@property (nonatomic,strong) UIImageView * imageView1;
@property (nonatomic,strong) UIImageView * imageView2;
@property (nonatomic,strong) UIImageView * imageView3;
@property (nonatomic,strong) UIImageView * hudImgView;
//旋转角度
@property (nonatomic,assign) CGFloat angle1;
@property (nonatomic,assign) CGFloat angle2;
@property (nonatomic,assign) CGFloat angle3;
@property (nonatomic,assign) CGFloat angle4;
/**
是否停止加载
*/
@property (nonatomic,assign) BOOL isStopLoad;
接下来UI实现部分:
- (void)loadUI
{
CGPoint point = self.center;
CGRect frame = CGRectMake(point.x - 60, point.y - 40, 120, 120);
//背景视图:
_bgImageView = [[UIImageView alloc]initWithFrame:self.bounds];
_bgImageView.image = [UIImage imageNamed:@"loading"];
[self addSubview:_bgImageView];
_imageView1 = [[UIImageView alloc]initWithFrame:frame];
// _imageView1.center = self.center;
_imageView1.image = [UIImage imageNamed:@"01"];
[self addSubview:_imageView1];
_imageView2 = [[UIImageView alloc]initWithFrame:frame];
// _imageView2.center = self.center;
_imageView2.image = [UIImage imageNamed:@"02"];
[self addSubview:_imageView2];
_imageView3 = [[UIImageView alloc]initWithFrame:frame];
// _imageView3.center = self.center;
_imageView3.image = [UIImage imageNamed:@"03"];
[self addSubview:_imageView3];
_hudImgView = [[UIImageView alloc]initWithFrame:frame];
// _hudImgView.center = self.center;
_hudImgView.image = [UIImage imageNamed:@"juhua"];
[self addSubview:_hudImgView];
}
最后一步,也就是关键的旋转动画,在需要开启的地方调用如下这个方法:
ps: 旋转角度和旋转速度可以根据需要自己进行更改!
/**
旋转动画
*/
- (void)startAnimation
{
//选择动画:
CGAffineTransform endAngle1 = CGAffineTransformMakeRotation(_angle1 * (M_PI / 180.0f));
CGAffineTransform endAngle2 = CGAffineTransformMakeRotation(_angle2 * (M_PI / 180.0f));
CGAffineTransform endAngle3 = CGAffineTransformMakeRotation(_angle3 * (M_PI / 180.0f));
CGAffineTransform endAngle4 = CGAffineTransformMakeRotation(_angle4 * (M_PI / 180.0f));
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
_imageView1.transform = endAngle1;
_imageView2.transform = endAngle2;
_imageView3.transform = endAngle3;
_hudImgView.transform = endAngle4;
} completion:^(BOOL finished) {
_angle1 -= 4;
_angle2 += 4;
_angle3 -= 4;
_angle4 += 4;
if (!_isStopLoad) {
[self startAnimation];
}
}];
});
}
2.进度动态显示:
这个就不再赘述,直接上代码:
- (void)loadUI
{
//进度显示Lable
_progressLable = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
_progressLable.center = _hudImgView.center;
_progressLable.textColor = CenterColor;
_progressLable.textAlignment = NSTextAlignmentCenter;
_progressLable.font = [UIFont boldSystemFontOfSize:12];
_progressLable.layer.cornerRadius = CGRectGetWidth(_progressLable.frame)/2;
_progressLable.layer.masksToBounds = YES;
_progressLable.layer.borderColor = CenterColor.CGColor;
_progressLable.layer.borderWidth = 0.8f;
_progressLable.text = @"0%";
[self addSubview:_progressLable];
}
关于进度我这里因为Demo原因,使用的假数据,用的随机数!
/**
进度显示
*/
- (void)startProgressAnimation
{
if (_isStopLoad == YES) {
return;
}
//随机数
_progressNumber += rand()%20;
if (_progressNumber >=100)
{
_progressNumber = 100;
}
_progressLable.text = [NSString stringWithFormat:@"%ld%@",_progressNumber,@"%"];
}
最后一个,前言说到的画线轨迹动画!
很明显,动画轨迹来看,一个直线和一个半圆,
既然如此,那么就可以按照这个想法来进行实现!我们都知道,OC中有个很强大的类,UIBezierPath 轨迹画线!
可供参考的 :
UIBezierPath苹果官方API文献
简书李国安的文章
下面就是代码实现部分,先贴代码:
-(void)drawRect:(CGRect)rect
{
//上半部轨迹:
UIBezierPath * path = [UIBezierPath bezierPath];
//起点
[path moveToPoint:CGPointMake(ScreenWidth, _hudImgView.center.y)];
//直线终点
[path addLineToPoint:CGPointMake(self.center.x+60, _hudImgView.center.y)];
//圆路径
[path addArcWithCenter:_hudImgView.center radius:60.0f startAngle:M_PI*2 endAngle:M_PI*1 clockwise:NO];
//创建一个CAShapeLayer
CAShapeLayer * caShapelayer = [CAShapeLayer layer];
caShapelayer.path = path.CGPath;
//线条宽度
caShapelayer.lineWidth = 1.5f;
caShapelayer.frame = self.bounds;
//线条颜色
caShapelayer.strokeColor = CenterColor.CGColor;
//填充颜色
caShapelayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:caShapelayer];
//下半部轨迹:
UIBezierPath * path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(0, _hudImgView.center.y)];
[path2 addLineToPoint:CGPointMake(self.center.x-60, _hudImgView.center.y)];
[path2 addArcWithCenter:_hudImgView.center radius:60.0f startAngle:M_PI*1 endAngle:M_PI*2 clockwise:NO];
//创建一个CAShapeLayer
CAShapeLayer * caShapelayer2 = [CAShapeLayer layer];
caShapelayer2.path = path2.CGPath;
//线条宽度
caShapelayer2.lineWidth = 1.5f;
caShapelayer2.frame = self.bounds;
//线条颜色
caShapelayer2.strokeColor = CenterColor.CGColor;
//填充颜色
caShapelayer2.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:caShapelayer2];
//开始动画
dispatch_async(dispatch_get_global_queue(0, 0), ^{
[self drawLineAnimation:caShapelayer];
[self drawLineAnimation:caShapelayer2];
});
}
//绘制 Path轨迹
- (void)drawLineAnimation:(CALayer*)layer {
CABasicAnimation *bas = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
bas.duration = 2;
bas.delegate = self;
bas.fromValue = [NSNumber numberWithInteger:0];
bas.toValue = [NSNumber numberWithInteger:1];
[layer addAnimation:bas forKey:@"key"];
}
总体来说,上下部分轨迹,实际上是一样的,所以就分析其中一个就可以了,首先,确定path 轨迹起点,拐点,和终点!
//起点
[path moveToPoint:CGPointMake(ScreenWidth, _hudImgView.center.y)];
//直线终点
[path addLineToPoint:CGPointMake(self.center.x+60, _hudImgView.center.y)];
//圆路径
[path addArcWithCenter:_hudImgView.center radius:60.0f startAngle:M_PI*2 endAngle:M_PI*1 clockwise:NO];
直线路径无需多说,注释已经很清晰了,主要说下,半圆轨迹:
如下方法:
center : 顾名思义就是圆的中心点,学过数学的都知道!
radius: 圆的半径!
startAngle: 圆轨迹起始的弧度!
endAngle : 圆轨迹结束的弧度!
clockwise : 是否顺时针!
- (void)addArcWithCenter:(CGPoint)center
radius:(CGFloat)radius
startAngle:(CGFloat)startAngle
endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise;
轨迹已经给出,那么其余属性见注释,可以尝试自己改动看效果!
至此所有的动画效果都已经完成,在有需要的地方进行调用,就可以了!
ps: 不当之处还请海涵,分享以及记录自己的代码,还请不喜勿喷!!
android 数字画圈动画,【iOS】画圈的轨迹动画相关推荐
- android 矢量粒子动画,iOS CAEmitterLayer实现粒子发射动画效果
iOS实现粒子发射动画效果图 动画效果用 CAEmitterLayer 实现.CAEmitterLayer 显示粒子发射动画,具体的粒子由 CAEmitterCell 封装.代码示例是展示 CAEmi ...
- android抖音点赞动画,iOS仿抖音点赞动画、波浪图、主张图、3D旋转、图片处理、播放器等源码...
iOS精选源码 iOS优质博客 一:介绍在项目中遇到数据展示需求时,往往会通过,以列表的形式展示出数据或者以表格的形式展示.但是并不能直观的观察数据的变化,如果通过图表的形式来展示,就可以更快捷的获取 ...
- android与iPhoneX区别,【苹果iPhoneX评测】Android又遭歧视 连刷朋友圈质量都比iOS低-中关村在线...
[中关村在线]苹果iPhoneX评测: 由于众所周知的原因,安卓上的微信软件并没有采用Android规范的UI,而是采用了与iOS系统相同的设计语言,这也给用户一个错觉--这安卓和iOS上运行的微信无 ...
- Android 自定义view画带指针带动画的上半圆弧刻度盘
之前工作中有用到环形进度条等的,为了赶进度都是在网上找到相似的效果的然后再进行修改.一直都想自己画一个,今天就和大家一起来学习刻度盘的绘制. 先看一下截图: 效果演示请看 刻度盘演示 代码下载:Cal ...
- python画画零基础_[零基础学python]画圈还不简单吗?
画圈?换一个说法就是循环.循环,是高级语言编程中重要的工作.现实生活中,很多事情都是在循环,日月更迭,斗转星移,无不是循环:王朝更迭,寻常百姓,也都是循环. 在python中,循环有一个语句:for语 ...
- ios开发 方形到圆的动画_画个圆动画,的两种实现。iOS 动画由很浅,入浅,当然是 Swift...
方法一,使用 CAShapeLayer 和 UIBezierPath 加上 CABasicAnimation 有一个动画属性 strokeEnd 就算完 方法二,复杂一些.频繁调用 CALayer 的 ...
- 688:画圈游戏(思维)
688: 画圈游戏 时间限制: 1 Sec 内存限制: 128 MB [提交][状态][讨论版] 题目描述 有一天,小乐和小希在玩游戏,游戏规则是这样的,有一块矩形的画板,长为x,宽为y,两个玩家在这 ...
- java画圈_java动态画圈圈。运用多线程,绘图
总结:只是意外的收获吧.之前一篇是老师教的,一个点,从底层开始升起,到鼠标按下的地方开始画圈圈, 现在改变了一下,因为点上升的一个循环和画圈的循环是分开的 现在让点点自己跑,并且边跑边画圈.而且在fo ...
- dll domodal运行时异常_解决装备疑难,计算机丢失***.dll文件方法「设计画圈」
各位小伙伴们大家好 欢迎大家来到[设计画圈] 本次给大家分享关于[计算机丢失***.dll文件解决方法] 如这些熟悉的弹窗 等等...还有很多系统错误 解决方法? 答:修复这些文件 用什么修复? 答: ...
最新文章
- eclipse中 properties文件编码问题
- 方法---课程作业02
- P2801 教主的魔法
- 将1bpp的bmp图像存储为1bpp或者2bpp的tiff格式
- FastTunnel - 打造人人都能搭建的内网穿透工具
- db2时间格式化为时间到时分秒_快捷指令为 iPhone 手机照片添加时间水印
- 内核热补丁,真的安全么?
- EditText焦点问题
- 点讯输入法S60数字键通用版V6.0(官方签名正式版)
- Vue路由history模式踩坑记录:nginx配置解决404问题
- rust最低什么显卡能游戏_Steam游戏音轨终于能单独买 游戏显卡铭瑄值得选
- 华为宣布今年将投入2亿美元推动鲲鹏计算产业发展
- 多线程编程(2): 线程的创建、启动、挂起和退出
- roller java,月光软件站 - 编程文档 - Java - 修改ReadMorePlugin.java,使其支持中文标题(roller webblog)...
- Win10纯净版和官方原版哪个好?
- html之使用session进行服务器之间的跳转以及记录
- 后盾网 html语言视频教程,后盾网HTML5视频教程-
- 揭秘北京奥运会上的中国保镖[转贴]
- 【合规性检查方法-Fitness 2】基于Alignment的拟合度评估方法
- 2Opinion Word Expansion and Target Extraction through Double Propagation(2020-10-18)
热门文章
- Android 打印机----》使用android串口以及ESC/POS指令进行小票打印
- Android内存(RAM)大小信息查看、获取方法和内存分配方法
- 戒烟日志(2017)
- urlib爬取哔哩哔哩搜索
- 总结几个提示“文件不存在”的解决办法
- 一种融合局部和全局空间相关性的交通预测混合模型
- openCV学习之路(2-1)---深度解析imread函数
- 华为荣耀7x计算机,华为荣耀7x怎么样 华为荣耀7x参数配置解析
- 「泡泡面膜」月销6000万的爆品投放方法论
- java mp3转midi_java midi音乐文件播放器