一个打开/关闭书籍动画(转场动画)

本文介绍了如何为小说阅读器APP添加翻书效果的自定义转场动画,包括打开和关闭书籍时的视觉效果。通过创建UIViewController的分类来统一管理转场,以及实现两个动画类(XPYOpenBookAnimation和XPYCloseBookAnimation)来分别处理push和pop操作。详细代码展示了如何利用视图截图和Core Animation实现这一效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

​​​​​​        最近一直在写小说阅读器相关内容,看了当下热门的几款小说APP,发现打开/关闭书籍的时候都加了一个自定义转场动画,但是我们当前的项目是没有的。作为一个对界面效果有独特追求的开发者来说,绝对不能忍,加班也要加上去!

        大概看了一下动画效果,发现难度其实不大,简单归纳为下面几步:

  1. 设置两个视图,一个为书籍封面截图,另一个为打开书籍内容截图,保存书籍封面视图;

  2. 打开书籍时:书籍封面沿书脊位置(左边Y轴)逆时针旋转90度并放大到书籍视图正常(满屏)大小。书籍内容视图初始位置和书籍封面重合,和书籍封面同时做放大动画;

  3. 关闭书籍时:第一步保存的书籍封面视图初始位置与书籍内容重合,并提前沿书脊位置(左边Y轴)逆时针旋转90度,做顺时针旋转和缩小动画,直到恢复到书籍封面正常位置。 书籍内容视图直接做缩小动画,缩小到书籍封面正常大小;

  4. 动画完成时移除两个截图即可。

我做好的效果如下

主要代码:

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值