顺时针、逆时针两种方式减小的倒计时动画

倒计时动画

早些时间，在简书闲逛的时候看到了一篇关于载入LodingView的动画，便默默的收藏了。正好公司接下来的项目要用到，顺手写了一个倒计时的动画。
其实构造十分的简单，由几根粗线条填充点颜色，加上一个路径就构成了这个倒计时。
简单看来就是这样：
第一种是顺时针减小的倒计时：

第二种是逆时针减小的倒计时：

下面上代码分析一下：
这里顺时针减小的时候矩形和圆形我都是用CAShapeLayer这个类来做的。

  //顺时针画矩形_rectShapeLayer = [CAShapeLayer layer];_rectShapeLayer.strokeStart = 0.0f;_rectShapeLayer.strokeEnd = 1.0f;UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];_rectShapeLayer.path = path.CGPath;_rectShapeLayer.fillColor = [UIColor clearColor].CGColor;_rectShapeLayer.lineWidth = 2.0f;_rectShapeLayer.strokeColor = [UIColor redColor].CGColor;[self.layer addSublayer:_rectShapeLayer];//画圆_circleLayer = [CAShapeLayer layer];_circleLayer.strokeStart = 0.0f;_circleLayer.strokeEnd = 1.0f;UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:self.frame.size.width / 2 startAngle:0 endAngle:2*M_PI clockwise:_closewire];_circleLayer.path = path.CGPath;_circleLayer.fillColor = [UIColor clearColor].CGColor;_circleLayer.lineWidth = 2.0f;_circleLayer.strokeColor = [UIColor redColor].CGColor;[self.layer addSublayer:_circleLayer];

CAShapeLayer能够做的东西有很多，比CALayer要丰富些。
CAShapeLayer其实用来画弧形是比较好用的，比用CGContextRef去画要简单明了一些。
实现动画的部分我使用CABasicAnimation来实现的，因为其属性比较简单实用，然后参考了一些大神的博客。

//矩形的动画
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:_closewire?kClockwiseRectAnimationKey:kAntiClockwiseRectAnimationKey];basicAnimation.fromValue = @(0.0);basicAnimation.toValue =  _closewire?@(1.0):@(4.0);basicAnimation.duration = _duration;basicAnimation.fillMode = kCAFillModeForwards;basicAnimation.removedOnCompletion = YES;basicAnimation.delegate = self;if (_closewire) [_rectShapeLayer addAnimation:basicAnimation forKey:nil];else [self.rectLayer addAnimation:basicAnimation forKey:nil];
//圆的动画
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];basicAnimation.fromValue = @(0.0);basicAnimation.toValue = @(1.0);basicAnimation.duration = _duration;basicAnimation.fillMode = kCAFillModeForwards;basicAnimation.removedOnCompletion = YES;basicAnimation.delegate = self;[_circleLayer addAnimation:basicAnimation forKey:nil];

由于顺时针和逆时针的关系，矩形用CAShapeLayer来绘制的时候只能顺时针减小，所以在逆时针的时候我用了drawInContext方法去绘制，而圆则简单许多，在UIBezierPath的类方法中有画圆的详细设置，顺时针和逆时针都能很方便的设置。
矩形逆时针减小的绘制：

