Composer 不能制作手绘线稿动画，因其是 VisionOS 的 UI 框架而非动画工具；可行方案为 AE+插件（Stroke+wiggle）或 SVG+GSAP 逐帧模拟，需注意线条粗细变化、路径微偏移和非匀速节奏。
Composer 并不支持手绘线稿风格动画制作——它根本不是动画工具，而是 macOS 上用于构建 VisionOS 应用的声明式 UI 框架（SwiftUI 的底层渲染协调器），没有画笔、图层、帧序列或描边抖动等动画控制能力。
如果你在搜索“Composer 手绘线稿动画”，大概率是混淆了工具链。真实可行的路径只有两条：用 AE + 插件实现视觉效果，或用代码驱动 SVG/Canvas 逐帧模拟手绘感。下面直说怎么做。
为什么不能用 Composer 做手绘线稿动画
它不处理像素绘制，也不暴露笔触、墨迹扩散、纸面纹理等美术参数；所有 UI 元素最终由系统合成器（Core Animation）光栅化，无法干预描边生成逻辑。试图在 ViewBuilder 里“画线稿”，结果只会是干净矢量轮廓，毫无手绘抖动、起笔顿挫或擦除痕迹。
AE 中用 Stroke + Wiggle 模拟手绘抖动的关键参数
这是目前最成熟、可批量复用的手绘线稿动画方案，依赖 After Effects 自带表达式和关键帧控制：
-
Stroke效果必须启用Write On模式，并将Start和End设为关键帧——否则只是静态描边 - 对
End属性添加表达式：wiggle(0.8, 1.2)，其中0.8是频率（每秒抖动次数），1.2是幅度（%），过大则失真，过小则看不出手绘感 - 务必关闭
Fill，只保留Stroke；线宽建议设为1.5–2.5px，配合 4K 工程更自然 - 导出时选
ProRes 4444或带 Alpha 的MOV，避免 H.264 压缩抹平抖动细节
用 SVG + GSAP 实现轻量级网页手绘动画
适合需要嵌入网页、控制播放/暂停、响应用户交互的场景，核心是把路径拆成多段并分时触发：
- 先用 Illustrator 或 Figma 将线稿导出为
SVG，确保所有图形都是<path></path>，不要有<group></group>嵌套干扰 - 用
GSAP.to()动画stroke-dasharray和stroke-dashoffset，例如：stroke-dasharray="1000" stroke-dashoffset="1000"→0 - 每条
<path></path>加上随机延迟（delay: Math.random() * 0.3），模拟不同笔画的起笔时间差 - 若需“铅笔质感”，可在 CSS 中给
svg path加filter: url(#pencil)，配合<filter></filter>内的<feturbulence></feturbulence>微扰边缘
容易被忽略的渲染陷阱
无论 AE 还是 Web 方案，以下三点常导致“看起来不像手绘”：
- 所有线条粗细一致 → 实际手绘有起笔重、收笔轻、转折加压，需用表达式或 JS 动态改
stroke-width - 路径完全贴合贝塞尔曲线 → 真实手绘会有微小偏移，可用
rough.js重绘 SVG 路径，或 AE 中叠加Displacement Map配低强度噪波图 - 动画全程匀速 → 手绘过程天然有停顿、回笔、犹豫，关键帧要手动打成“缓出+小平台+再缓入”，别全用自动缓动
真正难的不是让线“动起来”，而是让系统理解“人怎么画”。参数可以抄，但下笔节奏、压力变化、纸面反馈——这些没法靠工具自动补全。
