仿菁优网首页动画效果

Posted 2020-08-25 Francis

原文链接

1、菁优网首页动画效果图

2、动画效果分析

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

 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下载地址