Теги

Комментарии (0)

    +
    T
    >

    SVG анимации

    /* Превью

    Давно хотел, и вот таки добрался до этой магии..

    */

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

    Немного теории, в этом псте я на примерах накидаю пару фич как можно юзать эсвэгэ, например у нас есть изображуха в SVG и нам её нужно анимировать, но не просто анимировать, а анимировать её по частям.

    Конвертировать SVG в удобно редактируемый код

    Для этого воспользуемся функционалом AI (Adobe Illustrator), открываем нужную нам SVG на редактирование.

    1. Выбираем Файл -> Экспорт -> Экспорт для экранов
    2. Выбираем настройки
    3. Вбиваем такие настройки, сохраняем, экспортируем.

    Потом открываем этот файл через текстовый редактор, и в ручную уже редактируем.

    Например если нам нужно менять стили для целой группы элементов, то естественно собираем эти элементы в группу, тег <g/>

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

    Анимируем SVG в примерах

    jQuery + CSS

    воспользуемся старым как мир трюком, с помощью jQuery и CSS добавляем анимацию

    Бесконечно дублирующийся и двигающийся фон

    Тут по сложнее, надо делать вложенный SVG, тогда не будет видно что он выходит за края, его дублировать по порядку и двигать, как только скопированный фон становится на место первого, удаляем первый, и добавляем второй заного)