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 效果
另外附上 添加了 不做作的弹性动画的效果,为什么不做作?自己试下呗
+ (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];
}];
}
下面效果图,但没有用手机来的爽
最后提一句,两个 View 是需要 重叠在一起的,不然 效果 不对哟