QQ阅读navigationBar翻转动画

QQ阅读 书架界面长按书籍 navigationBar翻转动画

之前用了QQ阅读App 无意中发现这个动画，觉得还挺不错，就学习着仿写了一个。

675384-02d6ddc37f1b1dd1.gif

一开始 就用CATransform3D开始做，最后虽然整体效果是差不多了，但是细节不太完善。期间也想起了系统的动画，有一种应该可以达到这种效果。就带着试试的态度，再次着手开始做。

• 首先，要有一个UINavigationController ,为了颜色一致(颜色统一用 [UIColor colorWithRed:99/255.0 green:161/255.0 blue:247/255.0 alpha:1.0];),
  给navigationBar给一个同色的图片。

UIColor * color = [UIColor colorWithRed:99/255.0 green:161/255.0 blue:247/255.0 alpha:1.0];
[[UINavigationBar appearance]setBackgroundImage:[self imageWithColor:color Size:CGSizeMake(CGRectGetWidth(self.window.bounds), 64)] forBarMetrics:UIBarMetricsDefault];
-(UIImage *)imageWithColor:(UIColor *)color Size:(CGSize)size
{
        CGRect rect = CGRectMake(0.0f, 0.0f, size.width, size.height);
        UIGraphicsBeginImageContext(rect.size);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetFillColorWithColor(context, [color CGColor]);
        CGContextFillRect(context, rect);
        UIImage *image =UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
}

Snip20160114_5.png

• 然后，给navigationBar 建2个同色的subView。

675384-b8f233a0569d0f42.png

同时给 + 和 完成 2个按钮添加相同的方法。

- (IBAction)btnClicked:(UIButton *)sender {
    [self testAnimation:_isFlip];
    _isFlip=!_isFlip;
}

• 其次，就是添加subView和动画效果。
  -(void)naviBarAddSubView{

    _subView1.frame=CGRectMake(0, -20, CGRectGetWidth([UIScreen mainScreen].bounds), 64);
    _subView2.frame=CGRectMake(0, -20, CGRectGetWidth([UIScreen mainScreen].bounds), 64);
    [self.navigationController.navigationBar addSubview:_subView1];
    [self.navigationController.navigationBar addSubview:_subView2];
    self.navigationController.navigationBar.layer.masksToBounds=YES;
        
    }
  
    -(void)testAnimation:(BOOL)flip{
  
    CATransition *animation = [CATransition animation];
    animation.delegate = self;
    animation.duration = 0.4;
    animation.timingFunction = UIViewAnimationCurveEaseInOut;
    animation.type = @"cube";
    animation.subtype = !flip ? kCATransitionFromTop : kCATransitionFromBottom;
  
    NSUInteger index2 = [[self.navigationController.navigationBar subviews] indexOfObject:_subView2];
    NSUInteger index1 = [[self.navigationController.navigationBar subviews] indexOfObject:_subView1];
    [self.navigationController.navigationBar exchangeSubviewAtIndex:index2 withSubviewAtIndex:index1];
    [self.navigationController.navigationBar.layer addAnimation:animation forKey:@"animation"];
  
    }
  

上面的CATransition type 系统自带类型一共有12种。这里就不多赘述了，大家自行搜索整理。

• 然而，效果出来出来是这个鬼样子的。

Untitled8.gif

为什么会是这样呢？想来想去，animation 不应该直接加在
self.navigationController.navigationBar.layer 上，navigationBar本身高度并不是64。于是灵机一动，先给navigationBar添加一个高度64的subView，2个需要翻转的subView再加在其上，修改代码。

-(UIView *)naviBackgroundView{
    if(!_naviBackgroundView){
        _naviBackgroundView=[UIView new];
        _naviBackgroundView.frame=CGRectMake(0, -20, CGRectGetWidth([UIScreen mainScreen].bounds), 64);
        _naviBackgroundView.backgroundColor=[UIColor clearColor];
    }
    return _naviBackgroundView;
}

    -(void)naviBarAddSubView{

        [self.navigationController.navigationBar addSubview:self.naviBackgroundView];
        _subView1.frame=CGRectMake(0, 0, CGRectGetWidth([UIScreen mainScreen].bounds), 64);
        _subView2.frame=CGRectMake(0, 0, CGRectGetWidth([UIScreen mainScreen].bounds), 64);
        [_naviBackgroundView addSubview:_subView2];
        [_naviBackgroundView addSubview:_subView1];
        
    }
    -(void)testAnimation:(BOOL)flip{

        CATransition *animation = [CATransition animation];
        animation.delegate = self;
        animation.duration = 0.4;
        animation.timingFunction = UIViewAnimationCurveEaseInOut;
        animation.type = @"cube";
        animation.subtype = !flip ? kCATransitionFromTop : kCATransitionFromBottom;
            
        NSUInteger index2 = [[_naviBackgroundView subviews] indexOfObject:_subView2];
        NSUInteger index1 = [[_naviBackgroundView subviews] indexOfObject:_subView1];
        [_naviBackgroundView exchangeSubviewAtIndex:index2 withSubviewAtIndex:index1];
        [_naviBackgroundView.layer addAnimation:animation forKey:@"animation"];

    }

• 最后，再来看看效果。

最终效果.gif

效果应该是一模一样了，其实整个代码很短也没什么难度，关键在于动画加在哪儿及y坐标的调整上。