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坐标的调整上。
