Animate SVG с JavaScript

Sep 12, 2025
Инструкции
Graphic of 4 mountain scenes in circles on a computer screen

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

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

  • Полное руководство по SVG

Чтобы бороться с этим дефицитом поддержки функций и браузера, мы можем обратиться к библиотекам анимации, например Гренс (GSAP). GSAP дает нам возможность создавать сложные анимации и несколько временных сроков с возможностью анимирования практически любого элемента или пары свойства / значения, достигаемой простым и интуитивным синтаксисом.

В этом руководстве мы собираемся использовать библиотеку GSAP для создания нескольких анимаций. Основная и самая сложная анимация мы будем создавать, будет переходить на сцену с дня на ночь, и мы увидим, насколько легко мы можем объединить несколько переходов, чтобы создать сложные анимации. Мы также будем создавать несколько простых анимаций, которые будут постоянно работать.

Если вы хотите больше вариантов вашего проекта анимации, проверьте нашу компиляцию Лучшее бесплатное программное обеспечение для графического дизайна Отказ Добавление анимации на сложный сайт? Вам понадобится поддерживающий веб хостинг служба.

Загрузите файлы Для этого учебника.

01 Настройка документов

Начать, нам нужно вилить Гренсонская ручка Для того, чтобы просмотреть его премиальные плагины. Для учебника мы будем использовать SVG, который уже был оптимизирован и вставлен в наш HTML-редактор. Однако, если вы используете свой собственный SVG, вам нужно убедиться, что все элементы имеют уникальные идентификаторы.

02. Создать первую графику

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

 var animation_water = новый timelinemax ({{
  Повторить: -1,
  Yoyo: True.
});

03 Создать первую анимацию

Чтобы оживить воду, у нас есть другой путь в нашем SVG, спрятанный с непрозрачностью «0». Мы будем использовать Morphsvg. Плагин для преобразования нашего оригинального пути воды в новый путь воды. Мы переместим водный элемент «12PX» на оси Y. Два номера в конце свойства представляют задержку и время начала соответственно. 

 Animation_water
  . ("# вода", 2, {
  Y: 12,
  Morphsvg: «# вода-2»,
  Легкость: линейный
  }, 0, 0)
;

04 Многоразовые свойства

Поскольку мы будем повторно использовать ряд свойств и ценности ряд раз, мы собираемся создавать переменные для этих свойств. 

 var animation_ease = linear.aseNone;

05. Консольная регистрация

Библиотека GSAP предлагает нам возможность получить ряд свойств из любой данной временной шкалы. Мы можем войти в систему в консоли, чтобы убедиться, что все работает, так как мы ожидаем этого. 

 Console.log (
  «Animation_water Продолжительность: '
  + Animation_water.duration ()
  .tofixed (2)
);

06 Облако временные шкалы и консольный журнал

Для каждого элемента мы хотим оживить отдельно и постоянно, нам нужно создать новую временную шкалу. Мы также хотим войти в систему этой временной шкалы в консоли, как мы идем. 

 var animation_cloud = новый timelinemax ({{
  Повторить: -1,
  Yoyo: True.
});
console.log ('\ n' +
  ...
  animation_cloud.duration (). TOFIXED (2) + '\ N'
);

07. Облачная анимация

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

Наша облачная анимация должна быть только тонкой, поэтому нам нужно только изменить значения на небольшую сумму. 

 Animation_Cloud
  .to ("# 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 = новый timelinemax ({{
  Повторить: -1,
  Йойо: правда,
  RepeatDeLay: Animation_DeLay.
});

09. Анимировать накладной слой

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

 Animation_tonight
  .to («# ночное время»,
  day_night_cycle_time, {
  Непрозрачность: 1,
  Легкость: анимация_ЕЗ
  }
  0, 0)
;

10 Анимировать градиент

GSAP предлагает другие подростки сверху общих типов «до» и «от». Тип TWEN, который нам нужен, чтобы оживить наш градиент - это Твин «Стагерто». Мы также можем использовать свойство «цикла», чтобы повернуть цветное колесо вокруг наших новых значений. 

 .staggerto ("# дневное время градиента",
  day_night_cycle_time, {
  цикл:{
  Стопкор: ['# 060414', '# 416584']
  },
  Легкость: анимация_Эсень,
}, 0, 0)

11 Оживить солнце

Мы можем продолжать добавлять анимацию нашу «сегодня сегодня вечером». На этот раз мы добавим новую «до», чтобы установить наше солнце. Мы установим время отображения, чтобы быть частью времени цикла, чтобы оживить солнце перед луной. GSAP позволяет нам установить практически любой атрибут. Мы будем использовать это, чтобы анимировать свойства «CX» и «CY», чтобы ниже холма справа. 

. Для («# Sun», Day_night_Cycle_Time / 1.25, {
  масштаб: 0,9,
  ATTR: {CX: «753», CY: «697»},
  Легкость: Animation_Ease}
0, 0)

12 Оживить луну

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

. Для («# луна», Day_night_Cycle_Time / 2, {
  масштаб: 0,9,
  attr: {cx: "174,5", CY: "202,5"},
  Легкость: Animation_Ease}
0, 0)

