返回顶部
i

ios-animation-implementationiOS动画实现

Write Swift animation code using Apple's latest frameworks — SwiftUI animations, Core Animation, and UIKit. Prefer first-party APIs over third-party libraries. Use when implementing iOS animations, writing animation code, building transitions, creating gesture-driven interactions, or converting animation specs/designs into working Swift code. Covers iOS 18 through iOS 26 APIs including KeyframeAnimator, PhaseAnimator, custom Transition protocol, zoom navigation transitions, matchedGeometryEffect

作者: admin | 来源: ClawHub
源自
ClawHub
版本
V 1.2.0
安全检测
已通过
173
下载量
免费
免费
0
收藏
概述
安装方式
版本历史

ios-animation-implementation

iOS 动画实现

编写直接使用 Apple 框架的动画代码。第三方动画库会增加依赖风险,并且往往滞后于新系统版本——Apple 的 API 针对渲染管线进行了充分优化,并且每个 iOS 版本都会获得免费改进。

在编写自定义动画之前

检查系统是否已经处理了你需要的动效。Apple 的 HIG(人机界面指南)指出:许多系统组件会自动包含动效,让你在整个应用中提供熟悉且一致的体验。系统组件还会自动适配无障碍设置和输入方式——Liquid Glass(iOS 26)对直接触摸会做出更强烈的响应,而对触控板则产生柔和的效果。自定义动画无法免费实现这种自适应能力,因此当系统提供动效时,优先使用系统提供的动效。

在以下情况下跳过自定义动画:

  • - 标准导航转场覆盖了你的场景(push、pop、sheet、fullScreenCover)
  • SF Symbol 的 .symbolEffect 提供了你需要的反馈
  • .contentTransition(.numericText) 处理了你的数据变化
  • 系统在 withAnimation 上的默认弹簧动画已经足够

在以下情况下编写自定义动画:

  • - 系统没有提供你需要的空间关系(英雄转场、自定义手势)
  • 你需要协调的多属性编排
  • 动画是定义应用身份的标志性时刻
  • 手势驱动的交互需要自定义进度映射

API 选择

为任务选择合适的 API。从 SwiftUI 动画开始(最简单、最声明式),当需要交互控制时降级到 UIKit,只有在需要图层级精度时才使用 Core Animation。

需求API原因
状态驱动的属性变化withAnimation / .animation(_:value:)声明式,自动插值
多步骤序列动画
PhaseAnimator | 离散阶段,每阶段独立计时 |
| 逐属性时间线控制 | KeyframeAnimator | 每个属性独立的关键帧轨道 |
| 视图间的英雄转场 | matchedGeometryEffect + Namespace | 跨视图身份的几何匹配 |
| 带缩放的导航 push/pop | .navigationTransition(.zoom) | iOS 18+ 内置缩放转场 |
| 自定义视图插入/移除 | Transition 协议遵循 | 基于 TransitionPhase 的修饰符 |
| 视图内内容切换 | .contentTransition() | 数字文本、插值、透明度 |
| 基于滚动位置的效果 | .scrollTransition | 阶段驱动的滚动关联动画 |
| SF Symbol 动画 | .symbolEffect() | 弹跳、脉冲、摆动、呼吸、旋转 |
| 交互式/可中断(UIKit) | UIViewPropertyAnimator | 暂停、恢复、反转、擦洗 |
| 逐图层属性动画 | CABasicAnimation / CASpringAnimation | 阴影、边框、圆角动画 |
| 复杂编排(图层) | CAKeyframeAnimation + CAAnimationGroup | 多属性图层动画 |
| 物理模拟 | UIDynamicAnimator | 重力、碰撞、吸附、附着 |
| 与动画配对的触觉反馈 | .sensoryFeedback 修饰符 | 绑定到值变化 |
| 动画背景渐变 | MeshGradient | 定位彩色点的二维网格动画 |

按类别实现

详细的模式和代码示例位于参考文件中。加载与你任务匹配的文件:

任务参考文件
SwiftUI 声明式动画(withAnimation、弹簧动画、阶段动画、关键帧动画)references/swiftui-animations.md
视图转场(导航、模态、自定义 Transition 协议)
references/transitions.md |
| 手势驱动的交互式动画 | references/gesture-animations.md |
| Core Animation 和 UIKit 动画模式 | references/core-animation.md |

何时加载参考文件

  • - 编写 withAnimation、弹簧参数、PhaseAnimator 或 KeyframeAnimator → swiftui-animations.md
  • 构建导航转场、模态呈现、matchedGeometryEffect 或自定义 Transition → transitions.md
  • 实现拖拽关闭、滑动操作、捏合/旋转或滚动关联效果 → gesture-animations.md
  • 处理 CABasicAnimation、UIViewPropertyAnimator、图层动画或桥接 SwiftUI↔UIKit → core-animation.md

