卡片翻页 效果,从 正面 翻转到 反面 (iOS)

 PS: 写完这篇文章发现了系统封装好的方法，感兴趣可以移步 下一篇文章 效果是不一样的，大家可以比较一下哟

 网上找了，好多翻页的效果，但是都不适合，因为正面反面都是 要显示的view, 我们需要的效果是 从正面 翻页 到反面，显示反面的内容

 这时候 就想自己做了

 view.layer 有一个 transform 的属性，利用这个我们可以达到让我们的view 以center.y 的 y 轴 为中心 翻转

 利用这个特性，我想到了，可以 把将要消失的正面 View 翻转90度，然后让 要显示的view 从 90度 开始 翻转 到 0 度，这样我们看到的就是 正反面 翻转 交替显示，欺骗的是你的眼睛哟，下面上代码

+ (void)transitformShowView:(UIView *)view hiddenView:(UIView *)toView
{
    view.layer.transform = CATransform3DMakeRotation( M_PI/ 2 , 0, 1, 0);
    toView.layer.transform = CATransform3DMakeRotation( M_PI/ 2 , 0, 0, 0);
    [view.superview bringSubviewToFront:view];

    [UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        toView.layer.transform = CATransform3DMakeRotation( M_PI/ 2 , 0, 1, 0);
    } completion:^(BOOL finished) {

        [view.superview bringSubviewToFront:view];

        [UIView animateWithDuration:0.6 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        view.layer.transform = CATransform3DMakeRotation( 0 , 0, 1, 0);
        }completion:nil];

    }];
}

 下面是gif 效果

-----2.gif

 另外附上 添加了 不做作的弹性动画的效果，为什么不做作？自己试下呗

+ (void)transitformShowView:(UIView *)view hiddenView:(UIView *)toView
{
    view.layer.transform = CATransform3DMakeRotation( M_PI/ 2 , 0, 1, 0);
    toView.layer.transform = CATransform3DMakeRotation( M_PI/ 2 , 0, 0, 0);
    [view.superview bringSubviewToFront:view];

    [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:1 initialSpringVelocity:6 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        toView.layer.transform = CATransform3DMakeRotation( M_PI/ 2 , 0, 1, 0);
     
    } completion:^(BOOL finished) {
        [view.superview bringSubviewToFront:view];
        [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.1 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        view.layer.transform = CATransform3DMakeRotation( 0 , 0, 1, 0);
        }completion:nil];
    }];
}

 下面效果图，但没有用手机来的爽

-----4.gif

最后提一句，两个 View 是需要 重叠在一起的，不然 效果 不对哟