最近一直在写小说阅读器相关内容,看了当下热门的几款小说APP,发现打开/关闭书籍的时候都加了一个自定义转场动画,但是我们当前的项目是没有的。作为一个对界面效果有独特追求的开发者来说,绝对不能忍,加班也要加上去!
大概看了一下动画效果,发现难度其实不大,简单归纳为下面几步:
-
设置两个视图,一个为书籍封面截图,另一个为打开书籍内容截图,保存书籍封面视图;
-
打开书籍时:书籍封面沿书脊位置(左边Y轴)逆时针旋转90度并放大到书籍视图正常(满屏)大小。书籍内容视图初始位置和书籍封面重合,和书籍封面同时做放大动画;
-
关闭书籍时:第一步保存的书籍封面视图初始位置与书籍内容重合,并提前沿书脊位置(左边Y轴)逆时针旋转90度,做顺时针旋转和缩小动画,直到恢复到书籍封面正常位置。 书籍内容视图直接做缩小动画,缩小到书籍封面正常大小;
-
动画完成时移除两个截图即可。
我做好的效果如下
主要代码:
1、创建UIViewController的分类UIViewController+Transition,用于统一管理UINavigationControllerDelegate,在分类中新增属性bookCoverView,用于保存书籍封面视图,当然你也可以直接在控制器中写代码,只是新增了重复代码而已。
UIViewController+Transition.h
NS_ASSUME_NONNULL_BEGIN
@interface UIViewController (Transition)
/// 书籍封面视图
@property (nonatomic, strong, nullable) UIView *bookCoverView;
@end
NS_ASSUME_NONNULL_END
UIViewController+Transition.m
@interface UIViewController () <UINavigationControllerDelegate>
@end
@implementation UIViewController (Transition)
#pragma mark - Navigation controller delegate
- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
if (operation == UINavigationControllerOperationPush && [fromVC isMemberOfClass:[XPYBookStackViewController class]] && [toVC isMemberOfClass:[XPYReaderManagerController class]] && fromVC.bookCoverView) {
// 当XPYBookStackViewController控制器push到XPYReaderManagerController控制器时需要执行自定义push动画
return [XPYOpenBookAnimation openBookAnimation];
}
if (operation == UINavigationControllerOperationPop && [fromVC isMemberOfClass:[XPYReaderManagerController class]] && [toVC isMe