美文网首页calayer及其子类 与动画相关的iOS开发学习iOS移动端开发
iReader 多看等小说阅读软件 打开的书动画实现

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

作者: 羽惊 | 来源:发表于2016-06-22 01:33 被阅读563次
    openbook.gif

    1.动画分析

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

    //push
    - (void)doPushAnimation:(id<UIViewControllerContextTransitioning>)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<UIViewControllerContextTransitioning>)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

    相关文章

      网友评论

      • 143b072b4565:动画还不错 。 卤煮加油
      • PandaXiong:依耐多 如果所有的ViewController都要使用这种跳转方式,就要写N个跳转类?在跳转类里面应该把那两个ViewController踢出去
        PandaXiong:@PandaXiong 或者当成参数
      • PandaXiong:有缺陷
      • PandaXiong:你这书名 牛逼啊!
      • PandaXiong:大神牛逼啊!
      • NSLogHeart:大神就是屌。
      • 煜寒了:楼主的效果很不错哈~不过还是有几点缺陷,个人比较喜欢的是微信阅读的效果。
        煜寒了:@羽惊 恩 过渡效果不太自然,侧滑返回功能失效,你可以选择优化一下哈~
        羽惊:@煜寒了 那请问下,你觉着哪些地方有缺陷呢

      本文标题:iReader 多看等小说阅读软件 打开的书动画实现

      本文链接:https://www.haomeiwen.com/subject/tsggdttx.html