弹簧参数快速参考

弹簧动画是现代 SwiftUI 中的默认动画类型。使用 duration 和 bounce——而不是质量/刚度/阻尼,除非桥接到 UIKit/CA。

预设持续时间弹跳使用场景
.smooth0.50.0默认转场,大多数状态变化
.snappy
0.3 | 0.15 | 微交互、开关、快速反馈 |
| .bouncy | 0.5 | 0.3 | 趣味时刻、吸引注意力 |
| .interactiveSpring | 0.15 | 0.0 | 手势跟踪、拖拽跟随 |
| 自定义 | 可变 | 可变 | .spring(duration: 0.4, bounce: 0.2) |

无障碍与多模态反馈

Apple 的 HIG 指出:让动效成为可选项以及通过使用触觉和音频等替代方式来补充视觉反馈。每个动画都必须处理减少动效设置,重要的状态变化应使用多种反馈渠道——而不仅仅是动画本身。

swift
@Environment(\.accessibilityReduceMotion) private var reduceMotion

// 模式 1:条件动画
withAnimation(reduceMotion ? .none : .spring()) {
isExpanded.toggle()
}

// 模式 2:简化替代方案
.animation(reduceMotion ? .easeOut(duration: 0.15) : .spring(duration: 0.5, bounce: 0.3), value: isActive)

// 模式 3:完全跳过
if !reduceMotion {
view.phaseAnimator(phases) { / ... / }
}

减少动效的备选方案(从最优雅到最不优雅):

  1. 1. 交叉淡入淡出——用透明度转场替代动效
  2. 缩短——相同动画,速度更快(0.1–0.15秒),无弹跳
  3. 即时——.animation(.none) 或完全跳过动画块

取消与可中断性

Apple 的 HIG 指出:不要让用户等待动画完成才能做任何事情,特别是当他们需要多次体验该动画时。每个动画都必须是可中断的。

  • - 弹簧动画会自动重新定位目标——这是默认行为,几乎总是你想要的
  • 对于手势驱动的动画,用户始终处于控制地位——让他们能在中途取消
  • 对于序列动画(KeyframeAnimator、带触发器的 PhaseAnimator),确保 UI 在播放期间保持可交互
  • 除非有关键原因(例如,破坏性操作确认),否则永远不要在动画期间禁用用户交互

性能检查清单

  • - 尽可能在渲染服务器上运行动画——Core Animation 在主线程外运行,SwiftUI 的 drawingGroup() 将渲染移至 Metal
  • 避免动画化视图身份变化(.id() 修饰符)——这会销毁并重新创建视图
  • 当父视图几何变化在动画期间导致子视图布局异常时,使用 geometryGroup()
  • 在动画化阴影时提供显式的 shadowPath——没有它,系统每帧都会重新计算路径
  • 在列表和滚动视图中,避免对每个项目使用模糊/阴影动画——这会导致每个单元格进行离屏渲染
  • 保持 PhaseAnimator 和循环动画轻量——它们会持续运行
  • 对于频繁交互,优先使用系统提供的动画而非自定义动效——Apple 的 HIG 指出:通常避免为频繁发生的 UI 交互添加动效
  • 使用 Instruments → Animation Hitches 模板进行分析,以发现帧率下降

标签

skill ai

通过对话安装

该技能支持在以下平台通过对话安装:

OpenClaw WorkBuddy QClaw Kimi Claude

方式一:安装 SkillHub 和技能

帮我安装 SkillHub 和 ios-animation-implementation-1776110262 技能

方式二:设置 SkillHub 为优先技能安装源

设置 SkillHub 为我的优先技能安装源,然后帮我安装 ios-animation-implementation-1776110262 技能

通过命令行安装

skillhub install ios-animation-implementation-1776110262

下载

⬇ 下载 ios-animation-implementation v1.2.0(免费)

文件大小: 15.87 KB | 发布时间: 2026-4-14 14:37

v1.2.0 最新 2026-4-14 14:37
Version 1.2.0

- Expanded skill description to cover APIs through iOS 26, including new transitions and animation patterns.
- Added detailed guidance on when to use system-provided motion versus custom animation.
- Included a comprehensive API selection table for picking the appropriate animation tool.
- Provided categorized references and quick-loading tips for implementation patterns.
- Added quick reference for SwiftUI spring parameters and common presets.
- Detailed best practices for handling accessibility, Reduce Motion, and multimodal feedback.
- Outlined requirements for animation cancellation, interruptibility, and performance optimization.

Archiver·手机版·闲社网·闲社论坛·羊毛社区· 多链控股集团有限公司 · 苏ICP备2025199260号-1

Powered by Discuz! X5.0   © 2024-2025 闲社网·线报更新论坛·羊毛分享社区·http://xianshe.com

p2p_official_large
返回顶部