Animuj SVG z JavaScript

Sep 14, 2025
Jak
Graphic of 4 mountain scenes in circles on a computer screen

Jest tak wiele, które można osiągnąć natywnie w przeglądarce za pomocą API CSS3 lub Animacji WWW w JavaScript. Proste animacje i przejścia są dobrze dostosowane do CSS3 - mając na uwadze, że bardziej złożone animacje muszą być osiągnięte przy użyciu JavaScript. (Jeśli tworzysz witrynę bez kodu, potrzebujesz Kreator strony internetowej .)

Problem z API Animacji WWW jest wsparcie przeglądarki i bieżący zestaw funkcji. Będąc dość młodą specyfikacją, poprawi to w nadchodzących latach.

  • Kompletny przewodnik po SVG

W celu zwalczania tej funkcji i deficyt pomocy technicznej przeglądarki możemy zwrócić się do bibliotek animacji, takich jak Greensock. (GSAP). GSAP daje nam możliwość tworzenia złożonych animacji i wielu linii czasu, z możliwością animowania niemal dowolnego elementu lub właściwości / pary wartości - wszystko osiągnięte za pomocą prostej i intuicyjnej składni.

W tym samouczku będziemy korzystać z biblioteki GSAP, aby utworzyć kilka animacji. Główną i najbardziej złożoną animacją będziemy tworzyć przejście na scenę z dnia na noc i zobaczymy, jak łatwo możemy łańcuchować wiele przejść do tworzenia skomplikowanych animacji. Będziemy również tworzyć kilka prostych animacji, które będą stale działać.

Jeśli chcesz uzyskać więcej opcji swojego projektu animacji, sprawdź naszą kompilację Najlepsze darmowe oprogramowanie do projektowania graficznego . Dodawanie animacji do złożonej witryny? Potrzebujesz wsparcia hosting usługa.

Pobierz pliki. Dla tego samouczka.

01. Ustawienia dokumentów.

Aby rozpocząć, musimy widelec Greensock Pen. w celu przeprowadzenia wtyczek premium. Dla samouczka będziemy korzystać z SVG, który został już zoptymalizowany i wklejony do naszego edytora HTML. Jeśli jednak używasz własnego SVG, musisz upewnić się, że wszystkie elementy mają unikalne identyfikatory.

02. Utwórz pierwszą osi czasu

GSAP oferuje dwa typy oś czasu: Timelinelite i Timelinemax. Wersja Timelinemax oferuje dostęp do dodatkowych funkcji, takich jak zdolność do powtarzania animacji, a także odtwarzanie ich w odwrotnie między innymi. Nasza pierwsza osi czasu będzie wodą, którą powtórzymy nieskończenie i Yoyo tam iz powrotem. 

 VAR Animation_water = Nowy Timelinemax ({
  Powtórz: -1,
  yoyo: true.
});

03. Utwórz pierwszą animację

Aby ożywić wodę mamy kolejną ścieżkę w naszym SVG, ukryty z kryciecją "0". Wykorzystamy The.. morfsvg. Wtyczka do przekształcenia naszej oryginalnej ścieżki wody w nową ścieżkę wody. Przesuniemy element wody "12px" na osi Y. Dwie liczby na końcu nieruchomości odpowiednio reprezentują opóźnienie i czasy rozpoczęcia. 

 Animation_water
  .to ("# woda", 2, {
  Y: 12,
  morfsvg: "# woda-2",
  Łatwość: liniowy.easenone.
  }, 0, 0)
;

04. Właściwości wielokrotnego użytku

Ponieważ będziemy ponowne wykorzystanie wielu właściwości i wartości wiele razy, aby stworzyć zmienne dla tych właściwości. 

 VAR Animation_ease = liniowy.Aseenone;

05. Rejestrowanie konsoli

Biblioteka GSAP oferuje nam możliwość uzyskania wielu właściwości z dowolnej limitu czasu. Możemy zalogować je w konsoli, aby upewnić się, że wszystko działa, jak się spodziewamy. 

 Console.log (
  "Animation_water Czas trwania:"
  + animacja_water.duration ()
  .tofixed (2)
);

