1笔咽、菁優(yōu)網(wǎng)首頁動(dòng)畫效果圖
菁優(yōu)網(wǎng)首頁動(dòng)畫.gif
2桦他、動(dòng)畫效果分析
- 1蔫巩、動(dòng)畫效果一定是UIView動(dòng)畫，因?yàn)楹诵膭?dòng)畫是CALayer的動(dòng)畫效果給我們的位移假象快压，視圖的真實(shí)位置并沒有發(fā)生變化圆仔。在首頁的動(dòng)畫中，按鈕的位置是隨著轉(zhuǎn)盤的轉(zhuǎn)動(dòng)在發(fā)生變化的蔫劣。核心動(dòng)畫無法幫我們完成這項(xiàng)任務(wù)坪郭。在轉(zhuǎn)盤轉(zhuǎn)動(dòng)的同時(shí)，按鈕也要進(jìn)行著和轉(zhuǎn)盤反方向的旋轉(zhuǎn)脉幢，并且旋轉(zhuǎn)角度正好相等歪沃。轉(zhuǎn)盤在旋轉(zhuǎn)時(shí)按鈕中的圖片和文字相對于我們的視角一直是正向的信姓。
轉(zhuǎn)盤和按鈕旋轉(zhuǎn)的位置分析
2.2、在轉(zhuǎn)動(dòng)轉(zhuǎn)盤的時(shí)候既可以單手指旋轉(zhuǎn)绸罗，也可以兩根手指旋轉(zhuǎn)意推。所以自定義旋轉(zhuǎn)手勢，每次旋轉(zhuǎn)轉(zhuǎn)盤的時(shí)候珊蟀，記錄一次轉(zhuǎn)盤的旋轉(zhuǎn)角度菊值。設(shè)置轉(zhuǎn)盤的transform屬性的旋轉(zhuǎn)動(dòng)畫。轉(zhuǎn)盤上有6個(gè)按鈕育灸，按鈕相對于人的視角發(fā)生位移時(shí)腻窒，轉(zhuǎn)動(dòng)的角度是60度。變換一次位置的旋轉(zhuǎn)角度就是60度磅崭。當(dāng)旋轉(zhuǎn)角度小于30度的時(shí)候儿子，轉(zhuǎn)盤返回到旋轉(zhuǎn)前的原始位置，當(dāng)旋轉(zhuǎn)角度大于30度小于90度就旋轉(zhuǎn)60度砸喻。
2.3柔逼、在點(diǎn)擊按鈕的時(shí)候，會(huì)push到對應(yīng)的控制器割岛。首頁是一個(gè)沒有導(dǎo)航欄的普通控制器愉适。我在應(yīng)用程序啟動(dòng)的時(shí)候，把這個(gè)首頁控制器包裝為一個(gè)導(dǎo)航控制器癣漆，在控制器的視圖將要顯示的時(shí)候维咸，就隱藏導(dǎo)航欄。push到新的控制器B的時(shí)候惠爽，就顯示導(dǎo)航欄癌蓖。當(dāng)從控制器B返回到首頁時(shí)，控制器B的視圖將要消失的時(shí)候婚肆，隱藏導(dǎo)航欄租副。【在點(diǎn)擊按鈕時(shí)需要設(shè)置代理來完成push控制器】
2.4旬痹、在計(jì)算按鈕的初始位置時(shí)附井，需要借助三角函數(shù)分別計(jì)算每一個(gè)按鈕的中心點(diǎn)相對于轉(zhuǎn)盤的位置。2π ? 按鈕數(shù)量 两残，獲取每一個(gè)按鈕相對于轉(zhuǎn)盤的平均角度corner永毅。（轉(zhuǎn)盤的寬度 - 按鈕的寬度）/ 2 作為 轉(zhuǎn)軸的半徑R 。 初始的橫坐標(biāo) X 就等于 轉(zhuǎn)盤寬度的一半人弓，縱坐標(biāo) Y也等于 轉(zhuǎn)盤寬度的一半 沼死。每一個(gè)按鈕的橫坐標(biāo)X就等于 X + R * cos（i * corner）縱坐標(biāo)就等于 Y + R * sin（i * corner）
2.5、素材獲取崔赌，通過iTunes下載菁優(yōu)網(wǎng)的iPhone版本的應(yīng)用意蛀。獲取應(yīng)用程序的ipa文件耸别，鼠標(biāo)右鍵 打開顯示包內(nèi)容 選取需要的圖片素材。 或者使用 iOS Images Extractor讀取ipa文件獲取圖片
3县钥、核心代碼部分
3.1按鈕的初始位置布局計(jì)算
CGFloat corner = -M_PI * 2.0 / titileArray.count;
// 半徑為 （轉(zhuǎn)盤半徑?按鈕半徑）的一半
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保證豎直方向有兩個(gè)按鈕的布局 如果不加0.5就是水平方向保持一致的布局 三角函數(shù)的計(jì)算得出來的
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;
// 設(shè)置的按鈕的圖片的大小
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];
// 設(shè)置字體顏色為白色
label.textColor = [UIColor whiteColor];
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont systemFontOfSize:11];
// label根據(jù)字體自適應(yīng)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、轉(zhuǎn)盤的旋轉(zhuǎn)角度計(jì)算
#pragma mark -通過旋轉(zhuǎn)手勢轉(zhuǎn)動(dòng)轉(zhuǎn)盤
- (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))));
}
}];
//偏轉(zhuǎn)角度保存若贮。
self.rotationAngleInRadians = M_PI/3*(last>0?(num+1):(num-1));
NSLog(@"偏轉(zhuǎn)角度 = %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));
}
}];
//偏轉(zhuǎn)角度保存省有。
self.rotationAngleInRadians = M_PI/3*num;
}
break;
}
default:
break;
}
}
3.3、自定義旋轉(zhuǎn)手勢
// CLCustomRotationGestureRecognizer.m
// 菁優(yōu)網(wǎng)首頁動(dòng)畫
#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是的任意一個(gè)觸摸對象
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];
// 根據(jù)反正切函數(shù)計(jì)算角度
CGFloat angleInRadians = atan2f(currentTouchPoint.y - center.y, currentTouchPoint.x - center.x) - atan2f(previousTouchPoint.y - center.y, previousTouchPoint.x - center.x);
// 給屬性賦值 記錄每次移動(dòng)的時(shí)候偏轉(zhuǎn)的角度 通過角度的累加實(shí)現(xiàn)旋轉(zhuǎn)效果
[self setRotation:angleInRadians];
}
#pragma mark - 如果觸摸結(jié)束也就讓手勢結(jié)束
- (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 - 觸摸取消也就讓手勢結(jié)束
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event
{
[self setState:UIGestureRecognizerStateFailed];
}
@end
4谴麦、源文件下載
Demo下載地址Demo地址
