Анімація SVG з JavaScript

Feb 4, 2026
Як
Graphic of 4 mountain scenes in circles on a computer screen

Там настільки, що можна досягти цілі в браузері за допомогою CSS3 або веб-анімації API, в JavaScript. Прості анімації та переходи добре підходять для CSS3 - тоді як більш складна анімація повинна бути виконана за допомогою JavaScript. (Якщо ви створюєте сайт без коду, вам потрібно Веб-будівельник .)

Проблема з веб-анімацією API - підтримка браузера та поточний набір функцій. Будучи досить молодою специфікацією, це покращиться в найближчі роки.

  • Повне керівництво до SVG

Для того, щоб боротися з цією функцією та дефіцитом підтримки браузера, ми можемо звернутися до бібліотек анімації, наприклад Зеленню (GSAP). GSAP дає нам можливість створювати складні анімації та декілька термінів, з можливістю анімації майже будь-якого елемента або пари властивостей / значення - все досягнуто за допомогою простого та інтуїтивно зрозумілого синтаксису.

У цьому підручнику ми збираємося використовувати бібліотеку GSAP, щоб створити кілька анімацій. Основна та найбільш складна анімація ми будемо створювати, буде перенесення сцени з дня до ночі, і ми побачимо, наскільки легко ми можемо з'єднати декілька переходів для створення складних анімацій. Ми також будемо створювати кілька простих анімацій, які будуть постійно працювати.

Якщо ви хочете отримати додаткові параметри для вашого анімаційного проекту, перегляньте нашу компіляцію Найкраще безкоштовне програмне забезпечення графічного дизайну . Додавання анімації до складного веб-сайту? Вам знадобиться підтримка веб хостинг Сервіс.

Завантажте файли Для цього підручника.

01. Налаштування документа

Почати, нам потрібно вилучити Грейнське перо Для того, щоб випробувати свої плагіни Premium. Для підручника ми будемо використовувати SVG, який вже був оптимізований та вставлений у наш редактор HTML. Однак, якщо ви використовуєте свій власний SVG, вам потрібно буде переконатися, що всі елементи мають унікальні ідентифікатори.

02. Створіть першу часову шкалу

