Online Tool Store
SVG Animator
Animează elemente SVG cu fotograme cheie CSS și tranzițiile, setează timing, easing și număruri de bucle, apoi exportă fișiere SVG animate.
🔒 Acest instrument rulează în întregime în browserul tău. Fișierele tale nu sunt niciodată încărcate pe un server.
Design și Culoare
SVG Animator
Preview
Draw works best on stroked <path> shapes. This SVG looks fill-only, so the outline may not appear to draw — the original artwork is left intact.
Generated CSS
Everything runs in your browser. Your SVG is never uploaded to a server.
Cum funcționează Animatorul SVG
- Adaugă SVG-ul și alege tipul de animație.
- Setează durata și easing-ul — efectele draw-on se citesc cel mai bine între una și două secunde.
- Păstrează protecția reduced-motion, apoi lipește SVG-ul și CSS-ul său în pagina ta.
Metoda
Un efect draw-on funcționează setând modelul de liniuță al conturului la lungimea totală a traseului și animând decalajul de la acea lungime la zero.
stroke-dasharray: L; stroke-dashoffset: L → 0, unde L este lungimea traseului
Un L greșit este motivul pentru care animațiile draw-on încep uneori pe jumătate desenate sau se termină prea devreme — modelul de liniuță trebuie să corespundă lungimii reale a traseului.
FAQ
De ce animația mea draw-on începe la jumătate?
Deoarece valoarea dasharray nu corespunde lungimii reale a traseului. Măsoară traseul cu getTotalLength și folosește acel număr, în loc să-l estimezi.
SVG ar trebui animat cu CSS sau SMIL?
CSS, pentru orice este nou. Animația SMIL este depreciată în unele motoare și suportul este inconsistent; cadrele cheie și transformările CSS sunt bine suportate și mai ușor de controlat.
De ce să respect prefers-reduced-motion?
Pentru că mișcarea declanșează greață și simptome vestibulare la unii oameni, iar preferința sistemului de operare este modul în care cer mai puțin din asta. Respectarea ei este o media query de două linii.
Cum ne comparăm
| Caracteristică | Online Tool Store | O aplicație de design | Un PDF ghid de stil |
|---|---|---|---|
| Protecție reduced-motion inclusă | ✓ | ✗ | Rareori |
| CSS în loc de SMIL | ✓ | Variază | ✓ |
| Fără software de animație | ✓ | ✗ | ✗ |
| Fișierul rămâne pe dispozitivul tău | ✓ | ✓ | ✗ |
Animatorul SVG învăluie implicit fiecare animație într-o interogare reduced-motion, pasul de accesibilitate pe care animația SVG scrisă manual aproape întotdeauna îl omite.