深入XYOrigami实现原理视图快照与CATransformLayer的折纸魔法【免费下载链接】XYOrigami项目地址: https://gitcode.com/gh_mirrors/xy/XYOrigamiXYOrigami 是一款轻量级的iOS 折纸动画开源库它以 UIView 分类的形式为 App 带来如纸张般折叠、展开的 3D 视图过渡效果。开发者只需几行代码就能自定义折痕数量、控制动画时长并支持上下左右四个方向的折叠。本文将从源码出发一步步拆解XYOrigami 实现原理视图快照如何变成纸CATransformLayer又如何把平面的纸折出立体感。XYOrigami 是什么一个用纸做过渡的 iOS 动画库XYOrigami 本质上是UIView的一个分类Category灵感来自 HonCheng 的 PaperFold 折叠导航视频但它把用法简化到了极致——只暴露两个方法showOrigamiTransitionWith:负责展开动画hideOrigamiTransitionWith:负责收起动画。核心特性包括 自定义纸张折叠数量folds 支持左、右、上、下四个展开方向⏱️ 动画时长自由调节✅ 完成回调completion block♻️ 完整支持 ARC 自动内存管理下面这张动图就是官方 Demo 的实际效果控制面板以 2 折纸的方式展开露出背后的地图视图。折纸第一步用 renderInContext 拍下视图快照动画要折叠的对象是另一个视图比如上面的地图。但如果直接对真实视图做 3D 旋转图层结构会被打乱动画结束后难以恢复。XYOrigami 的巧妙之处在于先把目标视图渲染成一张图片快照。实现位于 UIViewOrigami.m通过UIGraphicsBeginImageContext开启位图上下文再用[view.layer renderInContext:]把图层内容画进去最后UIGraphicsGetImageFromCurrentImageContext取出 UIImage。这一步相当于给视图拍了一张证件照之后所有折叠操作都在这张照片上进行真实视图始终安全无损。折纸第二步把纸沿折痕切成小条拿到快照后XYOrigami 会按照折叠数量把它切成folds × 2个竖直或水平小条。每个小条对应一个imageFrame宽度为foldWidth frameWidth / (folds * 2)再通过CGImageCreateWithImageInRect从快照中裁剪出对应区域。在 UIViewOrigami.m 的循环中每一条都带有一个初始旋转角度第一条从 ±90° 开始后续折页在 ±180° 之间交替从而形成一正一反的折纸形态——这正是真实纸张对折时的样子。折纸第三步CATransformLayer 的 3D 透视旋转这是整个动画的灵魂。XYOrigami 为每个小条创建了一个CATransformLayer作为关节层并做了三件关键的事设置锚点即折痕jointLayer.anchorPoint被设为折痕所在的边旋转时纸张就沿着这条边翻折完全符合物理直觉。开启 3D 透视在父层上设置transform.m34 -1.0/800.0这是 Core Animation 透视投影的关键参数没有它旋转看起来就是压扁的。旋转动画左右折叠用transform.rotation.y上下折叠用transform.rotation.x配合CABasicAnimation让每个折页从初始角度旋转到 0展开或反向收起。核心逻辑集中在 transformLayerFromImage:Frame:Duration:AnchorPiont:StartAngle:EndAngle: 这一个方法里注释也写得很清楚把图片映射到 transform layer、裁剪、加阴影、开启动画一气呵成。特别的是CATransformLayer会保留子图层真实的 3D 空间位置所以多个折页嵌套叠加后能呈现出层次分明的折叠纵深。让折纸更真实的两个细节阴影与缓动纯几何折叠容易显得假XYOrigami 用两个细节补足了真实感动态阴影每个折页上叠加了一层CAGradientLayer渐变阴影随旋转角度同步做透明度动画UIViewOrigami.m。纸张翻折时阴影浓淡随之变化立体感立刻拉满。正弦缓动主视图的位移动画使用参数化 Keyframe 动画展开用sin(time*π/2)收起用-cos(time*π/2)1见 UIViewOrigami.m让折纸先慢后快、收尾柔和而不是机械地匀速平移。整个动画统一由CATransaction管理时长与完成回调动画结束后才把视图 frame 复位并移除临时图层保证界面干净。状态机防止动画打架动画过程中如果用户连续点击很容易出现折纸动画互相干扰。XYOrigami 在内部维护了一个全局状态XY_Origami_Current_State取值Idle / Update / ShowUIViewOrigami.h展开动画进行中会拒绝重复触发收起完成后才回到空闲状态。这个设计虽小却让动画库在真实项目中足够稳健。一分钟上手两行代码的折纸动画集成非常简单官方 Demo 工程见 ViewController.m核心调用不过如此[self.centerView showOrigamiTransitionWith:self.sideView NumberOfFolds:2 Duration:0.5 Direction:XYOrigamiDirectionFromRight completion:nil];使用步骤将 XYOrigami 文件夹拖入你的 Xcode 工程为工程添加QuartzCore框架#import UIViewOrigami.h调用上面的方法即可。结语回顾整个流程XYOrigami 的实现思路其实是一条清晰的工业化流水线视图快照负责把任意视图变成可折叠的纸按折痕分条决定纸张的形态CATransformLayer 3D 透视完成翻折的立体动画阴影与缓动则负责最后的视觉润色。理解了这四步你就掌握了 iOS 折纸动画的完整实现原理——下次想在 App 里做出惊艳的折叠过渡效果直接参考 UIViewOrigami.m 就能轻松复刻这份折纸魔法。【免费下载链接】XYOrigami项目地址: https://gitcode.com/gh_mirrors/xy/XYOrigami创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/8/20 21:11:05 · 阅读 1.2k 深入XYOrigami实现原理：视图快照与CATransformLayer的折纸魔法
深入XYOrigami实现原理视图快照与CATransformLayer的折纸魔法【免费下载链接】XYOrigami项目地址: https://gitcode.com/gh_mirrors/xy/XYOrigamiXYOrigami 是一款轻量级的iOS 折纸动画开源库它以 UIView 分类的形式为 App 带来如纸张般折叠、展开的 3D 视图过渡效果。开发者只需几行代码就能自定义折痕数量、控制动画时长并支持上下左右四个方向的折叠。本文将从源码出发一步步拆解XYOrigami 实现原理视图快照如何变成纸CATransformLayer又如何把平面的纸折出立体感。XYOrigami 是什么一个用纸做过渡的 iOS 动画库XYOrigami 本质上是UIView的一个分类Category灵感来自 HonCheng 的 PaperFold 折叠导航视频但它把用法简化到了极致——只暴露两个方法showOrigamiTransitionWith:负责展开动画hideOrigamiTransitionWith:负责收起动画。核心特性包括 自定义纸张折叠数量folds 支持左、右、上、下四个展开方向⏱️ 动画时长自由调节✅ 完成回调completion block♻️ 完整支持 ARC 自动内存管理下面这张动图就是官方 Demo 的实际效果控制面板以 2 折纸的方式展开露出背后的地图视图。折纸第一步用 renderInContext 拍下视图快照动画要折叠的对象是另一个视图比如上面的地图。但如果直接对真实视图做 3D 旋转图层结构会被打乱动画结束后难以恢复。XYOrigami 的巧妙之处在于先把目标视图渲染成一张图片快照。实现位于 UIViewOrigami.m通过UIGraphicsBeginImageContext开启位图上下文再用[view.layer renderInContext:]把图层内容画进去最后UIGraphicsGetImageFromCurrentImageContext取出 UIImage。这一步相当于给视图拍了一张证件照之后所有折叠操作都在这张照片上进行真实视图始终安全无损。折纸第二步把纸沿折痕切成小条拿到快照后XYOrigami 会按照折叠数量把它切成folds × 2个竖直或水平小条。每个小条对应一个imageFrame宽度为foldWidth frameWidth / (folds * 2)再通过CGImageCreateWithImageInRect从快照中裁剪出对应区域。在 UIViewOrigami.m 的循环中每一条都带有一个初始旋转角度第一条从 ±90° 开始后续折页在 ±180° 之间交替从而形成一正一反的折纸形态——这正是真实纸张对折时的样子。折纸第三步CATransformLayer 的 3D 透视旋转这是整个动画的灵魂。XYOrigami 为每个小条创建了一个CATransformLayer作为关节层并做了三件关键的事设置锚点即折痕jointLayer.anchorPoint被设为折痕所在的边旋转时纸张就沿着这条边翻折完全符合物理直觉。开启 3D 透视在父层上设置transform.m34 -1.0/800.0这是 Core Animation 透视投影的关键参数没有它旋转看起来就是压扁的。旋转动画左右折叠用transform.rotation.y上下折叠用transform.rotation.x配合CABasicAnimation让每个折页从初始角度旋转到 0展开或反向收起。核心逻辑集中在 transformLayerFromImage:Frame:Duration:AnchorPiont:StartAngle:EndAngle: 这一个方法里注释也写得很清楚把图片映射到 transform layer、裁剪、加阴影、开启动画一气呵成。特别的是CATransformLayer会保留子图层真实的 3D 空间位置所以多个折页嵌套叠加后能呈现出层次分明的折叠纵深。让折纸更真实的两个细节阴影与缓动纯几何折叠容易显得假XYOrigami 用两个细节补足了真实感动态阴影每个折页上叠加了一层CAGradientLayer渐变阴影随旋转角度同步做透明度动画UIViewOrigami.m。纸张翻折时阴影浓淡随之变化立体感立刻拉满。正弦缓动主视图的位移动画使用参数化 Keyframe 动画展开用sin(time*π/2)收起用-cos(time*π/2)1见 UIViewOrigami.m让折纸先慢后快、收尾柔和而不是机械地匀速平移。整个动画统一由CATransaction管理时长与完成回调动画结束后才把视图 frame 复位并移除临时图层保证界面干净。状态机防止动画打架动画过程中如果用户连续点击很容易出现折纸动画互相干扰。XYOrigami 在内部维护了一个全局状态XY_Origami_Current_State取值Idle / Update / ShowUIViewOrigami.h展开动画进行中会拒绝重复触发收起完成后才回到空闲状态。这个设计虽小却让动画库在真实项目中足够稳健。一分钟上手两行代码的折纸动画集成非常简单官方 Demo 工程见 ViewController.m核心调用不过如此[self.centerView showOrigamiTransitionWith:self.sideView NumberOfFolds:2 Duration:0.5 Direction:XYOrigamiDirectionFromRight completion:nil];使用步骤将 XYOrigami 文件夹拖入你的 Xcode 工程为工程添加QuartzCore框架#import UIViewOrigami.h调用上面的方法即可。结语回顾整个流程XYOrigami 的实现思路其实是一条清晰的工业化流水线视图快照负责把任意视图变成可折叠的纸按折痕分条决定纸张的形态CATransformLayer 3D 透视完成翻折的立体动画阴影与缓动则负责最后的视觉润色。理解了这四步你就掌握了 iOS 折纸动画的完整实现原理——下次想在 App 里做出惊艳的折叠过渡效果直接参考 UIViewOrigami.m 就能轻松复刻这份折纸魔法。【免费下载链接】XYOrigami项目地址: https://gitcode.com/gh_mirrors/xy/XYOrigami创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考