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.
Întrebări frecvente
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.