仿菁优网首页动画效果

原文链接

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

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;
    }
}

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

4、源文件下载

Demo下载地址