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-компонент, который обводит контур логотипа, словно пером, а затем проявляет его заливку, в паре с воспроизводимым конвейером на Python + macOS для превращения 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:)). Скриптам конвертации нужны Python 3 с numpy, pillow и scipy, плюс Xcode для rendershape.sh, который отрисовывает Shape без симулятора.
Подойдёт ли любой логотип-Shape для анимации рисования?Нет — Shape, который вы передаёте, должен иметь подпути ровно в том порядке, в каком вы хотите их рисовать, и чистый контур без самопересечений; довести логотип до такого состояния — самое сложное, ради чего и существует конвейер.
Какие минимальные версии iOS и macOS нужны?Требуются как минимум iOS 17 и macOS 14, поскольку анимация опирается на Task.sleep(for:) и .task(id:).
Что такое RunnerLogoShape?Это встроенный пример — иконка бегуна, воссозданная из PNG в SwiftUI Shape со сходством 96%, используется для демонстрации всего конвейера PNG в Shape.
Что на самом деле делает входящий в комплект навык Claude Code?skill/logo-to-swiftui-draw упаковывает воркфлоу измерить/геометрия/подстроить в пошаговый навык; устанавливается копированием папки или созданием симлинка в ~/.claude/skills/.
Что будет, если включён Reduce Motion?Логотип сразу отрисовывается полностью нарисованным вместо анимации, а колбэк onComplete срабатывает мгновенно.
Как скрипт подстройки проверяет, совпадает ли Shape с исходным логотипом?tune.py вычисляет IoU (intersection-over-union) между отрисованным Swift Shape и исходным PNG, создаёт наложение и автоматически подстраивает параметры, чтобы улучшить совпадение.
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