尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

从零编写iOS自定义转场动画:基于VCTransitionsLibrary的CEReversibleAnimationController开发你自己的3D效果(开发者指南)

从零编写iOS自定义转场动画:基于VCTransitionsLibrary的CEReversibleAnimationController开发你自己的3D效果(开发者指南) 从零编写iOS自定义转场动画基于VCTransitionsLibrary的CEReversibleAnimationController开发你自己的3D效果开发者指南【免费下载链接】VCTransitionsLibraryA collection of iOS7 animation controllers and interaction controllers, providing flip, fold and all kinds of other transitions.项目地址: https://gitcode.com/gh_mirrors/vc/VCTransitionsLibraryVCTransitionsLibrary 是一个专注于iOS 自定义转场动画的开源库内置 Flip翻页、Fold折叠、Cube魔方、Portal传送门等 10 余种现成效果并配套手势交互控制器让你的页面切换告别千篇一律的默认推入动画。更妙的是库中所有动画都继承自同一个基类 CEReversibleAnimationController——读懂它你就拥有了从零编写自己专属 3D 转场效果的全部钥匙。 先认识一下这个转场动画库iOS 7 起系统开放了自定义 ViewController 转场的 API任何页面切换push、pop、present、dismiss都可以换成你想要的动画。VCTransitionsLibrary 把这套 API 封装成即拿即用的动画控制器全部代码都集中在两个目录里AnimationControllers/ —— 10 种动画控制器每种一个 .h/.m 文件InteractionControllers/ —— 手势交互控制器滑动、捏合你既可以整包引入也可以只拷贝需要的几个文件。VCTransitionsLibrary.podspec 中声明了库的版本与文件范围需要完整仓库时可用git clone https://gitcode.com/gh_mirrors/vc/VCTransitionsLibrary获取。下面几张截图分别展示了库中 Flip、Turn、Cards 三种 3D 转场效果在实际导航流程中的中间帧 两个核心角色动画控制器 交互控制器写自定义转场前先理解两个概念后面全程用得到角色职责一句话比喻动画控制器Animation Controller执行转场动画本体负责演交互控制器Interaction Controller响应用户手势可中途取消/反转负责听指令两者完全解耦任意交互控制器都可以搭配任意动画控制器使用——这也是本库最优雅的设计。️ 关键基类CEReversibleAnimationController 如何做到一键反转打开 CEReversibleAnimationController.m 你会发现它非常短核心只有三件事reverse属性一个 BOOL 开关决定动画正向播还是反向播duration属性统一控制转场时长子类动画通过它取时长模板方法系统调用animateTransition:后基类帮你取出 fromVC / toVC / fromView / toView 四个关键对象再转交给子类的animateTransition:fromVC:toVC:fromView:toView:去做具体动画。// CEReversibleAnimationController.h property (nonatomic, assign) BOOL reverse; // 动画方向 property (nonatomic, assign) NSTimeInterval duration; // 动画时长为什么需要反转以导航控制器为例push 时页面从右往左飞入pop 时就应该反向飞回。你只需要在 delegate 回调里根据操作类型设置reverse YES/NO同一套代码自动适配两个方向不用写两份动画。️ 从零开始三步写出你自己的 3D 转场以最常见的透视缩放3D 效果为例自定义控制器只需三步第 1 步继承基类。新建CEZoom3DAnimationController继承CEReversibleAnimationController即可自动获得reverse、duration和模板方法无需重复实现协议。第 2 步重写animateTransition:fromVC:toVC:fromView:toView:。3D 效果的精髓在两点给变换矩阵设置透视transform.m34 -1.0 / 200.0值越大透视感越弱利用self.reverse决定缩放/旋转方向让 push 与 pop 自然衔接。第 3 步收尾三件套。动画结束后务必把toView.frame设为最终帧、检查[transitionContext transitionWasCancelled]处理取消、最后调用[transitionContext completeTransition:finished]通知系统转场完成。漏掉最后一步导航栏会出现鬼影。想要完整参照推荐精读这个魔方转场的实现 参考实现魔方 3D 转场 CECubeAnimationControllerCECubeAnimationController.m 是本库中最纯粹的 3D 效果——两个页面像立方体的两个面一起旋转用CATransform3DMakeRotation分别构造 fromView 与 toView 的 ±90° 旋转两个视图的anchorPoint按方向动态设置到左/右或上/下边缘保证绕正确轴翻转把容器整体平移半屏营造立方体旋转的空间错觉动画中同步淡入淡出一张 80% 不透明度的黑色阴影视图模拟立方体被光照暗的面立体感立刻拉满。 接入项目在导航控制器中使用自定义转场以 demo 工程的 NavigationController.m 为模板只需实现一个 delegate 方法- (idUIViewControllerAnimatedTransitioning)navigationController:(UINavigationController *)nav animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC { controller.reverse (operation UINavigationControllerOperationPop); return controller; }一行reverse赋值就同时搞定 push 正向、pop 反向——这正是基类设计的回报。present/dismiss 场景同理通过UIViewControllerTransitioningDelegate返回你的控制器即可。✋ 进阶让 3D 转场可交互想让用户用手指接管动画搭一个交互控制器即可。CEBaseInteractionController 是手势控制器的基类其子类负责监听手势滑动、捏合驱动动画进度暴露interactionInProgress属性——系统在转场中询问是否允许交互时只有手势进行中才返回控制器按钮触发的普通转场不受影响。动画控制器与交互控制器可以自由组合比如翻页动画 侧滑返回代码行数几乎不增加。 关键文件速查文件说明CEReversibleAnimationController.h可逆动画基类声明reverse / durationCEFlipAnimationController.m两段快照 关键帧的分页翻转实现CECubeAnimationController.m魔方 3D 旋转 阴影效果CETurnAnimationController.m3D 翻转支持 flipDirection 配置NavigationController.m导航控制器接入完整示例CHANGELOG.md版本更新记录✅ 小结用 VCTransitionsLibrary 写自己的 3D 转场路径非常清晰继承CEReversibleAnimationController→ 用m34透视 reverse方向写动画 → 收尾调用completeTransition:→ 在 delegate 里一行赋值接入。再加上可选的手势交互控制器一个带 3D 效果、可滑动返回的转场就完成了。建议从最简单的 CEFlipAnimationController.m 读起再对照 TransitionsDemo/ demo 工程一个下午就能做出属于自己的转场效果。【免费下载链接】VCTransitionsLibraryA collection of iOS7 animation controllers and interaction controllers, providing flip, fold and all kinds of other transitions.项目地址: https://gitcode.com/gh_mirrors/vc/VCTransitionsLibrary创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表