废话不说，先看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。
