swiftui-logo-draw README

The project's README from github.com/RhuanCruz/swiftui-logo-draw. As one markdown file: README.md.

LogoDraw

Componente SwiftUI que desenha o contorno de um logo como uma caneta e depois revela o preenchimento. E o processo, com scripts, pra transformar o PNG de um logo num Shape limpo o bastante pra essa animação ficar bonita.

SwiftUI component that traces a logo's outline and then reveals its fill, plus a reproducible pipeline (Python + macOS render check) to turn a logo PNG into a clean Shape. Docs are in Brazilian Portuguese.

frames do desenho

Uso

Swift Package: adicione https://github.com/RhuanCruz/swiftui-logo-draw e importe LogoDraw. Ou copie Sources/LogoDraw/LogoDraw.swift pro seu projeto (é um arquivo só).

import LogoDraw

LogoDraw(RunnerLogoShape())

LogoDraw(
    MeuLogoShape(),
    drawDuration: 1.2,        // duração do traço
    fillStartPercent: 70,     // o preenchimento começa aos 70% do traço
    size: 150,
    outlineColor: .primary,
    fillColor: .primary,
    freezeAt: nil             // 0...1 congela num frame (bom pra screenshot)
) {
    // preenchimento terminou: fecha a splash, mostra a wordmark, etc.
}
Parâmetro Default O que faz
drawDuration 1.2 s duração do traço (0.3...4)
drawEasing .smooth .snappy, .smooth, .easeInOut, .linear
fillsLogo true false deixa só o contorno
fillStartPercent 70 quando o fill começa, em % do traço
fillDuration 0.35 s fade do fill
size 160 lado do quadrado
strokeWidth 1.5 espessura do contorno
replayTrigger 0 mude pra tocar de novo
freezeAt nil progresso fixo em vez de animar
onComplete nil chamado quando termina

Reduce Motion: o logo aparece completo e onComplete dispara na hora.

O Shape que você passa precisa ter os subpaths na ordem em que quer que sejam desenhados e um contorno sem auto-interseção. RunnerLogoShape é o exemplo que veio junto: um corredor reconstruído a partir de um PNG com 96% de fidelidade.

Do PNG ao Shape

O componente é a parte fácil. O difícil é ter o logo como Path limpo. O processo está documentado em dois lugares:

Script Faz
measure.py componentes, bboxes e runs por linha/coluna do PNG
geometry.py primitivas (fillet, arco, círculo) iguais às do Path
models/runner.py o modelo paramétrico do exemplo
tune.py IoU contra a imagem, overlay e ajuste automático dos parâmetros
render_shape.sh renderiza um Shape Swift em PNG no macOS, sem simulador
compare.py IoU do render Swift contra a imagem original

Pra instalar a skill no Claude Code: copie (ou symlinke) skill/logo-to-swiftui-draw pra ~/.claude/skills/.

Requisitos

Licença

MIT. O símbolo do corredor em RunnerLogoShape está aqui como exemplo do processo.

swiftui-logo-draw (RhuanCruz/swiftui-logo-draw)

Searching Database…

160 ·GitHub
Swiftui-logo-draw
这是什么？LogoDraw 是一个 SwiftUI 组件，像笔一样描绘 logo 的轮廓然后显现其填充，并配套一条可复现的 Python + macOS 管线，用于把 logo PNG 转换成干净的 SwiftUI Shape。
这是完整的应用，还是只是一个 SwiftUI 组件？它是一个单文件 SwiftUI 组件（LogoDraw.swift），放进项目或通过 Swift Package Manager 添加即可；没有独立应用。PNG 转 Shape 的转换是另一套 Python 脚本，不是 GUI 工具。
怎么把它加进我的 SwiftUI 项目？把它作为 Swift Package 添加并 import LogoDraw，或者直接把 Sources/LogoDraw/LogoDraw.swift 这一个文件复制进你的项目。
运行 PNG 转 Shape 的转换脚本需要什么？组件本身需要 Swift 5.9+ 和 iOS 17 / macOS 14（用到了 Task.sleep(for:) 和 .task(id:)）。转换脚本需要带 numpy、pillow 和 scipy 的 Python 3，还要 Xcode 来运行 rendershape.sh，它可以在没有模拟器的情况下渲染 Shape。
任意 logo Shape 都能配合描绘动画使用吗？不行——你传入的 Shape 的子路径必须严格按你想要的绘制顺序排列，而且轮廓必须干净、没有自相交；把一个 logo 调整到那种状态正是这条管线存在的意义，也是最难的部分。
它要求的最低 iOS 和 macOS 版本是多少？最低要求 iOS 17 和 macOS 14，因为动画依赖 Task.sleep(for:) 和 .task(id:)。
RunnerLogoShape 是什么？它是随附的示例——一个从 PNG 重建、保真度达 96% 的奔跑者图标 SwiftUI Shape，用来演示整个 PNG 转 Shape 管线。
自带的 Claude Code 技能实际做什么？skill/logo-to-swiftui-draw 把测量/几何/调优的工作流打包成一步步执行的技能；把该文件夹复制或符号链接到 ~/.claude/skills/ 即可安装。
如果开启了「减弱动态效果」会怎样？logo 会直接以完整绘制好的状态立即显示而不是播放动画，onComplete 回调也会立刻触发。
调优脚本如何检查 Shape 与原始 logo 是否匹配？tune.py 计算渲染出的 Swift Shape 与源 PNG 之间的 IoU（交并比），生成叠加对比图，并自动调整参数以提升匹配度。
What are similar projects?ChunUI, lottie-ios, FSCalendar, Spring, AirCard-macOS, chameleon, folding-cell, SVProgressHUD
Which topics is it in?swift-package-manager, xcode, claude-code-skill, apple, component-library, design, image-processing, swift, ui-components, animation, customization, ui
Creator
RhuanCruz
Size
0.1 MB
Stars
160
Updated
CommitSep 05
Age
1mo
Commits · 90 Days