GSAP пропонує два типи часових шкалу: часові та тимчасові. Версія Timelinemax пропонує доступ до додаткових функцій, таких як можливість повторення анімації, а також грати їх у зворотному напрямку. Наша перша часова шкала буде водою, яку ми повторимо нескінченно і йойо вперед і назад. 

 var animation_water = Нова часова ({{
  Повторіть: -1,
  yoyo: Правда
});

03. Створіть першу анімацію

Для того, щоб анімувати воду, у нас є інший шлях у нашому СВГ, прихований з "0" непрозорість. Ми використаємо морфсвг плагін, щоб перетворити наш оригінальний шлях до нового шляху води. Ми переміщуємо водяний елемент "12px" на осі Y. Два числа в кінці майна представляють затримку та час початку відповідно. 

 Анімація_водя
  .по ("# вода", 2, {
  Y: 12,
  Morphsvg: "# water-2",
  Легкість: лінійний .Easenone
  }, 0, 0)

04. Багаторазові властивості

Оскільки ми будемо повторно повторювати низку властивостей та значень кілька разів, коли ми будемо створювати змінні для цих властивостей. 

 var animation_ase = лінійний. Easenone;

05. Консольна реєстрація

Бібліотека GSAP пропонує нам можливість отримати ряд властивостей з будь-якої даної часової шкали. Ми можемо ввійти в консоль, щоб переконатися, що все працює, як ми очікуємо. 

 Console.Log (
  "Анімація_водяна тривалість:"
  + animation_water.divery ()
  .tofixed (2)
)

06. Хмара хронологія та консольний журнал

Для кожного елемента, який ми хочемо анімувати окремо і постійно, нам потрібно створити нову часову шкалу. Ми також хочемо ввійти, що часові шкали в консолі, як ми йдемо. 

 var animation_cloud = Новий часник ({{
  Повторіть: -1,
  yoyo: Правда
});
console.log ('\ n' +
  ...
  animation_cloud.duration (). tofixed (2) + '\ n'
)

07. Анімація хмари

Тепер, коли у нас є наша хронологія готова, ми можемо створити нашу хмарну анімацію. Розділ анімації, який приймає нові властивості, може обробляти декілька параметрів / цінних пар, розділених за допомогою комами.

Наша анімація хмари повинна бути витонченою, тому нам потрібно лише змінити значення невеликою кількістю. 

 Анімація_Cloud
  .по ("# хмара", 3, {X: -2, Y: 1, шкала: 0.95, обертання: 1, легкість: анімація_аз}, 0, 0)

08. Створіть анімацію нічного часу

Далі ми почнемо створювати анімацію наших днів до нічної. Ми створимо змінну для часу циклу та дня. Налаштування "Yoyo" в GSAP також дозволяє нам затримати анімацію перед повторним. 

 var day_night_cycle_time = 15;
var animation_delay = day_night_cycle_time / 2;
var animation_tonight = Нова часова ({
  Повторіть: -1,
  yoyo: правда,
  RepeadDelay: Animation_Delay
});

09. Анімація накладеного шару

Всередині нашого SVG у нас є накладений шар, виготовлений з прямокутника, що покриває весь зображення з тим же градієнтом фону, як наш нічний фон. Накладання застосовує режим "множення", щоб потемніти весь образ. Наша анімація просто переходить до непрозорості цього елемента. 

 Animation_tonight
  .по ('# нічний-накладання',
  day_night_cycle_time, {
  непрозорість: 1,
  Легкість: анімація_аз
  }
  , 0, 0)

10. Анімувати градієнт

GSAP пропонує інші твіни на вершині загального "до" та "від типів". Тип Tween, який нам потрібно, щоб анімувати наш градієнт - це "Стаггерто" Твін. Ми також можемо використовувати властивість "циклу", щоб повернути кольорове колесо навколо наших нових значень. 

 .StagGerto ("# денна-градієнтна зупинка",
  day_night_cycle_time, {
  Цикл: {
  зупинка: ['# 060414', '# 416584']
  },
  Легкість: анімація_аз,
}, 0, 0)

11. Анімувати сонце

Ми можемо додавати анімації до нашої анімації "Tonight". Цього разу ми додамо нове "до" tween, щоб встановити наше сонце. Ми встановимо час відображення, щоб бути часткою часу циклу, щоб анімувати сонце до Місяця. GSAP дозволяє нам встановити майже будь-який атрибут. Ми будемо використовувати це, щоб анімувати властивості "CX" та "Cy" нижче пагорба справа. 

 .to ('# sun', day_night_cycle_time / 1.25, {
  Шкала: 0.9,
  attr: {cx: "753", cy: "697"},
  Легкість: animation_ase}
, 0, 0)

12. Анімувати місяць

Ми будемо використовувати ту ж техніку, яку ми звикли, щоб анімувати сонце з виду (див. Крок 11 вище), щоб анімувати Місяць на поле. Ми могли б досягти цього, використовуючи один твін, звичайно, але для того, щоб створити штучну дугу, ми зробимо це у двох частинах. В обох частинах ми також застосуємо нове значення до масштабу масштабу. 

 .to ('# moon', day_night_cycle_time / 2, {
  Шкала: 0.9,
  attr: {cx: "174.5", CY: "202.5"},
  Легкість: animation_ase}
, 0, 0)

Друга частина анімації Місяця чекає першого розділу, перш ніж він починається. ПРИМІТКА. Ці дві частини анімації Місяця зараховані всередині анімаційного коду разом з іншими доночними властивостями, які ми використовуємо. 

 Animation_tonight
  ...
  .to ('# moon', day_night_cycle_time / 2, {
  Шкала: 0.9,
   attr: {cx: "410.5", CY: "114.5"},
  Легкість: animation_ase}
  , day_night_cycle_time / 2, 0)

13. Анімація зірки

Єдина частина зліва від нашого дня до нічної анімації - це зірки. Ми зможемо видавати зірки, перейшовши кілька властивостей. Перша з них - просто привести їх до уваги, анімація їх непрозорості. 

 .по ("# зірки", day_night_cycle_time / 2,
  {непрозорість: 1},
  Day_night_cycle_time / 2,
0)

Далі ми використаємо "від" Tween, щоб перемістити зірки і обертати їх від негативного кута, коли вони живуть у перегляді. Ми використовуємо якусь просту математику, щоб розрахувати наш час і затримку анімації, все залежить від змінної нашого "Day_night_cycle_time". 

. З ("# зірки",
  day_night_cycle_time - (day_night_cycle_time / 4),
  {Y: 150, обертання: -15, легкість: анімація_аз},
  Day_night_cycle_time / 4,
0)

14. Створіть часову шкалу зірок та журнал консолі

Тепер ми створили анімацію нашого дня до нічної, ми можемо створити іншу постійну анімацію, щоб зробити наші зірки. Ми створимо нову часову шкалу, а потім увійдемо до тривалості часової шкали в консолі. 

 var animation_stars = Новий часник ({{{
  Повторіть: -1,
  yoyo: Правда
});

15. Зробіть зірки блимати

Тепер ми створили графік, готовий до анімації, нам потрібно створити нашу блимаючу анімацію. Анімація дійсно проста - все, що ми хочемо зробити, це зменшити вартість непрозорості. Завдяки властивості "Yoyo", непрозорість буде анімація і вимикається, і тому зробить зірки виглядати, як вони блимають. 

 animation_stars
  .по ("# зірки", 0,5,
  {непрозорість: 0,5, легкість: анімація_аз}
, 0, 0)

16. Затримка блимання

На останньому кроці ми орієнтуємо групу зірок, щоб застосувати нашу блимаючу анімацію, однак вона виглядала набагато краще, якщо зірки повинні блимати в той же час, а не разом у той же час. Ми досягаємо цього, орієнтуючись на кожну зірку окремо та застосовуючи іншу анімацію. 

 animation_stars
  ...
  .по ("# Star-Two", 0.5,
  {непрозорість: 0,5, легкість: анімація_аз}
  , 1,25, 0)
  .по ("# зірка-три", 0,5,
  {непрозорість: 0,5, легкість: анімація_аз}
  , .75, 0)
  ...;

17. Додати сніг

Це воно! Анімація нашого дня до ночі закінчується, і вона виглядає чудово, але ми не повинні зупинятися там. Оскільки зображення знаходиться в SVG, ми можемо легко додати нові елементи до нашого ландшафту. Давайте додати сніг. Ми зробимо це за допомогою двох окремих шарів. Кожен шар має достатньо велику колекцію еліпсів, щоб покрити пейзаж, а потім таку ж колекцію повторюється вище. 

 & lt; g id = "сніговий шар" ... & gt;
  ...
  & lt; еліпс ... / & gt;
& lt; / g & gt;
& lt; g id = "сніговий шар" ... & gt;
  ...
  & lt; еліпс ... / & gt;
& lt; / g & gt;

18. Створіть час снігу

Ми створюємо два окремих термінів для нашого снігу, щоб мати можливість анімувати їх над різними тривалість. Ми також зареєструємо їхні тривалість до консолі. 

 Var Animation_SnowTop = Нова часова ({
  Повторіть: -1,
  RepeadDelay: 0
});
var animation_snowbottom = новий часник ({{
  Повторіть: -1,
  RepeadDelay: 0
});

19 Анімувати сніг

Для того, щоб анімувати наші снігові шари, ми хочемо перемістити два шари вздовж вертикальної осі. Різнюючи свої тривоги, ми отримаємо вигляд шарів, що рухаються з різними швидкостями. Анімація працює, переміщаючи колекцію еліпсів по вертикальній осі, поки друга колекція не буде на місці першого. Потім ми повторіть анімацію. 

 Анімація_Snow
  .по ("# сніговий шар", 7,
  {attr: {Перетворення: "Переклад (24 -108)"}
  , легкість: анімація_аз}
, 0, 0)

Знайдіть повну колекцію підручників тут . Потрібно десь безпека для зберігання ваших файлів? Перегляньте наш гід хмара зберігання .

Ця стаття була опублікована в журналі Creative Web Design Web Designer. Підписатися на веб-дизайнер тут .

Пов'язані статті:

  • 5 awesome javascript apis
  • Приклади анімації Cool CSS для відтворення
  • 25 найбільших анімаційних музичних відео

Як - Найпопулярніші статті

Намалюйте силу контрасту в мистецтві

Як Feb 4, 2026

Навчитися використовувати контрастність у мистецтві, перетворить ваші проекти та спосіб роботи. Мій ул�..

Побудуйте клієнтський портал з WordPress

Як Feb 4, 2026

(Кредит зображення: веб-дизайнер) Маючи область, яка дозволяє ко�..

Початок роботи з Adobe Dimension CC

Як Feb 4, 2026

Adobe Dimension робить це вітром, щоб створити складні сцени (Кредит зобра..

Як додати текстуру до пастелів з праймерами

Як Feb 4, 2026

За допомогою Пастельні праймери Для створення поверхонь для в..

Майстер негативний фарбування в акварелі

Як Feb 4, 2026

Негативна картина відноситься до фарбування негативний простір що визначає позитивні форми. Це..

Намалюйте пухнастий портрет домашніх тварин

Як Feb 4, 2026

Наш готовий портрет кішки Живопис домашніх тварин і мал..

Зробіть анімований GIF у Photoshop

Як Feb 4, 2026

Adobe запускає нову серію відео підручників, що називається зараз, що має на меті окреслити, як створювати �..

Підготувати свою роботу для 3D-друку: 8 кращих підказків

Як Feb 4, 2026

3D-друк став надзвичайно популярним. Якщо ви хочете почати друкувати свій 3D-арт , Є кілька речей, щ..

Категорії