SwiftUI 动效精讲
第1章 理解 matchedGeometryEffect 的基本原理
1.1_什么是matchedGeometryEffect? 1.2_核心参数 1.3_Namespace的作用与创建 1.4_使用@Namespace创建动画命名空间 1.5_id参数:标识视图的唯一性
第2章 实现简单的视图过渡动画
2.1_在两个独立视图之间创建过渡 2.2_使用@State切换视图状态以触发动画 2.3_同步源视图与目标视图的几何属性 2.4_基础示例:按钮选择指示器动画 2.5_基础示例:缩略图到全屏图的过渡
第3章 控制动画属性与锚点
3.1_properties参数-仅匹配特定几何属性 3.2_使用.size实现尺寸匹配动画 3.3_使用.position实现位置匹配动画 3.4_anchor参数:控制动画的对齐基准点 3.5_不同anchor值的效果对比
第4章 在复杂视图结构中应用
4.1_在List或ForEach循环中应用matchedGeometryEffect 4.2_为动态列表项设置唯一的id 4.3_实现列表项到详情页的平滑过渡 4.4_结合ZStack实现视图层级变换动画 4.5_处理不同父视图间的过渡动画
第5章 解决常见问题与陷阱
5.1_解决动画闪烁或跳跃问题 5.2_处理Namespace作用域不正确的情况 5.3_避免在动画期间出现视图拉伸变形 5.4_调试技巧:使用GeometryReader检查视图帧 5.5_优化性能:减少不必要的视图重绘
第6章 项目一:构建类似 App Store 的卡片展开动画
6.1_布局卡片列表界面 6.2_创建详情页视图 6.3_使用matchedGeometryEffect连接卡片与详情页 6.4_添加背景模糊与关闭按钮动画 6.5_处理滚动视图中的卡片动画
第7章 项目二:实现动态标签栏(Tab Bar)指示器动画
7.1_创建自定义标签栏视图 7.2_为选中的标签添加背景指示器 7.3_使用matchedGeometryEffect实现指示器平滑移动 7.4_同步指示器与页面内容的切换 7.5_调整动画曲线与时长
第8章 项目三:创建“魔法移动”照片墙效果
8.1_使用LazyVGrid构建照片网格 8.2_实现点击缩略图放大为全屏视图 8.3_在网格和全屏视图间应用matchedGeometryEffect 8.4_处理不同宽高比图像的过渡 8.5_添加手势交互以关闭全屏视图