01.gif
- 在ios中设置动画相对来说是比较容易的。现在有很多动画实现的框架也在不断的完善当中，但是其实在中国应用型APP很少会做很炫酷的动画效果。
- 这一个动画界面在百思不得姐和新浪微博中都有出现。今天利用pop框架来实现以下这个动画效果。
- 界面分析：
- 01：Tabbar分析。首先可以看到Tabbar,tabbar是一种平面的效果，不是立体的， 所以我建议最好是在iOS7或以上去实现。Tabbar中间的那个红色按钮，很明显区别于其他按钮，点击之后是以modal的形式弹出的，并没有包裹Navigation。所以，第一种方法是自定义一个Tabbar.那这样的话就需要取出本身的Tabbar,创建一个View并且仿照Tabbar的功能，全部重写。那这里的话就没有这个必要重写了，因为图片添加之后并没有变得很难看，或者需要一个大改动。所以可以继承自tabbar，再添加一个按钮，重新布局。
- 添加按钮
// 创建按钮加入tabbar
- (UIButton *)publishBtn
{
if (_publishBtn == nil) {
UIButton *publishBtn = [UIButton buttonWithType:UIButtonTypeCustom];
// 设置属性
···
[publishBtn sizeToFit];
[self addSubview:publishBtn];
_publishBtn = publishBtn;
// 监听方法
[publishBtn addTarget:self action:@selector(pushToPublish) forControlEvents:UIControlEventTouchUpInside];
}
return _publishBtn;
}
- (void)pushToPublish
{
CXLPublishController *publish = [[CXLPublishController alloc] init];
// 采用modal的形式
[self.window.rootViewController presentViewController:publish animated:NO completion:nil];
}
- (void)layoutSubviews
{
[super layoutSubviews];
// 根据按钮的类别不同重新排布按钮的frame
self.publishBtn.centerX = self.width*0.5;
self.publishBtn.centerY = self.height*0.5;
CGFloat i = 0;
CGFloat btnW = self.width/5;
for (UIView *tabBarBtn in self.subviews) {
if (![tabBarBtn isKindOfClass:NSClassFromString(@"UITabBarButton")]) continue;
tabBarBtn.width = btnW;
tabBarBtn.x = btnW*i;
if (i>1) {
tabBarBtn.x += btnW;
}
i++;
}
}
- 02.弹出界面之后的界面处理。
- 我们不妨先将界面出现后，界面中的控件先分析动画实现之后的位置，后面再来研究动画如何出现。
- 整个界面有动画的就两个部分，一个是上面的横条状文字，还有就是6个按钮形成的一个整体。背景，以及底部的取消按钮都是不动得。那这一部分不妨用xib来搭建，代码部分就减少一些了。
- 界面的动画，出现时是从上往下的，有次序的。消失时是从上往下的。所以要设置两次不同的动画。点击按钮时会进行跳转，点击取消按钮或者点击界面，界面会消失。6个按钮的排布很明显是利用的九宫格形式，所以搭建也很有规律。
- 在GitHup中星星比较多的一个动画框架 ——POP.其实我们Xcode中的动画已经非常强大简便了，POP在layer图层动画的基础上还添加了view本身的一些动画。所以一些操作还是非常方便容易的。POP具有基础动画，弹性动画，减速动画三类，具体的可以查阅gitHup,它本身就做了很详细的讲解。在这里，动画具有弹跳性，所以选取了POP得弹性动画。
// 九宫格设置
NSInteger totalCount = 3;
CGFloat btnW = CXLScreenW/ totalCount;
CGFloat btnH = btnW;
CGFloat btnFirstH = CXLScreenH * 0.3;
for (int i = 0; i < self.publishs.count; i++) {
// 创建按钮
CXLPublishBtn *button = [CXLPublishBtn buttonWithType:UIButtonTypeCustom];
// 添加
[self.view addSubview:button];
[self.buttons addObject:button];
button.tag = i;
// 点击按钮
[button addTarget:self action:@selector(didPublishButton:) forControlEvents:UIControlEventTouchUpInside];
// 设置数据
button.publishs = self.publishs[i];
// 弹性动画。
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPViewFrame];
// 布局按钮frame
CGFloat buttonX = (i % totalCount) * btnW;
CGFloat buttonY = btnFirstH + (i/totalCount) * btnH;
CGFloat buttonFromY = buttonY - CXLScreenH;
// pop动画实现
anim.fromValue = [NSValue valueWithCGRect: CGRectMake(buttonX, buttonFromY, btnW, btnH)];
anim.toValue = [NSValue valueWithCGRect:CGRectMake(buttonX, buttonY, btnW, btnH)];
// 弹性参数 （抽取常数）
anim.springBounciness = element;
anim.springSpeed = element;
CXLPublish *publish = self.publishs[i];
anim.beginTime = CACurrentMediaTime() + [publish.time doubleValue];
// 按钮添加出现动画
[button pop_addAnimation:anim forKey:nil];
}
- 03逻辑处理
- 点击按钮进行跳转。点击按钮时，先退出整个控制器，再跳转到其他的控制器，也就是说当前控制器已经死了，是没有办法再拿当前的控制器去modal出另外的控制器的。这里可以利用窗口的根控制器进行modal。
CXLPublishTextController *publishText = [[CXLPublishTextController alloc] init];
[[UIApplication sharedApplication].keyWindow.rootViewController presentViewController:publishText animated:YES completion:nil];
- 04.动画离开。不管是点击取消还是点击按钮跳转，还是点击界面，都会有离开动画显示。所以可以把这个动画单独抽取出来，需要调用时再进行调用。
- 界面跳转时，除去离开动画，还有界面跳转，所以可以利用一个block，将跳转界面放入block中。
- (void)dismissAnimatWithTask: (void(^)( )) task
{
// 不能进行交互
self.view.userInteractionEnabled = NO;
// 拿到所有的button
for (int i = 0; i<self.buttons.count; i++) {
CXLPublishBtn *btn = self.buttons[i];
// 利用动画 修改y
POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
anim.toValue = @(btn.height + CXLScreenH);
CXLPublish *publish = self.publishs[i];
anim.beginTime = CACurrentMediaTime( ) + [publish.time doubleValue];
[btn.layer pop_addAnimation:anim forKey:nil];
}
// slogan
// 利用动画 修改y
POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
anim.toValue = @(self.imageV.height + CXLScreenH);
anim.beginTime = CACurrentMediaTime( ) + 0.7;
// 动画完成关闭
[anim setCompletionBlock:^(POPAnimation *anim, BOOL finished) {
[self dismissViewControllerAnimated:NO completion:nil];
// 跳转block
if (task) {
task( );
}
}];
[self.imageV.layer pop_addAnimation:anim forKey:nil];
}
- 整个界面的实现主要是利用POP,当然细节也是比较多得，比如界面离开时的处理，还有开始动画后，取消按钮能否与用户进行交互等，都需要去实现。
网友评论