仿菁优网首页动画效果
原文链接
1、菁优网首页动画效果图
2、动画效果分析
2.1、动画效果一定是UIView动画,因为核心动画是CALayer的动画效果给我们的位移假象,视图的真实位置并没有发生变化。在首页的动画中,按钮的位置是随着转盘的转动在发生变化的。核心动画无法帮我们完成这项任务。在转盘转动的同时,按钮也要进行着和转盘反方向的旋转,并且旋转角度正好相等。转盘在旋转时按钮中的图片和文字相对于我们的视角一直是正向的。
2.3、在点击按钮的时候,会push到对应的控制器。首页是一个没有导航栏的普通控制器。我在应用程序启动的时候,把这个首页控制器包装为一个导航控制器,在控制器的视图将要显示的时候,就隐藏导航栏。push到新的控制器B的时候,就显示导航栏。当从控制器B返回到首页时,控制器B的视图将要消失的时候,隐藏导航栏。【在点击按钮时需要设置代理来完成push控制器】
2.4、在计算按钮的初始位置时,需要借助三角函数分别计算每一个按钮的中心点相对于转盘的位置。2π ➗ 按钮数量 ,获取每一个按钮相对于转盘的平均角度corner。(转盘的宽度 - 按钮的宽度)/ 2 作为 转轴的半径R 。 初始的横坐标 X 就等于 转盘宽度的一半,纵坐标 Y也等于 转盘宽度的一半 。每一个按钮的横坐标X就等于 X + R cos(i corner)纵坐标就等于 Y + R sin(i corner)
2.5、素材获取,通过iTunes下载菁优网的iPhone版本的应用。获取应用程序的ipa文件,鼠标右键 打开显示包内容 选取需要的图片素材。 或者使用 iOS Images Extractor读取ipa文件获取图片
3、核心代码部分
3.1按钮的初始位置布局计算
1 CGFloat corner = -M_PI * 2.0 / titileArray.count; 2 // 半径为 (转盘半径➖按钮半径)的一半 3 CGFloat r = (self.Width - BtnWidth) / 2 ; 4 CGFloat x = self.Width / 2 ; 5 CGFloat y = self.Width / 2 ; 6 _nameArray = titileArray; 7 8 for (int i = 0 ; i < titileArray.count; i++) 9 { 10 UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; 11 btn.frame = CGRectMake(0, 0, BtnWidth, BtnWidth); 12 btn.layer.masksToBounds = mask; 13 btn.layer.cornerRadius = radius; 14 CGFloat num = (i + 0.5) * 1.0; // ➕ 0.5保证竖直方向有两个按钮的布局 如果不加0.5就是水平方向保持一致的布局 三角函数的计算得出来的 15 btn.center = CGPointMake(x + r * cos(corner * num), y + r *sin(corner * num)); 16 btn.backgroundColor = self.BtnBackgroudColor; 17 self.BtnWidth = BtnWidth; 18 19 // 自定义按钮的样式 20 if (type == CL_RoundviewTypeCustom) 21 { 22 UIImageView *imageview = [[UIImageView alloc]init]; 23 imageview.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@",image[i]]]; 24 imageview.contentMode = UIViewContentModeScaleAspectFit ; 25 imageview.userInteractionEnabled = NO; 26 // 设置的按钮的图片的大小 27 imageview.frame = CGRectMake(20, 10, 50, 50); 28 [btn addSubview:imageview]; 29 30 UILabel *label = [[UILabel alloc]init]; 31 label.frame = CGRectMake( imageview.center.x - (BtnWidth - 20)*0.5, CGRectGetMaxY(imageview.frame), BtnWidth - 20 , 20); 32 33 label.text = titileArray[i]; 34 // 设置字体颜色为白色 35 label.textColor = [UIColor whiteColor]; 36 label.textAlignment = NSTextAlignmentCenter; 37 38 label.font = [UIFont systemFontOfSize:11]; 39 // label根据字体自适应label大小,居中对齐 40 label.adjustsFontSizeToFitWidth = YES; 41 label.baselineAdjustment = UIBaselineAdjustmentAlignCenters; 42 43 label.tag = i; 44 [btn addSubview:label]; 45 46 } 47 else 48 { 49 [btn setTitle:titileArray[i] forState:UIControlStateNormal]; 50 [btn setTitleColor:titleColor forState:UIControlStateNormal]; 51 } 52 btn.tag = i; 53 [btn addTarget:self action:@selector(btn:) forControlEvents:UIControlEventTouchUpInside]; 54 [self addSubview:btn]; 55 [_btnArray addObject:btn]; 56 }
3.2、转盘的旋转角度计算
1 #pragma mark -通过旋转手势转动转盘 2 - (void)rotationToMove:(CLCustomRotationGestureRecognizer *)retation 3 { 4 switch (retation.state) { 5 case UIGestureRecognizerStateBegan: 6 break; 7 8 case UIGestureRecognizerStateChanged: 9 { 10 self.rotationAngleInRadians += retation.rotation; 11 [UIView animateWithDuration:.25 animations:^{ 12 13 self.transform = CGAffineTransformMakeRotation(self.rotationAngleInRadians+retation.rotation); 14 for (UIButton *btn in _btnArray) { 15 btn.transform = CGAffineTransformMakeRotation(-(self.rotationAngleInRadians+retation.rotation)); 16 } 17 }]; 18 19 break; 20 } 21 22 // case UIGestureRecognizerStateFailed: 23 // case UIGestureRecognizerStateCancelled: 24 case UIGestureRecognizerStateEnded: 25 { 26 int num = self.rotationAngleInRadians/(M_PI/3); 27 int last = ((int)(self.rotationAngleInRadians*(180/M_PI)))%(60); 28 29 30 if (abs(last)>=30) { 31 32 [UIView animateWithDuration:.25 animations:^{ 33 34 self.transform = CGAffineTransformMakeRotation(M_PI/3*(last>0?(num+1):(num-1))); 35 // tempAngle = M_PI/3*(last>0?(num+1):(num-1)); 36 for (UIButton *btn in _btnArray) { 37 btn.transform = CGAffineTransformMakeRotation(-(M_PI/3*(last>0?(num+1):(num-1)))); 38 } 39 }]; 40 //偏转角度保存。 41 self.rotationAngleInRadians = M_PI/3*(last>0?(num+1):(num-1)); 42 NSLog(@"偏转角度 = %lf ", self.rotationAngleInRadians*(180/M_PI)); 43 44 } 45 else{ 46 47 [UIView animateWithDuration:.25 animations:^{ 48 49 self.transform = CGAffineTransformMakeRotation(M_PI/3*num); 50 for (UIButton *btn in _btnArray) { 51 btn.transform = CGAffineTransformMakeRotation(-(M_PI/3*num)); 52 } 53 }]; 54 //偏转角度保存。 55 self.rotationAngleInRadians = M_PI/3*num; 56 57 } 58 59 break; 60 } 61 default: 62 break; 63 } 64 }
3.3、自定义旋转手势
1 // CLCustomRotationGestureRecognizer.m 2 // 菁优网首页动画 3 4 #import "CLCustomRotationGestureRecognizer.h" 5 #import <UIKit/UIGestureRecognizerSubclass.h> 6 7 @implementation CLCustomRotationGestureRecognizer 8 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event 9 { 10 if ([self state] == UIGestureRecognizerStatePossible) { 11 [self setState:UIGestureRecognizerStateBegan]; 12 } else { 13 [self setState:UIGestureRecognizerStateChanged]; 14 } 15 16 // 获取手指触摸view是的任意一个触摸对象 17 UITouch *touch = [touches anyObject]; 18 // 获取是手指触摸的view 19 UIView *view = [self view]; 20 CGPoint center = CGPointMake(CGRectGetMidX([view bounds]), CGRectGetMidY([view bounds])); 21 CGPoint currentTouchPoint = [touch locationInView:view]; 22 CGPoint previousTouchPoint = [touch previousLocationInView:view]; 23 24 // 根据反正切函数计算角度 25 CGFloat angleInRadians = atan2f(currentTouchPoint.y - center.y, currentTouchPoint.x - center.x) - atan2f(previousTouchPoint.y - center.y, previousTouchPoint.x - center.x); 26 // 给属性赋值 记录每次移动的时候偏转的角度 通过角度的累加实现旋转效果 27 [self setRotation:angleInRadians]; 28 } 29 #pragma mark - 如果触摸结束也就让手势结束 30 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event 31 { 32 // Perform final check to make sure a tap was not misinterpreted. 33 if ([self state] == UIGestureRecognizerStateChanged) { 34 [self setState:UIGestureRecognizerStateEnded]; 35 } else { 36 [self setState:UIGestureRecognizerStateFailed]; 37 } 38 } 39 #pragma mark - 触摸取消也就让手势结束 40 - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event 41 { 42 [self setState:UIGestureRecognizerStateFailed]; 43 } 44 @end
4、源文件下载
Demo下载地址
转载于:https://www.cnblogs.com/francisblogs/p/6233369.html
仿菁优网首页动画效果相关推荐
- android仿ppt,android 仿ppt进入动画效果合集
EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机 ...
- 仿网易‘垃圾箱’动画效果
一说到动画,大家会说到CSS3动画,确实,本文带来一片简单的仿网易'垃圾箱'动画效果,涉及到的知识点是transform.transition transform 属性向元素应用 2D 或 3D 转换 ...
- 11.1011.首页动画效果和书架的实现
Chapter:11.前端页面开发 11.10&11.首页动画效果和书架的实现 实现思路 再写一个书架模块 index-shelf.html ,并且调整首页元素的位置,将该模块与首页 商城 对 ...
- android 仿ppt进入动画效果合集
EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机 ...
- 仿path首页滑动效果
最近在研究path的首页滑动效果,发现啪啪也已经实现了这个效果,自己网上找了代码,又自己试试,发现如果是用两个ImageView 做的话,可以实现,但是用listView的话,滑动就会出问题,现在把代 ...
- Behavior实现UC浏览器首页动画效果
老规矩,还是先上效果图 github地址 前面我也写过一篇关于UC浏览器首页滑动动画效果的文章UC浏览器首页滑动动画实现,只不过这篇文章是通过自定义View的方式实现这个滑动效果.最近在看Behavi ...
- Android 文件夹放大缩小仿IOS融合动画效果
效果如下,打开文件夹时从小到大与最终位置大小吻合,关闭文件夹时缩小到图标原有位置做到无缝融合效果. 过程分析 (一)文件展开后的布局 如上图文件夹打开后布局层次 1.最下面时背景层(背景不移动但有透明 ...
- jQuery图片切换,轮播效果(仿迅雷首页FLASH效果)
jQuery很不错的JS框架,现在已经更新到 1.2.6 了,添加了很多新特性,修正了大量的BUG. 今天,借助他的威力, 用js实现迅雷首页(http://xunlei.com/)FLASH轮换的效 ...
- html仿360首页动画效果图,仿360影视网站模板html源码
资源下载此资源下载价格为4D币,请先登录 资源文件列表 codedown123-0811-61/css/base.css , 1319 codedown123-0811-61/css/style.cs ...
最新文章
- python pptp链接_渗透技巧——PPTP口令的获取与爆破
- Java新手看招 常用开发工具介绍
- c++ 两个多边形区域重叠_2018 年英国中级数学挑战赛中的多边形问题
- matlab的词云,Word Cloud (词云) - JavaScript
- 3.3亿人都在用小程序,中国首次定义的互联网标准又有新进展
- android删除电池功能,Android教程:删除电池信息增加待机时间
- 我的 CDMA 往事
- 文件摆渡是什么意思_数据摆渡是什么意思?如何确保安全性?
- 达梦DM7DM8下载地址 - 2022-03-16更新
- shp文件根据属性导出若干单独shp
- 小布老师_Oracle11g SQL基础入门系列培训(视频教学)
- 美化站长导航源码 自动收录+主动提交百度收录
- 神经网络模型如何应用到实际 - 神经网络模型数学建模案例
- python全局代理_Python3 中代理使用方法总结
- 原创 全城公交标注系统 (2)
- MVC框架简易留言板实例
- 中科院最新通告:弃用影响因子!将替以「期刊超越指数」发布期刊分区表......
- Win10应用商店OneNote安装错误0x800706D9
- 2019年嵌入式行业有哪些就业形势
- Python和Google AppEngine开发基于Google架构的应用软件
热门文章
- 清华北大2018届毕业生去向统计
- 如何在 Linux 中运行 DOS 程序!
- Python_Task01:变量、运算符、数据类型及位运算
- Pin Electronic 接口分析
- 限定checkbox最多选中数量
- 6-10 两个字符串穿插 (10分)pta,c
- IEEE论文投稿流程
- 【三维目标检测】Complex-Yolov4详解(一): 数据处理
- arm电子相册项目——项目要求篇(描述功能)
- qt error: C2491: ‘ ::staticMetaObject‘: definition of dllimport static data member not all