iOS动画实现

ios-animation-implementation

by anderskev

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, symbol effects, mesh gradients, and SwiftUI-UIKit animation bridging.

3.9k内容与创意未扫描2026年3月23日

安装

claude skill add --url github.com/openclaw/skills/tree/main/skills/anderskev/ios-animation-implementation

文档

iOS Animation Implementation

Write animation code that uses Apple's frameworks directly. Third-party animation libraries add dependency risk and often lag behind new OS releases — Apple's APIs are well-optimized for the render pipeline and get free improvements with each iOS version.

Before Writing Custom Animation

Check whether the system already handles the motion you need. Apple's HIG: "Many system components automatically include motion, letting you offer familiar and consistent experiences throughout your app." System components also automatically adjust for accessibility settings and input methods — Liquid Glass (iOS 26) responds with greater emphasis to direct touch and produces subdued effects for trackpad. Custom animation can't match this adaptiveness for free, so prefer system-provided motion when it exists.

Skip custom animation when:

  • Standard navigation transitions cover your case (push, pop, sheet, fullScreenCover)
  • SF Symbol .symbolEffect provides the feedback you need
  • .contentTransition(.numericText) handles your data change
  • The system's default spring on withAnimation is sufficient

Write custom animation when:

  • The system doesn't provide the spatial relationship you need (hero transitions, custom gestures)
  • You need coordinated multi-property choreography
  • The animation is a signature moment that defines the app's identity
  • Gesture-driven interaction requires custom progress mapping

API Selection

Choose the right API for the job. Start with SwiftUI animations (simplest, most declarative), drop to UIKit when you need interactive control, and reach for Core Animation only when you need layer-level precision.

NeedAPIWhy
State-driven property changeswithAnimation / .animation(_:value:)Declarative, automatic interpolation
Multi-step sequenced animationPhaseAnimatorDiscrete phases with per-phase timing
Per-property timeline controlKeyframeAnimatorIndependent keyframe tracks per property
Hero transitions between viewsmatchedGeometryEffect + NamespaceGeometry matching across view identity
Navigation push/pop with zoom.navigationTransition(.zoom)iOS 18+ built-in zoom transition
Custom view insertion/removalTransition protocol conformanceTransitionPhase-based modifier
In-view content swap.contentTransition()Numeric text, interpolation, opacity
Scroll-position-based effects.scrollTransitionPhase-driven scroll-linked animation
SF Symbol animation.symbolEffect()Bounce, pulse, wiggle, breathe, rotate
Interactive/interruptible (UIKit)UIViewPropertyAnimatorPause, resume, reverse, scrub
Per-layer property animationCABasicAnimation / CASpringAnimationShadow, border, cornerRadius animation
Complex choreography (layers)CAKeyframeAnimation + CAAnimationGroupMulti-property layer animation
Physics simulationUIDynamicAnimatorGravity, collision, snap, attachment
Haptic feedback paired with animation.sensoryFeedback modifierTied to value changes
Animated background gradientsMeshGradient2D grid of positioned, animated colors

Implementation by Category

Detailed patterns and code examples live in the reference files. Load the one that matches your task:

TaskReference
SwiftUI declarative animations (withAnimation, springs, phase, keyframe)references/swiftui-animations.md
View transitions (navigation, modal, custom Transition protocol)references/transitions.md
Gesture-driven interactive animationsreferences/gesture-animations.md
Core Animation and UIKit animation patternsreferences/core-animation.md

When to Load References

  • Writing withAnimation, spring parameters, PhaseAnimator, or KeyframeAnimator → swiftui-animations.md
  • Building navigation transitions, modal presentations, matchedGeometryEffect, or custom Transition → transitions.md
  • Implementing drag-to-dismiss, swipe actions, pinch/rotate, or scroll-linked effects → gesture-animations.md
  • Working with CABasicAnimation, UIViewPropertyAnimator, layer animations, or bridging SwiftUI↔UIKit → core-animation.md

Spring Parameters Quick Reference

Springs are the default animation type in modern SwiftUI. Use duration and bounce — not mass/stiffness/damping unless bridging to UIKit/CA.

PresetDurationBounceUse Case
.smooth0.50.0Default transitions, most state changes
.snappy0.30.15Micro-interactions, toggles, quick feedback
.bouncy0.50.3Playful moments, attention-drawing
.interactiveSpring0.150.0Gesture tracking, drag following
Customvariesvaries.spring(duration: 0.4, bounce: 0.2)

