Online Tool Store
SVG Animator
Animuj elementy SVG za pomocą klatek kluczowych CSS i przejść, ustaw timing, easing i liczby pętli, a następnie eksportuj animowane pliki SVG.
🔒 To narzędzie działa w całości w Twojej przeglądarce. Twoje pliki nigdy nie są wysyłane na serwer.
Design i Kolor
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.
Jak działa Animator SVG
- Dodaj SVG i wybierz typ animacji.
- Ustaw czas trwania i easing — efekty rysowania najlepiej wyglądają między jedną a dwiema sekundami.
- Zachowaj zabezpieczenie reduced-motion, a następnie wklej SVG i jego CSS na swoją stronę.
Metoda
Efekt rysowania działa poprzez ustawienie wzoru kreski na pełną długość ścieżki i animowanie przesunięcia od tej długości do zera.
stroke-dasharray: L; stroke-dashoffset: L → 0, gdzie L to długość ścieżki
Błędne L jest powodem, dla którego animacje rysowania czasami zaczynają się w połowie narysowane lub kończą za wcześnie — wzór kreski musi odpowiadać rzeczywistej długości ścieżki.
FAQ
Dlaczego moja animacja rysowania zaczyna się w połowie?
Ponieważ wartość dasharray nie odpowiada rzeczywistej długości ścieżki. Zmierz ścieżkę za pomocą getTotalLength i użyj tej liczby, zamiast ją szacować.
Czy SVG powinno być animowane za pomocą CSS czy SMIL?
CSS, dla wszystkiego nowego. Animacja SMIL jest przestarzała w niektórych silnikach, a wsparcie jest niespójne; klatki kluczowe i transformacje CSS są dobrze wspierane i łatwiejsze w kontroli.
Dlaczego przestrzegać prefers-reduced-motion?
Ponieważ ruch wywołuje mdłości i objawy przedsionkowe u niektórych osób, a preferencja systemu operacyjnego to sposób, w jaki proszą o mniej tego. Przestrzeganie tego to zapytanie media o dwóch liniach.
Jak wypadamy w porównaniu
| Cecha | Online Tool Store | Aplikacja projektowa | PDF przewodnika stylu |
|---|---|---|---|
| Zawarte zabezpieczenie reduced-motion | ✓ | ✗ | Rzadko |
| CSS zamiast SMIL | ✓ | Różnie | ✓ |
| Brak oprogramowania do animacji | ✓ | ✗ | ✗ |
| Plik pozostaje na Twoim urządzeniu | ✓ | ✓ | ✗ |
Animator SVG domyślnie owija każdą animację w zapytanie reduced-motion, co jest krokiem dostępności, który ręcznie pisana animacja SVG niemal zawsze pomija.