Вторая часть анимации Луны ждет первого раздела, чтобы закончить, прежде чем она начинается. Примечание. Эти две части анимации Луны связаны друг с другом внутри анимационного кода вместе с другими днем-ночными свойствами, которые мы используем. 

 Animation_tonight
  ...
  .to ('# Moon', day_night_cycle_time / 2, {
  масштаб: 0,9,
   attr: {cx: "410,5", CY: "114,5"},
  Легкость: Animation_Ease}
  , 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, легкость: Animation_Ease},
  day_night_cycle_time / 4,
0)

14 Создайте график звезд и журнал консоли

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

 var animation_stars = новый timelinemax ({{
  Повторить: -1,
  Yoyo: True.
});

15 Сделайте звезды

Теперь мы создали временные шкалы, готовые к анимации, нам нужно создать нашу мигающую анимацию. Анимация действительно проста - все, что мы хотим сделать, это снизить значение непрозрачности. Благодаря имуществу «Yoyo» непрозрачность будет оживить и выключать, и поэтому заставит звезды выглядеть так, как будто они мигают. 

 Animation_Stars
  .to ("# звезды", 0,5,
  {непрозрачность: 0,5, легкость: Animation_Ease}
0, 0)
;

16 Задержать мигание

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

 Animation_Stars
  ...
  .ТО ("# звезда - два", 0,5,
  {непрозрачность: 0,5, легкость: Animation_Ease}
  , 1,25, 0)
  .ТО ("# звезда - три", 0,5,
  {непрозрачность: 0,5, легкость: Animation_Ease}
  , 0,75, 0)
  ...;

17 Добавить снег

Вот и все! Наша велосипедная анимация нашей ночи закончена, и она выглядит потрясающе, но нам не нужно там. Поскольку изображение в SVG, мы можем легко добавить новые элементы на наш ландшафт. Давайте добавим немного снега. Мы сделаем это, используя два отдельных слоя. Каждый слой имеет коллекцию эллипсов, достаточно больших, чтобы покрыть ландшафт, а затем одинаковую коллекцию повторяется выше. 

 & lt; g id = "снежный слой" ... & gt;
  ...
  & lt; Ellipse ... / & gt;
& lt; / g & gt;
& lt; g id = "снежный слой" ... & gt;
  ...
  & lt; Ellipse ... / & gt;
& lt; / g & gt;

18 Создайте срочные сроки

Мы создаем два отдельных срока нашего снега, чтобы иметь возможность анимировать их на разных продолжениях. Мы также регистрируем свои длительности в консоли. 

 var animation_snowtop = новый timelinemax ({{
  Повторить: -1,
  RepeatDeLay: 0.
});
var animation_snowbottom = новый timelinemax ({{
  Повторить: -1,
  RepeatDeLay: 0.
});

19 Анимировать снег

Чтобы оживить наши снежные слои, мы хотим переместить два слоя вдоль вертикальной оси. Различаю свои длительности, мы получим внешний вид слоев, движущихся на разных скоростях. Анимация работает, перемещая коллекцию эллипсов вдоль вертикальной оси до тех пор, пока вторая коллекция не будет на месте первого. Затем мы повторяем анимацию. 

 Animation_Snow
  .to ("# снежный слой", 7,
  {attr: {Преобразование: "Перевести (24 -108)"}
  , легко: Animation_Ease}
0, 0)
;

Найти полную коллекцию ручек учебников здесь Отказ Нужно где-то безопасно хранить ваши файлы? Увидеть наше руководство по облачное хранилище Отказ

Эта статья была первоначально опубликована в Creative Web Design Magazine Web Designer. Подписаться на веб-дизайнер здесь Отказ

Статьи по Теме:

  • 5 удивительных apis javascript
  • 19 Прохладные примеры анимации CSS для воссоздания
  • 25 величайших анимационных музыкальных клипов

Инструкции - Самые популярные статьи

Начните с Bulma

Инструкции Sep 12, 2025

(Кредит на изображение: Bulma) Хотите начать использовать Bulma? Ты в �..

Краска бежащая вода в маслах

Инструкции Sep 12, 2025

Когда вы покрасаете морскую воду с чем-то в нем, вы принимаете задачу покрасить разрушенное отражение. Э�..

Coloureise Greyscale Работа в Photoshop

Инструкции Sep 12, 2025

Нажмите на значок в правом верхнем углу, чтобы увидеть оконча..

4 шага к лучшему VDM с Zbrush

Инструкции Sep 12, 2025

Фриланс 3D художника и вершины Partist Maya Jermy показывает вам, как освоить..

Как смешать палитру гуашь

Инструкции Sep 12, 2025

Гуаш более прощает, чем акварельная краска, но решения, которые вы дела..

Как имитировать взрывы в Maya

Инструкции Sep 12, 2025

Страница 1 из 2: Страница 1 Страница 1 ..

Использование векторных инструментов: подход веб-дизайнера

Инструкции Sep 12, 2025

Если вы веб-дизайнер, есть хороший шанс, что Photoshop в настоящее время открыт и работает на вашем компьютер�..

Как захватить движение в вашем 3D-рендерах

Инструкции Sep 12, 2025

Будучи внештатным художником, я работаю над разнообразными небольшим�..

Категории