廢話不說，先看gif效果，覺得不錯的話，就繼續看下去。
該APP起初是參考城覓這個app（界面），之后加了些自己的設計想法，例如底部的ControlTabBar點擊動畫,登錄界面的動畫，電影界面的動畫，控制器轉場動畫，物體下落碰撞動畫，樹葉飄落動畫，新聞界面cell動畫。當然這些動畫的原型是我在cocoaChina上看到的動畫，覺得不錯，然后移植到自己設計的app中，并在大神們的基礎之上改成自己想要的動畫。
當然這個項目我會放在Github上，然后就其中有些動畫說明一下。
動畫一：動態的UITabBar動畫
自定義TaBaController把需要的參數傳入到YALFoldingTabBarController中，這樣的好處是我們只是需要給定參數，其余的操作，例如點擊后的操作只需要在底層寫好就可以了。
+ (void)showMainTabBarViewController {
YALFoldingTabBarController *tabBarController = [[YALFoldingTabBarController alloc]
initWithViewControllers:[self getRootViewController]];
//prepare leftBarItems
YALTabBarItem *item1 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"nearby_icon"]
leftItemImage:nil
rightItemImage:nil];
//prepare rightBarItems
YALTabBarItem *item2 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"meishi"]
leftItemImage:nil
rightItemImage:nil];
YALTabBarItem *item3 = [[YALTabBarItem alloc] initWithItemImage:[UIImage imageNamed:@"plus_icon"]
leftItemImage:nil
rightItemImage:[UIImage imageNamed:@"profile_icon"]];
tabBarController.leftBarItems = @[item1];
tabBarController.rightBarItems = @[item2];
tabBarController.centerBarItems = @[item3];
tabBarController.centerButtonImage = [UIImage imageNamed:@"plus_icon"];
tabBarController.selectedIndex = 1;
//customize tabBarView,設置底部View的高度，item的數據等信息
tabBarController.tabBarView.extraTabBarItemHeight = YALExtraTabBarItemsDefaultHeight;
tabBarController.tabBarView.offsetForExtraTabBarItems = YALForExtraTabBarItemsDefaultOffset;
tabBarController.tabBarView.backgroundColor = [UIColor colorWithRed:94.0/255.0 green:91.0/255.0 blue:149.0/255.0 alpha:1];
tabBarController.tabBarView.tabBarColor = [UIColor colorWithRed:72.0/255.0 green:211.0/255.0 blue:178.0/255.0 alpha:1];
tabBarController.tabBarViewHeight = YALTabBarViewDefaultHeight;
tabBarController.tabBarView.tabBarViewEdgeInsets = YALTabBarViewHDefaultEdgeInsets;
tabBarController.tabBarView.tabBarItemsEdgeInsets = YALTabBarViewItemsDefaultEdgeInsets;
UIWindow *window = [UIApplication sharedApplication].delegate.window;
window.backgroundColor = [UIColor whiteColor];
window.rootViewController = tabBarController;
[window makeKeyAndVisible];
}
自己app中的根控制器，對應的是幾個按鈕點擊的時候進入該控制器中。
+ (NSArray *)getRootViewController{
UIWindow *window = [UIApplication sharedApplication].delegate.window;
window.backgroundColor = [UIColor whiteColor];
GPFirstController *firstViewController = [[GPFirstController alloc] init];
UINavigationController *oneNavigationController = [[UINavigationController alloc] initWithRootViewController:firstViewController];
oneNavigationController.navigationBar.barStyle = UIBarStyleDefault;
GPSecondController *secondViewController = [[GPSecondController alloc] init];
UINavigationController *secondNavigationController = [[UINavigationController alloc] initWithRootViewController:secondViewController];
[secondNavigationController setNavigationBarHidden:YES];
GPThirdController *thirdViewController = [[GPThirdController alloc] init];
UINavigationController *thirdNavigationController = [[UINavigationController alloc] initWithRootViewController:thirdViewController];
thirdNavigationController.navigationBar.barStyle = UIBarStyleDefault;
NSArray *ctrlArr = [NSArray arrayWithObjects:oneNavigationController,secondNavigationController,thirdNavigationController,nil];
return ctrlArr;
}
該控件的動畫主要是在點擊的時候，自定義TabBar中有顏色的View的動態改變，該View的擴展和收縮。并且在收縮的時候位于中間的按鈕的圖片會發生變化。
- (void)animateTabBarViewExpand {
CAAnimation *animation = [CAAnimation animationForTabBarExpandFromRect:self.collapsedBounds toRect:self.expandedBounds];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.mainView.layer.mask addAnimation:animation forKey:nil];
}
- (void)animateTabBarViewCollapse {
CAAnimation *animation = [CAAnimation animationForTabBarCollapseFromRect:self.expandedBounds toRect:self.collapsedBounds];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[self.mainView.layer.mask addAnimation:animation forKey:nil];
}
當然這些動畫是原來大神封裝好了的，你如果有興趣可以到底層看看。
動畫二：登錄界面動畫
//用手擋住眼睛的動畫
[UIView animateWithDuration:0.5 animations:^{
self.imgLeftHand.frame = CGRectMake(self.imgLeftHand.frame.origin.x - offsetLeftHand, self.imgLeftHand.frame.origin.y + 30, self.imgLeftHand.frame.size.width, self.imgLeftHand.frame.size.height);
self.imgRightHand.frame = CGRectMake(self.imgRightHand.frame.origin.x + 52, self.imgRightHand.frame.origin.y + 30, self.imgRightHand.frame.size.width, self.imgRightHand.frame.size.height);
self.imgLeftHandGone.frame = CGRectMake(self.imgLeftHandGone.frame.origin.x - 70, self.imgLeftHandGone.frame.origin.y, 40, 40);
self.imgRightHandGone.frame = CGRectMake(self.imgRightHandGone.frame.origin.x + 30, self.imgRightHandGone.frame.origin.y, 40, 40);
} completion:^(BOOL b) {
}];
該動畫其實就是View的frame動畫，只需要設置View的起終點的frame，然后放在UIView的animation中。
對于物體下落和碰撞動畫，控制器轉場動畫，cell的動畫可以參考我在簡書上之前寫的文章中，那些都是一個又一個的demo，如果你想把那些動畫運用到自己的代碼中，你得反復的代碼調試。
背景樹葉飄落動畫
這個動畫我們需要用到CADisplayLink，CADisplayLink是一個能讓我們以和屏幕刷新率相同的頻率將內容畫到屏幕上的定時器。我們在應用中創建一個新的 CADisplayLink 對象，把它添加到一個runloop中，并給它提供一個 target 和selector 在屏幕刷新的時候調用。
一但 CADisplayLink 以特定的模式注冊到runloop之后，每當屏幕需要刷新的時候，runloop就會調用CADisplayLink綁定的target上的selector，這時target可以讀到 CADisplayLink 的每次調用的時間戳，用來準備下一幀顯示需要的數據。例如一個視頻應用使用時間戳來計算下一幀要顯示的視頻數據。在UI做動畫的過程中，需要通過時間戳來計算UI對象在動畫的下一幀要更新的大小等等。
例如代碼：
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleAction:)];
self.displayLink.frameInterval = 3;
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
frameInterval
屬性是可讀可寫的NSInteger
型值，標識間隔多少幀調用一次selector
方法，默認值是1，即每幀都調用一次。如果每幀都調用一次的話，對于iOS設備來說那刷新頻率就是60HZ也就是每秒60次，如果將frameInterval
設為2 那么就會兩幀調用一次，也就是變成了每秒刷新30次。
同時需要注意的是：
在控制器dealloc時
[self.displayLink invalidate];
self.displayLink = nil;
如果不這樣做的話，就會造成內存泄漏。
而在@selector中的方法是3幀調用一次方法,該方法是一片樹葉的飄落效果。
- (void)handleAction:(CADisplayLink *)displayLink {
UIImage *image = [UIImage imageNamed:@"leaf"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGFloat scale = arc4random_uniform(70) / 100.0;
imageView.transform = CGAffineTransformMakeScale(scale, scale);
CGSize winSize = self.logoView.bounds.size;
CGFloat x = arc4random_uniform(winSize.width);
CGFloat y = - imageView.frame.size.height;
imageView.center = CGPointMake(x, y);
[self.view addSubview:imageView];
[UIView animateWithDuration:arc4random_uniform(5) animations:^{
CGFloat toX = arc4random_uniform(winSize.width);
CGFloat toY = winSize.height - 10;
imageView.center = CGPointMake(toX, toY);
imageView.transform = CGAffineTransformRotate(imageView.transform, arc4random_uniform(M_PI * 2));
imageView.alpha = 0.2;
} completion:^(BOOL finished) {
[imageView removeFromSuperview];
}];
}
選取logo動畫
該動畫只需要封裝好視圖，其動畫在創建的時候就可以做相應的處理。
對外只需要創建和設置屬性即可：
- (DisperseBtn *)disperseBtn {
if (!_disperseBtn) {
_disperseBtn = [[DisperseBtn alloc] initWithFrame:CGRectMake(0, 0, 45, 45)];
_disperseBtn.borderRect = self.view.frame;
_disperseBtn.layer.cornerRadius = _disperseBtn.height/2.0;
_disperseBtn.closeImage = [UIImage imageNamed:@"changImage"];
_disperseBtn.openImage = [UIImage imageNamed:@"changImage"];
_disperseBtn.right = SCREEN_WIDTH - 10;
_disperseBtn.centerY = 42;
}
return _disperseBtn;
}
//####################################################################
self.logoImageArr = @[@"mylogo1.jpg",@"mylogo2.jpg",@"mylogo3.jpg",@"mylogo4.jpg",@"mylogo5.jpg",];
NSMutableArray *marr = [NSMutableArray array];
for (int i = 0; i< self.logoImageArr.count; i++) {
UIButton *btn = [UIButton new];
[btn setBackgroundImage:[UIImage imageNamed:self.logoImageArr[i]] forState:UIControlStateNormal];
[marr addObject:btn];
btn.tag = i;
[btn addTarget:self action:@selector(buttonTagget:) forControlEvents:UIControlEventTouchUpInside];
}
self.disperseBtn.btns = [marr copy];
//#####################################################################
其余的動畫封裝時寫進去即可。
如果說亮點的話，我覺得主要有很多動畫，讓app靈動起來。
下面我就歸納一下這個app實現了哪些功能吧。
1.一套完整的用戶登錄，注冊等功能，包括第三方登錄，在github代碼中我會屏蔽掉APPKey的，如果你需要第三方登錄，你得有自己的appkey。
2.數據，大體分為兩類，一是本地數據，放在plist文件中，例如除新聞外的數據。另一個是通過免費的api，例如通過百度API，獲取新聞數據。
3.地圖，采用的是百度地圖，標記用戶和目的地之間的路線，包括行車路線等信息。
4.其余的都是界面的設計，主要讓app更加好看。
說明：app中有些地方點進去后，沒有數據，這些純屬正常，是本地plist種無數據。
如果您看到這兒來了，并且你覺得這些動畫還不錯的話，麻煩點擊一下下面的喜歡就可以了。當然下幾篇文章也是關于個人對于app的設計和實現，喜歡的話可以點擊關注哦~~~。
最后附上github上的地址:https://github.com/CoDancer/Github_proj.
PS：如果畢業設計是IOS的，有什么地方需要幫助的話可以加QQ：2150393078。