UIBezierPath *path = [UIBezierPath bezierPath];//第一段if (self.progress >= 0 && self.progress <= 1) {CGFloat changeX1 = (1- self.progress) * (self.frame.size.width);[path moveToPoint:CGPointMake(0, 0)];[path addLineToPoint:CGPointMake(changeX1, 0)];[path moveToPoint:CGPointMake(0,  self.frame.size.height)];[path addLineToPoint:CGPointMake( 0, 0)];[path moveToPoint:CGPointMake( self.frame.size.width, self.frame.size.height)];[path addLineToPoint:CGPointMake(0, self.frame.size.height)];[path moveToPoint:CGPointMake(self.frame.size.width, 0)];[path addLineToPoint:CGPointMake(self.frame.size.width,self.frame.size.height)];}//第二段if (self.progress >= 1 && self.progress <= 2) {CGFloat changeY1 = (self.progress - 1) *self.frame.size.height;[path moveToPoint:CGPointMake(0 ,self.frame.size.height)];[path addLineToPoint:CGPointMake(0, changeY1)];[path moveToPoint:CGPointMake( self.frame.size.width, self.frame.size.height)];[path addLineToPoint:CGPointMake(0, self.frame.size.height)];[path moveToPoint:CGPointMake(self.frame.size.width, 0)];[path addLineToPoint:CGPointMake(self.frame.size.width,self.frame.size.height)];}//第三段if (self.progress >= 2 && self.progress <= 3) {CGFloat changeX2 = (self.progress - 2) *(self.frame.size.width);[path moveToPoint:CGPointMake(self.frame.size.width, self.frame.size.height)];[path addLineToPoint:CGPointMake(changeX2, self.frame.size.height)];[path moveToPoint:CGPointMake(self.frame.size.width, 0)];[path addLineToPoint:CGPointMake(self.frame.size.width,self.frame.size.height)];}//第四段if (self.progress >= 3 && self.progress <= 4) {CGFloat changeY2 = (4 - self.progress) *self.frame.size.height;[path moveToPoint:CGPointMake( self.frame.size.width, 0)];[path addLineToPoint:CGPointMake(self.frame.size.width, changeY2)];}CGContextAddPath(context, path.CGPath);CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);CGContextSetLineWidth(context, 2.0);CGContextStrokePath(context);

通过改变其中需要变化的数值，并不断地去绘制，这样就得到一个不断减小的图形。
demo我已上传，需要的同学可以去下载：
顺时针、逆时针两种方式减小的倒计时动画

顺时针、逆时针两种方式减小的倒计时动画相关推荐

React-Router4 嵌套路由实现的两种方式以及路由过渡动画的实现方式
刚学习react的路由一个小的后台管理demo 目录结构 // 后台管理页面通常有两种布局方式 // 一种是没有导航栏的登录页面 // 一种是含有导航栏的各功能性页面 // 导航栏不需要每次都渲 ...
iOS两种方式实现淡入淡出动画
一使用转场动画CATransition实现, 其中type 需要使用kCATransitionFade CATransition *transition = [[CATransition alloc ...
Java格式化倒计时的两种方式
Java格式化倒计时的两种方式第一种方式 /*** 入参是一个每秒减小1的秒数* 返回一个格式化的时间* * 该方法具有局限性,他在时间大于1个小时的时候,会返回错误的时间* 因为该方法调用了Dat ...
两种方式（goto语句以及while循环）实现C语言关机小程序
用C语言写的关机小程序简单易懂,可以拿去整蛊室友同学(每天一个挨打小技巧),下面我就给出两种方式实现这个代码,欢迎大家讨论补充. 1.用goto语句实现: #include <stdio.h&g ...
python有两个运行程序分别是什么_运行python程序的两种方式
[单选题]I wonder why ________ are so interested in action movies. [单选题]项目经理的职责不包括以下哪项内容 ? [简答题]结合项目的特点和 ...
如何计算机车启动牵引力,机车启动的两种方式
<机车启动的两种方式>由会员分享,可在线阅读,更多相关<机车启动的两种方式(3页珍藏版)>请在人人文库网上搜索. 1.机车的两种启动方式1. 机车以恒定功率启动的运动过程由公式 ...
Eclipse安装SVN插件的两种方式
登录 | 注册收藏成功确定收藏失败,请重新收藏确定查看所有私信查看所有通知暂没有新通知想要绕过微信小程序开发中的坑吗?不妨来听这个,今晚8点,1小时帮你搞定! 23小时以前 CSDN日报 ...
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错? springboot 两种方式稳定解决跨域问题
继承WebMvcConfigurer 和 WebMvcConfigurerAdapter类依然CORS报错???springboot 两种方式稳定解决跨域问题! 之前我写了一篇文章,来解决CORS报错 ...
周一02.3运行python程序的两种方式
一.运行python程序的两种方式方法一:交互式: 优点:输入一行代码立刻返回结果缺点:无法永久保存代码方法 ...
实验四：使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
贺邦+原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数 ...

顺时针、逆时针两种方式减小的倒计时动画

倒计时动画

顺时针、逆时针两种方式减小的倒计时动画相关推荐

最新文章

热门文章