1、菁优网首页动画效果图
菁优网首页动画.gif
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下载地址Demo地址
