FirstPag毕业设计eAnimation

https://github.com/ShenZhenChenlin/FirstPageAnimation

2、动画效果分析

1.1、动画效果一定是UIView动画，因为核心动画是CALayer的动画效果给我们的位移假象，论文，视图的真实位置并没有发生变化。在首页的动画中，开题报告，按钮的位置是随着转盘的转动在发生变化的。核心动画无法帮我们完成这项任务。在转盘转动的同时，按钮也要进行着和转盘反方向的旋转，并且旋转角度正好相等。转盘在旋转时按钮中的图片和文字相对于我们的视角一直是正向的。

2.2、在转动转盘的时候既可以单手指旋转，也可以两根手指旋转。所以自定义旋转手势，每次旋转转盘的时候，记录一次转盘的旋转角度。设置转盘的transform属性的旋转动画。转盘上有6个按钮，按钮相对于人的视角发生位移时，转动的角度是60度。变换一次位置的旋转角度就是60度。当旋转角度小于30度的时候，转盘返回到旋转前的原始位置，当旋转角度大于30度小于90度就旋转60度。

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按钮的初始位置布局计算

CGFloat corner = -M_PI * 2.0 / titileArray.count; // 半径为 （转盘半径➖按钮半径）的一半 CGFloat r = (self.Width - BtnWidth) / 2 ; CGFloat x = self.Width / 2 ; CGFloat y = self.Width / 2 ; _nameArray = titileArray; for (int i = 0 ; i < titileArray.count; i++) { UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; btn.frame = CGRectMake(0, 0, BtnWidth, BtnWidth); btn.layer.masksToBounds = mask; btn.layer.cornerRadius = radius; CGFloat num = (i + 0.5) * 1.0; // ➕ 0.5保证竖直方向有两个按钮的布局 如果不加0.5就是水平方向保持一致的布局 三角函数的计算得出来的 btn.center = CGPointMake(x + r * cos(corner * num), y + r *sin(corner * num)); btn.backgroundColor = self.BtnBackgroudColor; self.BtnWidth = BtnWidth; // 自定义按钮的样式 if (type == CL_RoundviewTypeCustom) { UIImageView *imageview = [[UIImageView alloc]init]; imageview.image = [UIImage imageNamed:[NSString stringWithFormat:@'%@',image[i]]]; imageview.contentMode = UIViewContentModeScaleAspectFit ; imageview.userInteractionEnabled = NO; // 设置的按钮的图片的大小 imageview.frame = CGRectMake(20, 10, 50, 50); [btn addSubview:imageview]; UILabel *label = [[UILabel alloc]init ]; label.frame = CGRectMake( imageview.center.x - (BtnWidth - 20)*0.5, CGRectGetMaxY(imageview.frame), BtnWidth - 20 , 20); label.text = titileArray[i]; // 设置字体颜色为白色 label.textColor = [UIColor whiteColor]; label.textAlignment = NSTextAlignmentCenter; label.font = [UIFont systemFontOfSize:11]; // label根据字体自适应label大小，居中对齐 label.adjustsFontSizeToFitWidth = YES; label.baselineAdjustment = UIBaselineAdjustmentAlignCenters; label.tag = i; [btn addSubview:label]; }else { [btn setTitle:titileArray[i] forState:UIControlStateNormal]; [btn setTitleColor:titleColor forState:UIControlStateNormal]; } btn.tag = i; [btn addTarget:self action:@selector(btn:) forControlEvents:UIControlEventTouchUpInside]; [self addSubview:btn]; [_btnArray addObject:btn];

3.2、转盘的旋转角度计算

#pragma mark -通过旋转手势转动转盘 - (void)rotationToMove:(CLCustomRotationGestureRecognizer *)retation { switch (retation.state) { case UIGestureRecognizerStateBegan: break; case UIGestureRecognizerStateChanged: { self.rotationAngleInRadians += retation.rotation; [UIView animateWithDuration:.25 animations:^{ self.transform = CGAffineTransformMakeRotation(self.rotationAngleInRadians+retation.rotation); for (UIButton *btn in _btnArray) { btn.transform = CGAffineTransformMakeRotation(-(self.rotationAngleInRadians+retation.rotation)); } }]; break; } // case UIGestureRecognizerStateFailed: // case UIGestureRecognizerStateCancelled: case UIGestureRecognizerStateEnded: { int num = self.rotationAngleInRadians/(M_PI/3); int last = ((int)(self.rotationAngleInRadians*(180/M_PI)))%(60); if (abs(last)>=30) { [UIView animateWithDuration:.25 animations:^{ self.transform = CGAffineTransformMakeRotation(M_PI/3*(last>0?(num+1):(num-1))); // tempAngle = M_PI/3*(last>0?(num+1):(num-1)); for (UIButton *btn in _btnArray) { btn.transform = CGAffineTransformMakeRotation(-(M_PI/3*(last>0?(num+1):(num-1)))); } }]; //偏转角度保存。 self.rotationAngleInRadians = M_PI/3*(last>0?(num+1):(num-1)); NSLog(@'偏转角度 = %lf ', self.rotationAngleInRadians*(180/M_PI)); } else{ [UIView animateWithDuration:.25 animations:^{ self.transform = CGAffineTransformMakeRotation(M_PI/3*num); for (UIButton *btn in _btnArray) { btn.transform = CGAffineTransformMakeRotation(-(M_PI/3*num)); } }]; //偏转角度保存。 self.rotationAngleInRadians = M_PI/3*num; } break; } default: break; } }#p#分页标题#e#

3.3、自定义旋转手势

// CLCustomRotationGestureRecognizer.m // 菁优网首页动画 #import 'CLCustomRotationGestureRecognizer.h' #import <UIKit/UIGestureRecognizerSubclass.h> @implementation CLCustomRotationGestureRecognizer - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { if ([self state] == UIGestureRecognizerStatePossible) { [self setState:UIGestureRecognizerStateBegan]; } else { [self setState:UIGestureRecognizerStateChanged]; } // 获取手指触摸view是的任意一个触摸对象 UITouch *touch = [touches anyObject]; // 获取是手指触摸的view UIView *view = [self view]; CGPoint center = CGPointMake(CGRectGetMidX([view bounds]), CGRectGetMidY([view bounds])); CGPoint currentTouchPoint = [touch locationInView:view]; CGPoint previousTouchPoint = [touch previousLocationInView:view]; // 根据反正切函数计算角度 CGFloat angleInRadians = atan2f(currentTouchPoint.y - center.y, currentTouchPoint.x - center.x) - atan2f(previousTouchPoint.y - center.y, previousTouchPoint.x - center.x); // 给属性赋值 记录每次移动的时候偏转的角度 通过角度的累加实现旋转效果 [self setRotation:angleInRadians]; } #pragma mark - 如果触摸结束也就让手势结束 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { // Perform final check to make sure a tap was not misinterpreted. if ([self state] == UIGestureRecognizerStateChanged) { [self setState:UIGestureRecognizerStateEnded]; } else { [self setState:UIGestureRecognizerStateFailed]; } } #pragma mark - 触摸取消也就让手势结束 - (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event { [self setState:UIGestureRecognizerStateFailed]; } @end