卡片翻页 效果,从 正面 翻转到 反面 (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 是需要 重叠在一起的,不然 效果 不对哟

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容