小动画渐入弹出界面

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

• 整个界面的实现主要是利用POP,当然细节也是比较多得，比如界面离开时的处理，还有开始动画后，取消按钮能否与用户进行交互等，都需要去实现。