iOS旋钮动画-CircleKnob
- 欢迎相同喜欢动效的project师/UI设计师/产品添加我们
- iOS动效特攻队–>QQ群:547897182
- iOS动效特攻队–>熊熊:648070256
前段时间和群里的一个设计师配合。依据网上的一个旋钮gif为原型,用代码做出来了。先来看下原型的效果
在看下以下是我做完后成品的效果,加了一个通过移动光源来对阴影控制的效果。这样看起来更立体点。
(那个太阳有点不协调。
。
。)
同一时候附上代码链接https://git.oschina.net/BearXR/CircleKnob
还有单独的下载包http://download.csdn.net/detail/xiongbaoxr/9419655
2。底盘添加点击和拖动的手势
在这里我们要添加手势,还有起始点,终点的角度。
3,添加外围的扇环
因为后面要做阴影,所以除了扇环的底色和效果是用了一个view,其余的每一个小格子我都是新开了一个view,而且将旋钮的圆心位置设置为锚点进行旋转。
#pragma mark - 设置外围的扇环形
- (void)initSetFanView
{CGFloat delta_distance = 26;fanView = [[FanView alloc] initWithFrame:CGRectMake(0, 0, knob_width + delta_distance * 2, knob_width + delta_distance * 2)];fanView.center = knob.center;fanView.backgroundColor = [UIColor clearColor];fanView.userInteractionEnabled = NO;[self.view addSubview:fanView];fanView.knobValue = -startAngleValue;//设置起始点fanView.lightSource_InWindow = lightSource;
}- (void)drawRect:(CGRect)rect
{contextBack = UIGraphicsGetCurrentContext();contextFore = UIGraphicsGetCurrentContext();[self drawFan:contextBackbezierPath:bezierPathBackknobAngle:180 + endAngleValuestrokeColor:[UIColor colorWithRed:202/255.0 green:207/255.0 blue:202/255.0 alpha:1.0f]];[self drawFan:contextForebezierPath:bezierPathForeknobAngle:_knobValuestrokeColor:[UIColor colorWithRed:174/255.0 green:0/255.0 blue:0/255.0 alpha:1.0f]];
}// 绘制扇形
- (void)drawFan:(CGContextRef)context bezierPath:(UIBezierPath *)bezierPath knobAngle:(CGFloat)knobAngle strokeColor:(UIColor *)strokeColor
{CGRect frame = self.frame;CGFloat radius = (CGRectGetWidth(frame) - lineWidth) / 2;CGFloat angleForOne = M_PI / 180.0f;CGFloat circleLength = radius * 2 * M_PI;int gapCount = fanShowCount - 1; //间隙个数CGFloat gapWidth = 5; //间隙距离// 计算须要绘制的角度(角度制)knobAngle = knobAngle < -startAngleValue ? -startAngleValue : knobAngle;knobAngle = knobAngle > 180 + endAngleValue ? 180 + endAngleValue : knobAngle;// 设置弧线路径bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetWidth(frame)/2, CGRectGetHeight(frame)/2) radius:(CGRectGetWidth(frame) - lineWidth)/2.0 startAngle:angleForOne * (180 - startAngleValue) endAngle:angleForOne * (180 + knobAngle) clockwise:YES];CGContextAddPath(context, bezierPath.CGPath);// 设置线的颜色。线宽,接头样式CGContextSetStrokeColorWithColor(context, strokeColor.CGColor);CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);CGContextSetLineWidth(context, lineWidth);CGContextSetLineCap(context, kCGLineCapButt);// 绘制虚线CGFloat drawLineLength = circleLength * (1- (startAngleValue + endAngleValue)/fullAngleValue);CGFloat showLineLengthPer = (drawLineLength - gapWidth * gapCount)/(fanShowCount - 1);CGFloat lengths[2] = {showLineLengthPer,gapWidth};CGContextSetLineDash(context, 0, lengths, 2);CGContextDrawPath(context, kCGPathFillStroke);//最后一个參数是填充类型if (!self.blockViewArray) {self.blockViewArray = [[NSMutableArray alloc] init];}// 绘制小方格view(而且仅仅绘制一次)static BOOL drawBlock = NO;if (!drawBlock) {drawBlock = YES;for (int i = 1; i < fanShowCount; i++) {CGFloat blockWidth = lineWidth + 8;CGFloat blockHeight = 5;CGFloat block_x = CGRectGetWidth(frame) / 2 - radius - blockWidth/2;CGFloat block_y = CGRectGetHeight(frame) / 2;// 角度修正if (blockHeight > gapWidth) {block_y = block_y - blockHeight/2;}else{block_y = block_y + (gapWidth - blockHeight)/2;}// 方格view 可辅助绘制垂直平分线ViewWithAutoShadow *viewBlock = [[ViewWithAutoShadow alloc] initWithFrame:CGRectMake(block_x, block_y, blockWidth, blockHeight)];viewBlock.showAssistPoint = NO;viewBlock.backgroundColor = [UIColor colorWithRed:248/255.0 green:238/255.0 blue:237/255.0 alpha:1.0f];[self addSubview:viewBlock];// 依据锚点旋转CGFloat blockAngle = (180 + startAngleValue + endAngleValue)/fanShowCount*i - startAngleValue;CGAffineTransform rotate = GetCGAffineTransformRotateAroundPoint1(viewBlock.center.x, viewBlock.center.y, CGRectGetWidth(frame)/2, CGRectGetHeight(frame)/2, blockAngle/180.0 * M_PI);[viewBlock setTransform:rotate];AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];[viewBlock drawShadowEffectWithSourcePoint:_lightSource_InWindow assistInView:myDelegate.window];[self.blockViewArray addObject:viewBlock];}}
}
4,添加动画效果
给底盘和扇环都添加动效。里面用了定时器。关于定时器能够看參考这篇博客http://blog.csdn.net/xiongbaoxr/article/details/50580701
// 运行动画
- (void)changeRadiusWithAnimation:(CGFloat)radius lastRadius:(CGFloat)lastRadius duration:(CGFloat)duration
{CGFloat countAll = ABS(radius - lastRadius);double delaySeconds = 0.001f;CGFloat animateCount = duration/delaySeconds;__block int i = 0;dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);dispatch_source_t timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, queue);dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, delaySeconds * NSEC_PER_SEC, 0);dispatch_source_set_event_handler(timer, ^{dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{if (i >= animateCount) {dispatch_source_cancel(timer);}else{i ++;dispatch_sync(dispatch_get_main_queue(), ^{// 扇环进度条动画CGFloat anglePer = countAll/animateCount * i;int k = radius > lastRadius ?
5。最后一步是处理阴影效果,里面涉及的东西比較多。
不详解代码,说一下思路。关于阴影处理的主要是这个类 ViewWithAutoShadow.h
5.1,首先我们设置一个光源点,这个小太阳就是我们的光源所在的位置
5.2,为了便于调试和理解,我对全部须要做投影效果的view画出了其与光源的连线,view的垂直平分线。而且进行了对应的延长。
同一时候也把view的四个顶点和中心点也描出来了
5.3。注意看,每一个夹脚处都有一个小的出头部分。这就是阴影的偏移量。
依照这个偏移量来设置阴影就会有一种仿真的效果。
5.4,我们把阴影效果设置上去看下终于的效果,是不是開始有点感觉了?
5.5最后把全部的辅助线都关掉。再看看效果
6,先就这么多。花了好几个晚上做出来的。想弄清原理的话主要还是在代码里面。代码凝视写的也比較多。
欢迎有兴趣做动效的私聊我啊。纯粹是兴趣,不为不论什么利益。
iOS旋钮动画-CircleKnob相关推荐
- [iOS]过渡动画之高级模仿 airbnb
注意:我为过渡动画写了两篇文章: 第一篇:[iOS]过渡动画之简单模仿系统,主要分析系统简单的动画实现原理,以及讲解坐标系.绝对坐标系.相对坐标系,坐标系转换等知识,为第二篇储备理论基础.最后实现 M ...
- iOS核心动画学习整理
最近利用业余时间终于把iOS核心动画高级技巧(https://zsisme.gitbooks.io/ios-/content/chapter1/the-layer-tree.html)看完,对应其中一 ...
- iOS 核心动画 Core Animation浅谈
代码地址如下: http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVi ...
- ios uiview动画_iOS UIView动画
ios uiview动画 In this tutorial, we'll be animating our UI Views in various ways in the iOS Applicatio ...
- iOS核心动画详解swift版----基础动画
2019独角兽企业重金招聘Python工程师标准>>> iOS核心动画详解swift版---基础动画 创建工程,添加2个ViewController,通过rootViewContro ...
- ae制h5文字动画_大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
- iOS 常用动画第三方
动画 Core Animation笔记,基本的使用方法 - Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组. awesome- ...
- iOS 文字动画,文字逐个显示
随手记: 对于iOS文字动画,首先想到的应该是基于CoreText框架将文字每个都写出来,加上定时器给定每个字显示的时间,这是一种思维方式: #import "ViewController. ...
- android 2048 动画,大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画
前段时间听部门老大说,Airbnb出了个移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/iOS原生动画的形 ...
最新文章
- RPM快速打包2017-08-21
- Cisco路由器配置命令之模式转换命令
- zookeeper做集群后启动不了,大部分原因是防火墙未关闭
- jcaptcha maven
- 2 引入失败_Curse选择WE,RNG天价引援失败,上单几乎只剩一个选项
- Python+sklearn使用线性回归算法预测儿童身高
- JVM Java内存区域 与 内存溢出 (系列号1)
- 计算机网络—传输层(思维导图)
- 7 Object类型
- 操作系统进程调度算法(c语言实现)
- av终结者特征及防治方法
- 三星手机和计算机如何连接打印机,WIFI当道 手把手教你如何实现无线打印
- AD19原理图的设计流程
- 如何在 Python 中调用函数?九种方法任你挑选
- 如何关闭打开文件安全警告
- 跨境电商运营:亚马逊运营如何分析店铺数据
- 宿骆氏亭寄怀崔雍崔衮
- 如何隐藏TPageControl Delphi控件的选项卡
- 音频转文字软件有哪些?推荐几个录音转文字工具
- GitHub+hexo搭建个人博客(2019新版超详细教程)
热门文章
- JAVA实现数值的整数次方(《剑指offern》)
- 英伟达对ARM、Linux开放光线追踪,SDK已就位,网友:switch也能跑光追的节奏?...
- 北区首届科技文化潮流节启幕!诚邀科技企业参展,共同打造海淀北部最大科技“party”...
- 能迂回,会绕路的开源游戏AI:解决怪物撞墙卡死角
- AI独角兽增援抗疫拉锯战,旷视守“城”,依图出“机”
- 又是加拿大!连年拒签NeurIPS参会者被指太荒唐,Hinton亲自过问也没辙
- Go 语言:The Laws of Reflection 中文版
- MySQL AHI 实现解析
- CentOS6.5上源码安装MongoDB3.2.1
- ios ble 参考