iReader 多看等小说阅读软件 打开的书动画实现

openbook.gif

1.动画分析

打开书的动画 可以拆分成 封面放大 封面翻转 内容页放大
关闭书的动画可以拆分成 封面缩小 封面翻转,内容页缩小
需要注意的是 封面和内容是同步放大缩小的 所以封面和内容的起始frame和结束frame要一致,所以通过创建快照作为临时视图 来实现动画.而真正的封面和内容页 只需要在动画开始的时候隐藏 动画结束的时候展示即可
2.打开书动画代码

//push
- (void)doPushAnimation:(id)transitionContext{
    //这是转场动画将要跳转到的VC
    ReadViewController *toViewController = (ReadViewController *)[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    //这儿是专场动画开始跳的那个VC
    ViewController *fromViewController = (ViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    //获取到在书架页选择的cell
    BookCollectionViewCell *currentCell =  (BookCollectionViewCell *)[fromViewController.collectionView cellForItemAtIndexPath:fromViewController.selectIndexPath];
    
     //创建临时封面页
    UIView *tempView = [currentCell.imageView snapshotViewAfterScreenUpdates:YES];
    tempView.tag = 1001;
    //坐标系转换
    _originRect = [currentCell convertRect:currentCell.imageView.frame toView: containerView];
    tempView.frame = CGRectMake(_originRect.origin.x - (currentCell.frame.size.width / 2), _originRect.origin.y, _originRect.size.width, _originRect.size.height);
    [containerView addSubview:tempView];
    
    //创建临时内容页
    UIView *contentView = [toViewController.view snapshotViewAfterScreenUpdates:YES];
    contentView.frame = _originRect;
    contentView.tag = 1002;
    [containerView addSubview:contentView];
    
    tempView.layer.anchorPoint = CGPointMake(0, 0.5);
    tempView.opaque            = YES;
    //动画开始
    CATransform3D transformblank = CATransform3DMakeRotation(-M_PI_2 , 0.0, 1.0, 0.0);
    transformblank.m34 = 1.0f / 500.0f;
    [UIView animateWithDuration:[self transitionDuration:transitionContext] delay:0.0f options:UIViewAnimationOptionCurveEaseInOut animations:^{
        tempView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);   //封面放大
        contentView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);//内容页放大
        tempView.layer.transform = transformblank; //封面翻转
    } completion:^(BOOL finished) {
        if (finished) {
            tempView.hidden = YES;  //将两个做为动画元素的视图都隐藏
            contentView.hidden = YES;
            [containerView addSubview:toViewController.view];  //真正的内容页加上去
            [transitionContext completeTransition:YES];
        }
    }];
}

3关闭书动画代码

//pop
- (void)doPopAnimation:(id)transitionContext{
    ViewController* toViewController = (ViewController* )[transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    ReadViewController* fromViewController = (ReadViewController *)[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
//    BookCollectionViewCell *currentCell = (BookCollectionViewCell *)[toViewController.collectionView cellForItemAtIndexPath:toViewController.selectIndexPath];
    BookCollectionViewCell *firstCell = (BookCollectionViewCell *)[toViewController.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0 ]];
    UIView *containerView = [transitionContext containerView];
    [containerView addSubview:fromViewController.view];
    [containerView addSubview:toViewController.view];
    fromViewController.view.hidden = YES;
    toViewController.view.hidden = NO;

    //获取push的时候做为动画元素的两个临时视图
    UIView *showView = [containerView viewWithTag:1001];
    showView.hidden = NO;
    [containerView addSubview:showView];
    
    UIView *contentView = [containerView viewWithTag:1002];
    contentView.hidden = NO;
    [containerView addSubview:contentView];
    
    //开始动画
    CATransform3D transformblank = CATransform3DMakeRotation(0.0, 0.0, 1.0, 0.0);
    transformblank.m34 = 1.0f / 500.0f;
    [UIView animateWithDuration:[self transitionDuration:transitionContext]  delay:0.0f options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionShowHideTransitionViews animations:^{
        [toViewController.collectionView reloadData];
        CGRect firstRect = [toViewController.collectionView convertRect:firstCell.frame toView:containerView];
//        CGRect currentRect = [toViewController.collectionView  convertRect:currentCell.frame toView:containerView];  // 获取当前点击cell的frame,如果每次返回到当前点击cell的frame 则使用这个frame
        contentView.frame = firstRect;
        showView.frame = firstRect;
        showView.layer.transform = transformblank;
        
    } completion:^(BOOL finished) {
        toViewController.view.hidden = NO;
        [showView removeFromSuperview];
        [contentView removeFromSuperview];
        [transitionContext completeTransition:YES];
    }];
}

源码:github没弄好 放网盘上链接: http://pan.baidu.com/s/1hsyfOHI 密码: k2n3

你可能感兴趣的:(iReader 多看等小说阅读软件 打开的书动画实现)