IOS实战 (2) 之 环形渐变色 进度展示条
2016-08-12 16:15
435 查看
实现效果图
实现思路
自定义 View添加 Label
使用 CAShapeLayer 绘制两个同心圆
加动画
核心代码
1.设置 圆形 路径[UIBezierPath bezierPathWithArcCenter:<(CGPoint)> radius:<(CGFloat)> startAngle:<(CGFloat)> endAngle:<(CGFloat)> clockwise:<(BOOL)>
这个工厂方法用于画弧,参数说明如下: center: 弧线中心点的坐标 radius: 弧线所在圆的半径 startAngle: 弧线开始的角度值 endAngle: 弧线结束的角度值 clockwise: 是否顺时针画弧线
2.创建 CAshapeLayer(绘制两个同心圆)
self.garyCircleLayer = [CAShapeLayer layer]; self.garyCircleLayer.frame = self.bounds; self.garyCircleLayer.fillColor = [[UIColor clearColor] CGColor]; //圆形边界颜色 self.garyCircleLayer.strokeColor = [[UIColor colorWithHex:0xd5e0e2] CGColor] ; self.garyCircleLayer.opacity = 0.5; self.garyCircleLayer.lineCap = kCALineCapRound; self.garyCircleLayer.lineWidth = _grayCircleLineWidth; self.garyCircleLayer.path = [garypath CGPath]; [self.layer addSublayer:self.garyCircleLayer];
3.设置渐变图层
self.gradientLayer = [CAGradientLayer layer]; self.gradientLayer.frame = self.bounds; [self.gradientLayer setColors:[NSArray arrayWithObjects: (id)[[UIColor colorWithHex:0xe2962c] CGColor], (id)[[UIColor colorWithHex:0xf5eb70 ] CGColor],nil]]; [self.gradientLayer setLocations:@[@0.2, @0.5, @0.7, @1]]; [self.gradientLayer setStartPoint:CGPointMake(0, 0)]; [self.gradientLayer setEndPoint:CGPointMake(1, 0)]; [self.gradientLayer setMask:self.progressLayer];
4.设置动画
// 复原 [CATransaction begin]; [CATransaction setDisableActions:NO]; [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]]; [CATransaction setAnimationDuration:0]; self.progressLayer.strokeEnd = 0; [CATransaction commit]; [CATransaction begin]; [CATransaction setDisableActions:NO]; [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]]; [CATransaction setAnimationDuration:kAnimationTime]; self.progressLayer.strokeEnd = _percent ; [CATransaction commit];
总结
注意为了适应在 Xib 中创建 的View,需要在 layoutSubview 重新去设置 View 的 Frame.源码下载
源码下载链接相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- Gifski:一个跨平台的高质量 GIF 编码器
- 模仿动画的放大缩小容器
- jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
- Android实现定制返回按钮动画效果的方法
- Android中ViewFlipper的使用及设置动画效果实例详解
- jQuery实现美观的多级动画效果菜单代码
- php判断GIF图片是否为动画的方法
- jQuery实现动画效果circle实例
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 浅析JavaScript动画
- js排序动画模拟-插入排序
- javascript+HTML5的Canvas实现Lab单车动画效果
- 基于javascript实现漂亮的页面过渡动画效果附源码下载