06. Oś czasu chmurka i dziennik konsoli

Dla każdego elementu chcemy animować osobno i stale, musimy stworzyć nową osi czasu. Chcemy również logować ten osi czasu w konsoli, jak idziemy. 

 var animation_cloud = Nowy timelinemax ({
  Powtórz: -1,
  yoyo: true.
});
Console.log ('n' +
  ...
  animacja_cloud.duration (). Tofixed (2) + 'n'
);

07. Animacja w chmurze

Teraz, gdy możemy przygotować naszą ofertę, możemy stworzyć naszą animację w chmurze. Sekcja animacji, która przyjmuje nowe właściwości, może obsługiwać wiele par właściwości / wartości oddzielonych za pomocą przecinków.

Nasza animacja w chmurze musi być subtelna, więc musimy tylko zmienić wartości o niewielką ilość. 

 Animation_Cloud
  .to ("# chmura", 3, {x: -2, y: 1, skala: 0,95, rotacja: 1, łatwość: animacja_ease}, 0, 0)
;

08. Utwórz animację nocnej

Następnie zaczniemy tworzyć naszą codzienną animację. Stworzymy zmienną na czas cyklu i dnia. Ustawienie "Yoyo" w GSAP również umożliwia opóźnienie animacji przed powtórzeniem. 

 var day_Ight_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = nowy timelinemax ({{{
  Powtórz: -1,
  yoyo: prawda,
  REPEALDELAY: Animation_Delay.
});

09. Animuj warstwę nakładki

Wewnątrz naszego SVG mamy warstwę nakładką wykonaną z prostokąta obejmującego cały obraz z tym samym gradientem w tle, co nasze tło nocne. Nakładka stosuje tryb mieszania "mnożą" w celu przyciemnienia całego obrazu. Nasza animacja po prostu przejdzie nieprzezroczystość tego elementu. 

 Animation_tonight
  .to ('# Nocna nakładka ",
  Day_IGHT_CYCLE_TIME, {
  nieprzezroczystość: 1,
  Łatwość: animacja_ease.
  }
  , 0, 0)
;

10. Animuj gradient.

GSAP oferuje inne Tweens na typach typów wspólnych "do" i "z". Tween typ potrzebujemy, aby ożywić naszym gradientem jest "staggerto" Tween. Możemy również użyć właściwości "cyklu", aby obrócić koło kolorów do naszych nowych wartości. 

 .STAGGERTO ("# Day-Gradient Stop",
  Day_IGHT_CYCLE_TIME, {
  cykl:{
  Stopcolor: ['# 060414', "# 416584 ']
  },
  łatwość: animacja_ease,
}, 0, 0)

11. Animować słońce

Możemy kontynuować dodawanie animacji do naszej animacji "dzisiejszej". Tym razem dodamy nową "do" między Tween, aby ustawić nasze słońce. Ustawimy czas wyświetlania, aby był ułamkiem czasu cyklu, aby animować słońca przed księżycem. GSAP pozwala nam ustawić prawie każdy atrybut. Użyjemy tego, aby animować właściwości "CX" i "CY" poniżej wzgórza po prawej stronie. 

 .to ("# Sun ', Day_IGHT_CYCLE_TIME / 1.25, {
  Skala: 0,9,
  attr: {cx: "753", CY: "697"},
  łatwość: animacja_ease}
, 0, 0)

12. Animuj księżyc

Korzystamy z tej samej techniki, którą użyliśmy do animacji słońca poza widoku (patrz krok 11 powyżej), aby animować księżyca w widoku. Oczywiście moglibyśmy to osiągnąć za pomocą jednego między Tween, ale w celu utworzenia faux ARC zrobimy to w dwóch częściach. W obu częściach mamy również zastosowanie nowej wartości do nieruchomości skali. 

 .to ('# Moon', Day_Ight_CyCle_Time / 2, {
  Skala: 0,9,
  attr: {cx: "174.5", CY: "202.5"},
  łatwość: animacja_ease}
, 0, 0)

Druga część animacji księżyca czeka na zakończenie pierwszej sekcji przed rozpoczęciem. Uwaga: Te dwie części animacji księżyca są przykuty w kodzie animacji wraz z innymi właściwościami w nocy, których używamy. 

 Animation_tonight
  ...
  .to ('# Moon', Day_night_Cycle_Time / 2, {
  Skala: 0,9,
   attr: {cx: "410.5", CY: "114,5"},
  łatwość: animacja_ease}
  , Day_IGHT_CYCLE_TIME / 2, 0)
;

13. Animuj gwiazdy

Jedyną część pozostawioną z naszej codziennej animacji to gwiazdy. Animujemy gwiazdy, aby przejść przez przejście szereg właściwości. Pierwszym z nich jest po prostu przynieść je do widzenia, animując krycie. 

 .to ("# gwiazdy", dzień_night_cycle_time / 2,
  {nieprzezroczystość: 1},
  Day_IGHT_CYCLE_TIME / 2,
0)

Następnie użyjemy Tween "od", aby przenieść gwiazdy i obracać je z kąta negatywnego, gdy ożywiają w widoku. Używamy prostej matematyki, aby obliczyć nasz czas animacji i opóźnienia, wszystkie oparte na zmiennej "Day_Ight_CYCLE_TIME". 

 .From ("# gwiazdy",
  Day_IGHT_CYCLE_TIME - (Day_IGNI_CYCLE_TIME / 4),
  {Y: 150, rotacja: -15, łatwość: animacja_ease},
  Day_IGHT_CYCLE_TIME / 4,
0)

14. Utwórz osi czasu i dziennik konsoli

Teraz stworzyliśmy naszą codzienną animację, możemy stworzyć kolejną stałą animację, aby nasze gwiazdy migają. Utworzymy nową osi czasu, a następnie zalogujemy czas trwania osi czasu w konsoli. 

 Var animation_stars = Nowy Timelinemax ({
  Powtórz: -1,
  yoyo: true.
});

15. Spraw, aby gwiazdy migają

Teraz stworzyliśmy osi czasu gotowy do animacji, musimy stworzyć naszą migającą animację. Animacja jest naprawdę prosta - wszystko, co chcemy zrobić, to zmniejszyć wartość krycia. Dzięki własności "Yoyo", krycie będzie ożywiony i wyłączanie i sprawi, że gwiazdy wyglądają, jakby migają. 

 Animation_stars
  .to ("gwiazdki", 0,5,
  {nieprzezroczystość: 0,5, łatwość: animacja_ease}
, 0, 0)
;

16. Opóźnij miganie

W ostatnim kroku skierujemy grupę gwiazd, aby zastosować naszą mrugającą animację, jednak będzie wyglądał znacznie lepiej, jeśli gwiazdy miały migać na jeden na raz zamiast razem w tym samym czasie. Osiągamy to, kierując każdą gwiazdę osobno i stosując inną animację. 

 Animation_stars
  ...
  .to ("# gwiazda-dwa", 0,5,
  {nieprzezroczystość: 0,5, łatwość: animacja_ease}
  , 1,25, 0)
  .to ("# gwiazda-trzy", 0,5,
  {nieprzezroczystość: 0,5, łatwość: animacja_ease}
  , 0,75, 0)
  ...;

17. Dodaj śnieg

Otóż ​​to! Nasza codzienna animacja rowerowa jest zakończona i wygląda niesamowicie, ale nie musimy się tam powstrzymać. Ponieważ obraz jest w SVG, możemy łatwo dodać nowe elementy do naszego krajobrazu. Dodajmy trochę śniegu. Zrobimy to za pomocą dwóch oddzielnych warstw. Każda warstwa ma zbiór wielkich elipsy wystarczająco dużych, aby pokryć krajobraz, a następnie tę samą kolekcję powtórzyło powyżej. 

 & LT; G ID = "Snow-Dolna warstwa" ... & GT;
  ...
  isellipse ... / & gt;
& lt; / g & gt;
& lt; g I id = "śnieżna warstwa" ... & gt;
  ...
  isellipse ... / & gt;
& lt; / g & gt;

18. Utwórz osi czasu śniegu

Tworzymy dwie oddzielne terminy dla naszego śniegu, aby móc animować ich nad różnymi czasami. Zalogujemy się również swoje czasy trwania konsoli. 

 var animation_snowtop = Nowy timelinemax ({
  Powtórz: -1,
  REPEALDELAY: 0.
});
var animation_snowbottom = Nowy Timelinemax ({{
  Powtórz: -1,
  REPEALDELAY: 0.
});

19. Animuj śnieg

Aby ożywić nasze warstwy śniegu, chcemy przesunąć dwie warstwy wzdłuż osi pionowej. Różniąc ich czasami pojawia się pojawienie się warstw poruszających się w różnych prędkościach. Animacja działa, przesuwając kolekcję elipsy wzdłuż osi pionowej, aż druga kolekcja jest zamiast pierwszego pierwszego. Następnie powtarzamy animację. 

 Animation_snow
  .to ("# śnieżna warstwa", 7,
  {attr: {transformacja: "Tłumacz (24 -108)"}
  , łatwość: animacja_ease}
, 0, 0)
;

Znajdź pełną kolekcję piór samouczka tutaj . Potrzebujesz gdzieś bezpieczne do przechowywania plików? Zobacz nasz przewodnik magazyn w chmurze .

Ten artykuł został pierwotnie opublikowany w kreatywnym projektowaniu stron internetowych projektantów projektowania stron internetowych. Subskrybuj tutaj projektant stron internetowych .

Powiązane artykuły:

  • 5 niesamowitych apis javascript
  • 19 fajnych przykładów animacji CSS do odtworzenia
  • 25 największych filmów animowanych muzyki

Jak - Najpopularniejsze artykuły

Czy twój Apple Icloud Storage jest pełny? Oto jak uwolnić przestrzeń

Jak Sep 14, 2025

(Kredyt obrazu: Apple) Serwis ICloud Apple jest jednym z Najlepsza pamięć chmur. Produkty wokół - ..

Arkusze znaków do modeli 3D: 15 najlepszych wskazówek

Jak Sep 14, 2025

(Kredyt obrazu: Dahlia Khodur) Arkusze znaków są kolejnością dnia w tym samouczku, który obejmuje, jak stworzyć..

Jak utworzyć warstwowy efekt paralaksy na swojej stronie

Jak Sep 14, 2025

(Kredyt obrazu: www.beargryls.com) Ruch paralaksy, koncepcja ruchomych warstw w różnych prędkościach, była używ..

Utwórz perspektywę w programie Adobe Illustrator

Jak Sep 14, 2025

Strona 1 z 2: Korzystanie z siatki perspektywicznej w Illustrator: Kroki 01-09 ..

Co to jest linia terminatora?

Jak Sep 14, 2025

Istnieje wiele aspektów oświetlenia, które musisz rozważyć, aby przekazać formularz. Jednym z bardzo przydatnych fundamenta..

Narysuj złe tyłek Geisha

Jak Sep 14, 2025

W tej ilustracja Geisha chciałem uchwycić grungy, ciemny, miejski klimat, sznurowany eleganckimi tradycyjnymi japońskimi eleme..

6 sposobów przyspieszenia modelowania

Jak Sep 14, 2025

Bardziej wydajny przepływ pracy jest oczywistym korzyścią na poprawę techniki rzeźbienia prędkości, ale to nie jedyna korz..

Utwórz futrzany znak 3D od podstaw

Jak Sep 14, 2025

Tworzenie futrzanej postaci może być łatwe, ale jeśli chcesz, aby naprawdę atrakcyjny kawałek futrzany 3d art. ..

Kategorie