Accessibility & Multimodal Feedback

Apple's HIG: "Make motion optional" and "supplement visual feedback by also using alternatives like haptics and audio to communicate." Every animation must handle Reduce Motion, and important state changes should use multiple feedback channels — not animation alone.

swift
@Environment(\.accessibilityReduceMotion) private var reduceMotion

// Pattern 1: Conditional animation
withAnimation(reduceMotion ? .none : .spring()) {
    isExpanded.toggle()
}

// Pattern 2: Simplified alternative
.animation(reduceMotion ? .easeOut(duration: 0.15) : .spring(duration: 0.5, bounce: 0.3), value: isActive)

// Pattern 3: Skip entirely
if !reduceMotion {
    view.phaseAnimator(phases) { /* ... */ }
}

Reduce Motion fallback options (from most to least graceful):

  1. Crossfade — replace motion with opacity transition
  2. Shortened — same animation, much faster (0.1–0.15s), no bounce
  3. Instant.animation(.none) or skip the animation block entirely

Cancellation & Interruptibility

Apple's HIG: "Don't make people wait for an animation to complete before they can do anything, especially if they have to experience the animation more than once." Every animation must be interruptible.

  • Spring animations retarget automatically — this is the default and almost always what you want
  • For gesture-driven animations, the user is always in control — let them cancel mid-flight
  • For sequenced animations (KeyframeAnimator, PhaseAnimator with trigger), ensure the UI remains interactive during playback
  • Never disable user interaction during an animation unless there's a critical reason (e.g., destructive action confirmation)

Performance Checklist

  • Animate on the render server when possible — Core Animation runs off the main thread, SwiftUI's drawingGroup() moves rendering to Metal
  • Avoid animating view identity changes (.id() modifier) — this destroys and recreates the view
  • Use geometryGroup() when parent geometry changes cause child layout anomalies during animation
  • Provide explicit shadowPath when animating shadows — without it, the system recalculates the path every frame
  • In lists and scroll views, avoid per-item blur/shadow animations — these cause offscreen rendering for each cell
  • Keep PhaseAnimator and looping animations lightweight — they run continuously
  • For frequent interactions, prefer system-provided animation over custom motion — Apple's HIG: "generally avoid adding motion to UI interactions that occur frequently"
  • Profile with Instruments → "Animation Hitches" template to find frame drops

相关 Skills

内部沟通

by anthropics

Universal
热门

按公司常用模板和语气快速起草内部沟通内容,覆盖 3P 更新、状态报告、领导汇报、项目进展、事故复盘、FAQ 与 newsletter,适合需要统一格式的团队沟通场景。

按公司偏好的模板快速产出状态汇报、领导更新和 FAQ,既省去反复改稿,也让内部沟通更统一、更专业。

内容与创意
未扫描111.8k

主题工厂

by anthropics

Universal
热门

给幻灯片、文档、报告和 HTML 落地页快速套用专业配色与字体主题,内置 10 套预设风格并支持现场生成新主题,适合统一品牌或内容视觉。

主题工厂能帮你把幻灯片、文档到落地页快速统一视觉风格,内置 10 套主题,还能按需即时生成新主题。

内容与创意
未扫描111.8k

文档共著

by anthropics

Universal
热门

围绕文档、提案、技术规格、决策记录等写作任务,按上下文收集、结构迭代、读者测试三步协作共创,减少信息遗漏,写出更清晰、经得起他人阅读的内容。

写文档、方案或技术规格时容易思路散、信息漏,它用结构化共著流程帮你高效传递上下文、反复打磨内容,还能从读者视角做验证。

内容与创意
未扫描111.8k

相关 MCP 服务

热门

免费的加密新闻聚合 MCP,汇集 Bitcoin、Ethereum、DeFi、Solana 与 altcoins 资讯源。

内容与创意
130

by ProfessionalWiki

让 Large Language Model 客户端无缝连接任意 MediaWiki 站点,可创建、更新、搜索页面,并通过 OAuth 2.0 安全管理内容。

内容与创意16 个工具
72

借助 86+ 个云端 media processing robots,处理视频、音频、图像和文档。

内容与创意
71

评论