Руководство по анимации SVG (SMIL)


Оглавление (нажмите, чтобы открыть):

SVG анимация ↓

SVG язык позволяет создавать не только статические картинки, но и динамические, тоесть анимированные. При этом анимация происходит не покадрово (как в GIF), а программно — для каждого отдельного элемента можно придумать свой отдельный сценарий. Холст рисунка — сцена, все элементы рисунка (прямоугольники, линии, окружности и т.д) — актеры. Думаю, люди, которые занимаются разработкой банеров и прочей рекламной веб-графики уже заинтересовались такой возможностью SVG.

Язык анимации SMIL

Анимация SVG осуществляется посредством языка SMIL. Этот язык был рекомендован WC3 консорциумом как основной для описания сценариев векторной XML графики. SMIL не является языком программирования, это всего-лишь язык разметки, причем основанный на том же XML. Всего одним тегом можно описать сложный сценарий для отдельных фигур (перемещение, трансформация, визуализация).

Самый простой пример SVG анимации — желтый прямоугольник, который медленно переходит из прозрачного состояния в непрозрачное.

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

  • attributeName — название атрибута rect, с которым мы будем проводить манипуляции. Это opacity (прозрачность).
  • attributeType — тип атрибута. Любой аттрибут SVG тега может быть задан по правилам XML или CSS. Opacity — это CSS атрибут.
  • from и to — промежуток значений, через который пройдет opacity во время анимации. В данном случае — от 0 до 1, через все промежуточные значения (0.1, 0.2, 0.3. ).
  • begin и dur — временной промежуток анимации. При полной загрузке изображения запускается таймер, когда значение этого таймера достигнет begin, фигура rect начнет свое преобразование. Время, за которое прямоугольник станет непрозрачным указывается в атрибуте dur.
  • repeatCount — количество повторов анимации.

Внутри каждой фигуры (тега) можно вставить любое количество мини-сценариев для одного атрибута. Давайте добавим нашему прямоугольнику движения. Для этого изменяем с течением времени XML-атрибут X, с 400 до 500 за 10 секунд:

Наша фигура медленно уходит вправо и становится все менее прозрачной. Ну и напоследок, добавим в сценарий обратный ход и смену цвета на красный. Конечный вариант:

Еще один пример, с двумя актерами: 2.svg.

Узнать больше можно на странице официальной документации по animate (на анг.)

JavaScript и ECMAScript

К сожалению, SMIL не умеет считать, ведь это язык разметки. Если есть необходимость вычислять сложные траектории полета фигур, анимацию лучше реализовывать посредством языка программирования (ECMA или Java)Script. Каждый элемент SVG рисунка — элемент DOM, поэтому никаких сложностей у знатока JS возникнуть не должно. Доступ к элементу — getElementById, изменение значения атрибута — setAttribute, а остальное — дело техники. Однако предпочтительнее использование библиотеки Raphael.

An Intro to SVG Animations (SMIL)

Before getting into the topic of SVG animations, I just want to make sure we are all in the same boat by giving a brief idea of what is SVG, why we need to use it and its support across the web.

What is SVG?

SVG is just a file format much the same as jpeg, png and stands for Scalable Vector Graphic. As the name suggests, it is a graphic made up of vectors, that can be scaled across various responsive design workflows. Maintained by W3C and defined in an XML format, it can easily integrate with other W3C standards like DOM(Document Object Model) and XSL(Language for Expressing Styles). The above smiley is written with the help of tags. Check out the code here.

Why to use SVG?

There are 3 main reasons which strongly makes SVG more appealing than traditional image types (jpg, png).

  1. Resolution Independent : It doesn’t matter what your screen size, zoom level, or resolution or whether or not you have a ‘retina’ display, the same clarity of SVG is maintained as it is a vector graphic with paths, shapes and fills.
  2. Speed : SVGs are just code, which means very small file sizes. There are very few instances when SVGs can take a lifetime to load, for example, if you’ve made the Eiffel Tower as a vector graphic with a million paths and fills, best to use a JPEG or PNG. But in most of the cases, SVG file size is less than that of the other formats.
  3. Animations : SVGs can be animated and styled with CSS. Animations (transformation/transition) that you use on HTML elements can also be used on an SVG element. There are instances where you can’t use CSS to animate SVGs however these instances can usually be covered with JavaScript. You can also refer to snapsvg.io which is cons > Synchronized Multimedia Integration Language ( SMIL) is a W3C recommended XML markup language to describe multimedia presentations. It defines markup for timing, layout, animations, visual transitions and media embedding. SMIL allows presenting media items such as text, images, video, audio, links to other SMIL presentations, and files from multiple web servers. SMIL markup is written in XML, and has similarities to HTML.

Note: Another advantage to SMIL over JS animations is that JS animations don’t work when the SVG is embedded as an img or used as a background-image in CSS. SMIL animations do work in both cases (or should, browser support pending). That’s a big advantage, in my opinion. You may find yourself choosing SMIL over other options because of that. This article is an intro to help you get started using SMIL today. This opens up a whole world of creativity when it comes to the web. I’ve popped in an example of an SVG animation to give you an idea of what’s possible:

Browser Support and Fallbacks

Browser support for SMIL animations is pretty decent. They work in all browsers except in Internet Explorer and Opera Mini. For a thorough overview of browser support, you can refer to the compatibility table on www.caniuse.com.

If you need to provide a fallback for SMIL animations, you can test for browser support on-the-fly using Modernizr. If SMIL is not supported, you can then provide some kind of fallback (JavaScript animations, an alternate experience, etc).

SVG Animations

To start off with SVG animations, I will ask you to think of any use case you have encountered among the following and how you have solved it:

  1. Moving an object along a specific path(using some js library)
  2. Repeating an animation infinite times or specific number of times(using javascript)
  3. Moving background-image(gif or a v >The above situations can be solved easily with the help of SVG and SVG animations, which will be resolution independent.

The animation is done by manipulating the attributes of shapes over time. This is done using one or more of the 4 SVG animation elements:

The element is the simplest of the SVG animation elements. It simply sets an attribute to a certain value after a specific time interval. As such, the shape is not continuously animating, but just changes attribute value once. See the example below.

animate

The animate element is used to animate an attribute of an SVG shape. You nest the animate element ins >set attribute changes the attribute value abruptly, the animate attribute allows for a smooth transition between ‘from’ and ‘to’ attributes. Check out the below example for better understanding.

animateTransform

animateMotion

There are few settings that can be made with the help of rotate attribute. ‘rotate’ attribute can take one of these 3 values

  • auto : Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path.
  • auto-reverse : Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path plus 180 degrees.
  • a number : Indicates that the target element has a constant rotation transformation applied to it, where the rotation angle is the specified number of degrees.

Note : You can combine one or more animations with having more number of animate tags inside the element you want to animate.

Final Words

This is just the basics of the SVG animations. There is more of it to come when you go deep inside in the name of morphing the shapes, adding additional properties to animation in the form of key splines, co-ordinating animation within a single element and many more.

A lot of very impressive effects can be created, especially ones involving morphing and transforming shapes. The sky’s the limit.

Создаем SVG анимацию, используя CSS и JavaScript

SVG или Масштабируемая Векторная Графика (Scalable Vector Graphics) применяет XML, дабы предоставлять вектору графическую информацию в легкой форме. В отличие от другого растеризированного формата изображения, такого как PNG и JPEG, SVG может быть изменен без потери качества изображения.

Создавать SVG можно при помощи Adobe Illustrator, а также используя другие различные графические редакторы. Но еще возможно сделать это и вручную, используя XML/SVG DOM теги и настройки создания элементов.

Так как это графика XML, возможно создавать некую анимацию SVG, путем использования возможностей CSS, JavaScript и SMIL (Синхронизированный Мультимедийный Язык Интеграции).

В сегодняшнем уроке я покажу вам, как анимировать SVG с помощью CSS и JavaScript. А использовать мы будем изображение, текст и векторную графику.

Для сегодняшнего урока нам понадобится:

  • SVG иконка
  • SVG текст
  • SVG ваза и цветок
  • Знание HTML и CSS
  • Время и чуточку терпения

Экспортируем файлы в SVG

Лучший способ экспортировать изображение в SVG формат, это воспользоваться возможностями Adobe Illustrator. Я уже создал SVG иконку и текст в illustrator, которые мы будем использовать в процессе урока.

Чтобы экспортировать Ваши файлы Adobe Illustrator в SVG, просто зайдите в File->Save As(Файл->Сохранить как), следующим шагом будет выбор имени и SVG формата. В этом примере я буду использовать plant(вазу), формат файла выбираем SVG.

Затем всплывет окно, удостоверьтесь, что у вас выбран SVG version(версии 1.1), после выберите location(местоположение):link(ссылка). В CSS properties(CSS свойствах) выбираем Style Elements(Элементы стиля). Если вам необходимо проверить SVG код, то вам нужно нажать на кнопку “SVG Show code”(Просмотр кода SVG), она находится в нижней части окна. Чтобы закончить процесс, экспорта необходимо нажать на кнопку OK.

Используем SVG в HTML

SVG, как указано выше, основывается на XML, и некоторые браузеры позволяют вам вставлять изображение SVG в HTML. Есть различные способы включать SVG в документы HTML.

1. Вставляем целый SVG код в HTML

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

Создание слоистой анимации на SVG


Дата публикации: 2015-10-05

От автора: что если я скажу вам, что существует формат изображений, работающий как GIF, но только с векторной графикой? А что если я скажу вам, что в этом формате можно менять направление анимации? А если так, вы можете взять за основу одно изображение и анимировать различные его части отдельно и с разной скоростью? Да, такой формат уже существует и это SVG. Просто нужно проявить немного смелости.

В этой статье я смешаю старое с новым, взяв за основу что-то примитивное и вдохнув в это новую жизнь. Sass поможет оптимизировать рабочий процесс и, возможно, поможет продемонстрировать автоматизацию. Иногда автоматизация может стоять на службе творчества.

Анимация, старые подходы

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Долговечное очарование

«Делайте все собственными руками, даже когда используете компьютер.» — Хаяо Миядзаки

Студия Гибли Хайо Миядзаки, которая выпустила массу замечательных произведений, среди которых Унесенные призраками, Ходячий замок и Принцесса Мононоке, придерживается традиционных ручных методов анимации, слоистой анимации. В отличие от CGI или keyframe анимации с помощью CSS данный подход занимает гораздо больше времени.

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

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

Левая, гладкая анимация сделана при помощи keyframe трансформаций, в то время как в основе правой лежат три независимых кадра, один за другим. Пользователи Firefix могли заметить, что для анимации выше не применилось свойство transform-origin, все дело в баге.

Неудобный SMIL

Если сказать, что в интернете не существует технологии для создания веб слоистой анимации, это будет ложь. Громоздкое название Синхронизированный язык мультимедийных интеграций (SMIL), этот язык предназначен для создания анимации. У Jonathan Ingram есть замечательный урок по использованию SMIL для создания слоистой и зацикленной анимации на примере персонажей Mortal Kombat:

Элемент animate используется для определения состояния анимации для родительского элемента.

Однако не обходится и без серьезных проблем. Несмотря на довольно старую классификацию, SMIL все же не поддерживается в IE. Более того, поддержка также не планируется ни в IE12, 15 или даже в 38. В то же самое время язык устаревает, а поддержка в Chrome падает. Paul Kinlan из Google рассказал, что в бета-версии Chrome 45 фактически закрыли глаза на предупреждения об устаревании SMIL.

Поддержка SMIL продолжает уменьшаться, и я нахожу немного странным использование XML разметки для создания анимации. Я привык, что моя анимация находится в отдельном файле стилей, и думаю ей там самое место. В конце концов, анимируя элемент, мы меняем только его визуальное положение, но не затрагиваем разметку. Это можно только в JavaScript.
К сожалению, в CSS нет явного или быстрого способа создания слоистой анимации, однако я опишу способ на основе редко используемых keyframe свойств CSS.

Начнем

@keyframe анимация работает с помощью свойства animation-timing-function, вы должны знать о некоторых временных функциях. К примеру, свойство ease-in уменьшает скорость анимации, когда та подходит к завершению.

Редко используемая функция steps() также представляет интерес для нас, так как она имитирует эффект подергивания, анимация будто бы состоит из отдельных слоев, проигрываемых один за другим. К примеру, steps(5) выполнит довольно плавную анимацию из пяти отдельных слоев.

Все значения функции steps() имитируют keyframe анимацию; нету какого-то магического переключения кадров. Но, если воспользоваться steps(1), то можно просто переключаться между кадрами без какой-либо анимации. Изменяя свойство opacity от 1 до 0, мы можем показывать и прятать анимируемый элемент за один шаг: вот он есть, а вот и нет. Это очень важный этап построения слоистой анимации, которую я собираюсь создать.

Элементы, как отдельные слои

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

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

Разметка

Для этого мне понадобится SVG. Технически слоев может быть сколько угодно, но в SVG мы можем с легкостью определить набор элементов path и наложить их друг на друга. В примере ниже я создал контейнер для анимации с помощью SVG элемента (группа), внутри которого находятся наши слои. Данные слои должны быть прописаны в порядке, в котором вы хотите, чтобы они появлялись.

Как работать с форматом SVG: руководство для начинающих веб-разработчиков

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

Зачем использовать SVG

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

Масштабирование изображения с сохранением качества pixel perfect

При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает её качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.

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

Сравнение качества растровых и векторных изображений

Возможность модификации

Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.

Небольшой «вес» файлов

Изображения в формате PNG становятся очень «тяжёлыми», когда вы используете высокое разрешение. Это негативно влияет на скорость загрузки страницы, что в свою очередь может ухудшить результаты сайта в поисковой выдаче.

Файлы в формате JPG чуть «легче» картинок в PNG, но всё равно они слишком «тяжёлые». А изображения SVG представляют собой код, поэтому они «весят» очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.

Доступность

Если SVG-изображения содержат текст, поисковики могут их индексировать и выдавать в ответ на запросы пользователей. Скринридеры, которые используют слабовидящие и слепые пользователи, тоже поддерживают SVG. Это обеспечивает доступность файлов этого формата для всех посетителей сайта.

Использование SVG: распространённые практики

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

Логотипы и иконки в SVG

Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Чёткость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.

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

Инфографика

Элементы SVG можно динамически обновлять в зависимости от действий пользователей или изменений данных. Поэтому SVG — идеальный вариант для создания интерактивных карт и инфографики.

Визуальные эффекты

С помощью SVG удобно делать разные визуальные эффекты, например, изменения формы элемента или превращение одного элемента в другой. К примеру, можно менять форму букв или трансформировать один логотип в другой.

Анимация

SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.

Иллюстрации и рисунки

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

Интерфейсы и приложения


SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт.

Использование SVG в HTML и CSS

Файлы в формате SVG можно добавлять на страницы сайта средствами HTML и CSS.

Тег img

Первый способ — URL изображения можно указать в атрибуте src тега . В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.

Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ — возможность дополнительно использовать тег . С его помощью к изображению можно добавить гиперссылку.

Если вы добавляете изображение через тег , его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.

Использование SVG в CSS

Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах. Ниже пример кода.

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

Инлайн SVG в HTML

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

Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.

Использование SVG в формате кода

В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.

Код SVG можно добавлять в HTML-разметку страницы или писать его в отдельных файлах. Ниже пример создания окружности и прямоугольника с помощью SVG.

Подробнее о работе с простыми фигурами ниже.

Рисуем с помощью SVG: круг

Чтобы нарисовать круг, необходимо указать три атрибута:

  • Радиус круга — r.
  • Позицию центра круга по оси x — cx.
  • Позицию центра круга по оси y — cy.

Код, с помощью которого можно нарисовать круг, можно посмотреть ниже. Цвет линии и фона можно указывать инлайн или отдельно.

Круг нарисован с использованием обсуждаемого формата

Рисуем с помощью SVG: прямоугольник

Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.

Прямоугольник нарисован с помощью SVG

Рисуем с помощью SVG: линия

Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии. Код ниже наверняка выглядит понятнее объяснения словами.

Рисуем с помощью SVG: звезда

С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры. Пример кода ниже.

Сложный многоугольник в формате SVG

Рисуем с помощью SVG: пути

С помощью элемента можно рисовать ломаные кривые. Они позволяют создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.

Вот пример использования path:

А это пример нескольких линий, созданных с помощью path:

Пути (path) в SVG

Рисуем с помощью SVG: кривые

Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.

С помощью команды S можно объединять кривые и создавать сложные формы.

Как работать с текстом с помощью SVG

Формат SVG позволяет работать с текстом. Для этого применяется тег

Обычный текст создан с помощью SVG

С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.

Как управлять свойствами шрифта с помощью svg

SVG позволяет управлять следующими свойствами шрифта:

  • font-family .
  • font-style .
  • font-weight .
  • font-variant .
  • font-stretch .
  • font-size .
  • font-size-adjust .
  • kerning .
  • letter-spacing .
  • word-spacing .
  • text-decoration .

С помощью тега можно выбрать одно или несколько слов в тексте и изменить их свойства.

Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.

можно связывать текст с путями. Это делается с помощью атрибута xlink:href. Пример кода ниже.

Как использовать CSS в SVG

Код CSS можно указывать инлайн в коде SVG. Смотрите пример.

Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.

В CSS можно работать с этим классом.

Вместо заключения: как дела с SVG 2.0

SVG 2.0 активно разрабатывается. Продукт находится в стадии предварительной версии (Candidate Recommendation). Браузеры не полностью поддерживают SVG 2.0. В новой версии добавлены некоторые возможности HTML 5 и WOFF (web open font format). Следить за стадиями разработки SVG 2.0 можно на сайте W3C.


Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Как данный пример анимации CSS сделать на чистом SVG SMIL

Как данный пример полностью реализовать на svg , без единой строчки css . css можно стилизовать только сам тег svg

1 ответ 1

Чтобы было легче сравнивать команды анимации CSS и SVG ,- наименования классов, уникальных идентификаторов будут одинаковы в обоих примерах.
Анимацию SVG можно сделать по разному, очень коротким кодом, но опять же, для лучшего понимания будем делать подробно, последовательно и нудно.

    Линии нарисованы с помощью

ширина линий задана — stroke-w

Для повторения примера анимации на CSS, необходимо сделать несколько последовательных анимаций SVG:

  1. Верхняя и нижняя линии сдвигаются навстречу друг другу в одну позицию со средней линией.
  2. Средняя линия исчезает, так как её не должно быть видно при повороте крайних линий
  3. Поворот одной линии против часовой стрелки на -45°
  4. Поворот второй линии по часовой стрелке на 45°
  5. Обратный поворот наклонных линий в горизонтальное положение.
  6. Появление средней линии
  7. Возврат первой и третьей линии на исходную позицию

#1. Анимация начинается после клика по чёрному квадрату. begin=»iconWrapper.click»

К первой анимации придётся давать много пояснений, дальше пойдёт легче

pointer-events=»none» Так как белые линии находятся выше чёрного квадрата, необходимо сделать их прозрачными для клика, если курсор попадает на них. Другими словами,- клик, как команда для начала анимации сработает при любом расположении курсора, хоть на белых линиях, хоть на чёрном фоне.

attributeName=»points» — атрибут, который будет анимироваться,- внутри него набор координат начальной и конечной точек одной линии —

values=»5 10 45 10;5 25 45 25″ — до точки запятой координаты линии в начальном положении, после точки с запятой координаты в конечном положении.

fill=»freeze» — заморозка линии в конечном положении.
restart=»never» — защита от повторного мгновенного клика, иначе начнется повторная анимация не дожидаясь окончания исходной анимации.

#2. Средняя линия исчезает, так как её не должно быть видно при повороте крайних линий

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

attributeName=»opacity» values=»1;0″ — прозрачность линии изменяется от нуля до 100% begin=»an1_Line3.end» — начало анимации сразу после завершения предыдущей анимации, сближения линий.

#3. Поворот одной линии против часовой стрелки на -45°
#4. Поворот второй линии по часовой стрелке на 45°

type=»rotate» values=»0 25 25; 45 25 25″ — поворот по часовой стрелке на 45° группа цифр после точки с запятой — ; конечное положение линии 45 25 25 — угол и координаты центра вращения.
begin=»hide.end» — анимация вращения начнется по окончанию анимации сокрытия линии

#5. Обратный поворот наклонных линий в горизонтальное положение.
#6. Появление средней линии
#7. Возврат первой и третьей линии на исходную позицию

SVG SMIL анимация,- это декларативная анимация. Поэтому у неё нет переменных.
То есть негде хранить и считать клики в интерактивном режиме анимации.
Поэтому для выполнения таких действий, как в примере автора вопроса, необходимо всё таки подключать или CSS в виде скрытых чекбоксов или JS .

SVG хорошо работает в паре c CSS , JS . Стили CSS можно добавлять внутри файла SVG в стилях представления:

или добавлять стили внутри файла svg:

Вот перевод отличной статьи , в которой автор — Sara Soueidan, попыталась кратко и доходчиво на примерах изложить основы анимации:

Практическое
руководство

Содержание
Введение

Мы живём в век пикселей. Как дизайнеры и разработчики в вебе, пиксели могут быть нам как друзьями, так и врагами. Мы хотим, чтобы всё выглядело красиво и чётко для всех, кто пользуется нашими сайтами, и нам необходимо уменьшать размеры файлов для улучшения производительности. В общем-то, есть только один способ для иконок, логотипов и иллюстраций — это SVG . Масштабируемая векторная графика (Scalable Vector Graphics) позволяет изображению выглядеть чётко на мониторе с любым разрешением, при этом иметь очень маленький размер файла и легко поддаваться редактированию и изменениям.

Цель этого руководства — дать обзор практического применения SVG -изображений в вебе с некоторыми советами и хитростями, которые помогут получить максимальную отдачу от них.

Scalable Vector Graphics это разметка, основанная на XML , который содержит двумерные векторы. Векторами могут быть простые геометрические формы, сложные контуры, да и всё то же самое, что можно сделать в Иллюстраторе. Этот формат изображений имеет намного больше общего с веб-страницей, чем тот же JPEG . SVG намного мощнее — им легко можно управлять при помощи кода (в текстовом редакторе или с помощью CSS / JS ).

  • не зависит от разрешения
  • поддерживается во всех современных браузерах
  • актуален в будущем ( W3C стандарт)
  • легко создавать и редактировать
  • изменяется с помощью CSS & JS
  • поддаётся сжатию

Подготовка и оптимизация

Подготовка SVG для использования в вебе это очень простой процесс, не сложнее экспорта JPEG или PNG . Используйте любой привычный для вас графический редактор (Illustrator, Sketch, Inkscape [бесплатен], и тому подобное [или даже Photoshop, если вы используете слои с формами]) с тем размером изображения, который вы планируете использовать. Обычно я работаю в Иллюстраторе, поэтому я объясню некоторые способы подготовки файлов в этой программе, но вообще они применимы и для любой другой программы. Вам, возможно, стоит перевести текст в кривые, поскольку шрифт, скорее всего, будет неправильно отображаться, если, конечно, вы не планируете стилизовать их с помощью веб-шрифта, используемого на странице (что возможно!). Не стоит также превращать все объекты в единые формы, особенно если у вас есть обводка, которой необходимо будет управлять на странице, тем более преобразование объектов зачастую не уменьшает размер файла. Любые имена, присвоенные группам или слоям, будут добавлены к SVG как ID элемента. Это довольно удобно для стилизации, но немного увеличит общий размер файла.

Перед тем как сделать экспорт, необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px ). В противном случае скорее всего изображению не будет хватать чёткости и часть изображения обрежется. В Иллюстраторе это можно сделать следующим образом: Object > Artboards > Fit to Artwork Bounds . Затем жмём save as и выбираем SVG , и оставляем настройки по умолчанию. Здесь можно сделать небольшую оптимизацию, но на самом деле не стоит, так как далее мы будем применять разные улучшающие приёмы, поэтому сейчас мы не будем тратить впустую время на эти настройки.

Приёмы для уменьшения размеров файла.

(Смотрите ресурсы по оптимизации)

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

Чтобы добиться наименьшего размера SVG , логично будет удалить из него всё лишнее. Наиболее известная и полезная программа (по крайней мере я так думаю) для обработки SVG это SVGO. Она удаляет весь не нужный код. Но! Будьте внимательны используя эту программу, если планируете управлять SVG при помощи CSS / JS , так как она может слишком сильно почистить код, что затруднит дальнейшие изменения. Удобство SVGO ещё и в том, что её можно включить в процесс автоматической сборки проекта, но можно также использовать GUI если хочется.

Разбираясь подробнее с правильным удалением всего ненужного, мы можем сделать ещё кое-что в графическом редакторе. Сперва нужно убедиться, что используется настолько мало контуров/форм, насколько это возможно, так же как и точек на этих контурах. Можно объединять и упрощать всё, что поддаётся упрощению, и удалить все ненужные точки. В Иллюстраторе есть плагин VectorScribe с инструментом Smart Remove Brush Tool , который поможет удалить точки и при этом оставить общую форму той же.

Smart Remove Brush Tool удалил точки

Дальше будем увеличивать изображение. В Иллюстраторе удобно включить просмотр с пиксельной сеткой View > Pixel Preview и проверить, как располагаются контуры. Чтобы разместить контуры по сетке, потребуется немного времени, но эти усилия окупятся и позволят добиться более чёткого рендеринга (лучше обратить на это внимание заранее).

Точки вне сетки

Выравнивание по сетке

Если есть два и более объекта для выравнивания, то стоит удалить все ненужные перекрытия. Иногда даже если контуры тщательно выровнены, может быть видна тонкая белая линия. Чтобы предотвратить такое, можно немного наложить объекты друг на друга в местах перекрытия. Важно: в SVG z-index имеет определённый порядок, который зависит от объекта, находящегося снизу, поэтому стоит поместить верхний объект в нижнюю часть файла в коде.

И, наконец, последнее, но немаловажное, то, о чём обычно забывают — это активировать gzip сжатие SVG на вашем сайте в .htaccess файле.

В качестве примера того, насколько эффективна эта техника, я воспользуюсь оригинальным логотипом Breaking Borders и оптимизирую его таким образом: увеличиваю размер до того, каким он должен быть; приведу в порядок контуры; удалю максимально возможное количество точек; передвину точки на целочисленные пиксели; сдвину все области перекрытий и отправлю это всё в SVGO .

Оригинал: 1,413b


После оптимизации: 409b

В итоге размер файла стал меньше на

Дополнение: Rob Sterlini заметил, поскольку «b» повторяется, можно использовать элемент , для повторения, что ещё больше уменьшит размер файла — и был абсолютно прав.

После оптимизации с использованием : 311b

Размер файла стал меньше на

Если применить эту технику ко всем файлам SVG , это значительно улучшит ваш сайт.

Варианты использования (реализации)

Когда приходит время использовать SVG в вебе, появляется много различных способов, как это сделать. Некоторые из них имеют определённые преимущества в зависимости от того, чего вы хотите добиться, а некоторых стоит и вовсе избегать. Если требуется только базовая настройка, а разрешение и размер файла должны быть небольшими, то можно прописать SVG в img или как background-image в CSS , так же как любой другой формат файла.

Здесь всё делается так же, как с любым изображением в этом формате. Можно даже использовать SVG как элемент

. Но помните, что возможности преобразований в этом формате ограничены.

Background-image

Не стоит сохранять этот формат в base64 , это приведёт к блокировке загрузки стилей. Помните, что возможности манипуляций в этом формате ограничены.

Iframe

Вы можете загрузить SVG как

Embed

применяется «во внешних приложениях» или «в интерактивном контенте». Вы можете использовать это для SVG , но лучше не стоит.

Object

Inline

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

Заключение

Если хочется выжать максимум из SVG , используйте

JS -манипуляции

Мои знания Javascript очень маленькие, поэтому я дам только основные советы о том, как можно использовать JS для изменений в SVG . Если вы хотите вставить свои скрипты внутри SVG , то не забудьте обернуть их в &lt![CDATA[ . ]]> снова, чтобы избежать ошибок анализа. Скрипты не будут работать если использовать или background-image из-за мер безопасности (то есть чтобы предотвратить запуск потенциально вредоносного кода на вашей странице).

Когда вы работаете с внешним JS (то есть не встроенным в файл SVG ), если у вас встроенные SVG , вы можете выбрать его как любой другой DOM -элемент. Если вы используете

Фиксированная ширина и адаптивность

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

Если размеры фиксированы, то единственная важная вещь, с которой нужно быть осторожным, если вы используете SVG как background-image — это то, что вам нужно быть уверенным, что background-size прописан, так как браузеры могут немного запутаться и или подрезать изображение, или сжать его, особенно, если отображаются размеры, отличные от оригинального размера изображения.

Когда вы изменяете размер SVG , нужно помнить о некоторых вещах (если используем background-image ):

Объект

Работает, как ожидается, при width: 100%;

Встроенные

Ранее требовалась значение max-height для работы, в настоящее время работает, как ожидается. Помните, что Safari не так быстро отрисовывает изображения (если они сложные) при изменении размеров окна.

Работает, как ожидается, при width: 100%;

Background-image

Требует padding-bottom: #%; , чтобы сохранить пропорций изображения, иначе не отображается.

Анимация

Когда требуется анимировать SVG существует несколько различных опций, которые можно использовать — анимирование SVG (основанное на SMIL -стандарте), CSS3 -анимация или JS -анимация. SVG — и CSS3 -анимации позволят сделать большую часть того, что вам захочется сделать, при этом SVG -анимация чуть мощнее, потому как имеет возможность «контролировать» некоторые особенности (или даёт доступ к некоторым возможностям). JS позволит относительно легко делать неплохую сложную анимацию, особенно используя такие библиотеки как Snap.svg. Это находится вне моих знаний о JavaScript, поэтому я позволю вам потестировать их демо версии, чтобы убедиться подходит ли это вам.

SVG -анимация даёт огромные возможности, но я не собираюсь останавливаться на этом подробно, и, честно говоря, я ни разу не использовал её. Я могу представить, что может быть полезно добавить некоторую хорошую анимацию для ваших иллюстраций, но честно говоря, с практической точки зрения, не каждый проект имеет на это достаточное время и бюджет. Если у вас всё же есть возможность, довольно просто начать экспериментировать с этим, есть много прекрасных онлайн-уроков. В основном можно добавлять дочерние элементы к любому контуру или форме в ваших SVG -файлах, которые позволят контролировать анимацию. Самое лучшее в этом то, что оно работает со всеми методами использования SVG . Internet Explorer не поддерживает SVG -анимацию, однако вы можете использоваться полифил, такой как FakeSmile для работы с IE .

Вот вам небольшой пример. Обратите внимание: я подсветил голубым цветом, чтобы легче было увидеть анимацию.

SVG -анимация

Object

Inline

Background-image

Обычно, когда мы хотим анимировать иконки или иллюстрации в вебе, мы это делаем для добавления интерактива, то есть при наведении мыши и тому подобное. Это подпадает под пункты «Управление с помощью CSS» и «Интерактивная SVG-анимация» из табличек выше, и следовательно, не работает ни с SVG -, ни с CSS3 -анимациями при использовании или background-image . Чтобы сделать интерактивную анимацию в SVG можно добавить begin=»mouseover» и begin=»mouseout» . Для CSS3 -анимации всё то же самое, что и в любом другом случае — добавьте классы для SVG -элементов и стилизуйте их при (наведении) hover . Обратите внимание на одну вещь — если вы хотите стилизовать анимации из внешнего списка стилей, они будут работать, как ожидается при использовании встроенного SVG . А при использовании

CSS3 -анимация

Спрайты

Можно создавать и использовать SVG -спрайты так же, как и в случае с PNG или background-image , чтобы получить преимущества в разрешении, или же можно шагнуть чуть дальше, используя дополнительные возможности SVG . Я не буду на этом подробно останавливаться, так как это становится довольно сложным (это комплексный подход), и я лично никогда не сталкивался с необходимостью использовать его. Основное преимущество — это использовать всю мощь SVG с меньшим числом HTTP -запросов.

Существует два подхода, которые можно использовать — в первом вы определяете все иконки внутри тега в SVG , но скрываете их. Затем обращаетесь к каждому, когда это потребуется, используя элемент , ссылаясь на с xlink:href=»#id» . Второй подход — это использовать в SVG viewbox атрибут, чтобы обрезать рабочую область (область в SVG , которая видна) вокруг определённой области. Эти оба способа достаточно продвинутые, поэтому задумайтесь о них, только если решите использовать.

Если вы хотите узнать как внедрить эти техники, то обратитесь к ссылкам на ресурсы, приложенные ниже, особенно к статье Sara Soueidan’s на 24ways.

Если вы хотите использовать SVG -спрайт как PNG -спрайт с CSS , то нужно добавить атрибуты width и height рядом с атрибутом viewBox в SVG -коде. Традиционно, в процессе оптимизации они удаляются, потому что обычно они не нужны. Однако, в этом случае эти параметры требуются для IE9 & 10 чтобы корректно порезать их на части. Это происходит потому, что эти браузеры принимают размеры высоты и ширины, указанные в CSS , за размер изображения, а на самом деле это как раз размеры требуемой части изображения (а не всего изображения в целом).

Медиавыражения

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

Представьте, что вы большой бренд и вы хотите, чтобы ваш логотип использовался правильно, независимо от отображаемого размера. И вам это удастся. Только вставьте нужное медиавыражение, и вы сможете менять формат в зависимости от размера изображения на дисплее. Это работает со всеми реализациями, кроме background-image , и во всех браузерах (но помните: IE9—11 может игнорировать некоторые контрольные точки). Поэкспериментируйте со слайдером ниже, чтобы увидеть на живом примере, как это может работать:

Запасной вариант

К слову о запасных вариантах. SVG поддерживается во всех современных браузерах, но если ещё требуется поддержка IE8 , то нужно использовать запасные варианты, скорее всего, в виде PNG . Я не буду останавливаться на этом хотя бы потому, что уже пора прекратить пользоваться IE8 ¯\_(ツ)_/¯. В любом случае, если вам всё же нужны запасные варианты, всё усложняется довольно быстро, как и большинство вещей с SVG . Советую прочитать исчерпывающую статью Amelia Bellamy-Royds на CSS-Tricks.

30 Awesome SVG Animation For Your Inspiration

Designers used to create animations in HTML elements using CSS. However, due to the limitations of HTML elements in creating patterns, shapes, and others, they naturally turn to SVG, which offers more interesting capabilities.


Working with SVG, we enjoy good browser supprot for SVG animation, and we have more ways to create new animation. You can use both the built-in SVG animation functionality or CSS3 animation (note that not everything can be done by CSS so there is still need for JavaScript). Another way is by using JavaScript engines such as GSAP or Snap. JS is good practice for creating animation.

Here I have compiled some amazing animated SVG. Some use SVG animation, others use CSS transform for basic animation, and the rest use the help of JavaScript.

Border Animation by Sean McCaffery

Made only with CSS, a border forms smoothly around the text, when you hover over the “HOVER” instruction.

Elastic SVG Sidebar by Nikolay Talanov

The sidebar becomes elastic when you try to pull it away from the side. A nice concept applied on a Material Design-inspired application sidebar.

Pull Down to Refresh by Nikolay Talanov

Most pages allow you to “pull down” on the page to refresh. With this animation, when you “release” the page, the Send icon changes into a Plane icon and gets released into the air.

Animated Gradient on Text by Patrick Young

Here’s a subtle but not easy to miss moving text gradient that typography lovers will love.

Heart Animation by Nikolay Talanov

This animation shows you how a heart icon is made from two circles and a square. The transformation is done with CSS animation.

Let’s Travel by jjperezaguinaga

An animation that illustrate cities and popular tourist destinations in the world. The moves and transformations are created using CSS animation.

Menu toggle animation by Tamino Martinius

A morphing animation of the hamburger icon turning into a cross icon. See how smooth the transition is between the two objects.

Animated Infographic by Sdras

An awesome animation by Sarah Drasner, powered by GSAP timeline. It is an infographic come to life, made with animation. Use the slider to access the frames from any point.

Rain-Bros don’t like JS by cihadturhan

A unique and funny loop animation depicting the characters’ walk. The movement of the objects in this demo is a combination of SVG and CSS3 animation. The legs use SVG animation while other parts use CSS3 animation.

Clock by Mohamad Mohebifar

Watch the smooth movement of the second-hand in this clock showing the current time. The animation is completely made using the SVG animation functionality.

Rainbow Rocket Man by Chris Gannon

An astronaut shooting into space with it’s rainbow-powered jet pack(?). Nice animation made using the GSAP Tweenmax plugin.

Animated Icon by Luigi De Rosa

However over these animated SVG icons to check out what they can do. The creator made this using GSAP.

Flat Workspace by Hoàng Nhật

The animation illustrates a workspace in flat style design. The creator used GSAP to make this awesome animation of a workstation forming.

The clickable animated icon by Hamish Williams

This is a cool animation makes use of the snap.svg library. Click to see mail being “sent”.

Diving by Chris Gannon

Have you ever skipped stones on the surface of a lake? Here’s a simple SVG path animation illustrating that but with no stones, and no lake.

Motion for the web by LegoMushroom

It has animation, a nice tune, super cool entrance for the text, what’s not to like? This is built with mo.js, a motion graphic JavaScript library.

Animated writing font by Lee Porter

Besides using SVG to make path animation sketching a shape, you can use it on typography like what this creator made. The blur effect makes it more awesome.

Gooey menu by Lucas Bebber

Have fun with the gooey effect in this design, which is made using SVG filter and by adding CSS animation. The result is realistic and really cool, and you can play with four different versions.

New Cake by Marco Barría

How to make a layered birthday cake made with SVG and CSS animation.

Thank you by Rachel Smith

Just see this awesome animation of a simple thank-you note. It is created using SVG and GSAP TweenMax library.

CSS vs SVG by Mario Sanchez Maselli

Now let’s look the comparison about CSS and SVG animation, do you see the difference?

Walking Dog by Mark Nelson

Another way to animate SVG is by using sprites images, like how this creator did.

Hourglass loader by Leela

A creative work made using pure SVG animation (SMIL); no CSS or JS to animate things here.

Logo Animation by Adem ilter

Here’s a nice animated logo intro using inline SVG animation. No CSS or JS was used to make everything work.

Stats animation by Jonas Badalic

A beautiful stats graph with SVG animation powered by Snap.SVG library.

Ouroboros by Noel Delgado

An amazing SVG animation path. First the creator drew a path route on SVG, before using tween.js to add animation.

Creative Gooey Effects by Lucas Bebber

Here are seven creative uses of SVG filter to make a gooey-like effect. The music visualizer is my favorite, the animation looks very nice.

Throw the cow by Sarah Drasner


This one is an SVG animation powered by TweenMax but made just for fun. Hold and drag the cow around the planet. It will spin in «orbit».

Animated Logo by Ali

Animation could be a nice little addition for a bubbling beer logo. The nice little floating bubbles are built purely with SVG native animation syntax.

SVG анимация. С Vivus.js это просто! SVG анимация и примеры кода.

Vivus.js — это легкий класс JavaScript (без зависимостей), который позволяет вам создавать крутую SVG анимацию, придавая им ей, который вы рисуете. Доступно множество различных SVG анимаций, а также возможность создать собственный скрипт для рисования SVG любым удобным для вас способом. SVG анимация выглядит потрясающе с Vivus.js!

VIVUS

  • Demo: https://maxwellito.github.io/vivus/
  • GitHub: https://github.com/maxwellito/vivus
  • Для создание простой анимации одного объекта SVG на основе CSS: Vivus Instant
  • Очистка SVG от мусора и уменьшение размера SVGOMG перед использованием в Vivus Instant

Попробуйте Vivus с вашим SVG на Vivus Instant. Если вы планируете использовать библиотеку для анимации одного SVG без обратного вызова или элементов управления, это позволит вам загрузить анимированный SVG на основе CSS без JavaScript.

SVG Анимация и её виды

На следующем изображении розовый цвет представляет значение длительности duration , а синий — значение задержки delay .

⇒ С задержкой (Delayed)

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

⇒ Синхронно (sync)

Каждая линия рисуется синхронно. Все они начинаются и заканчиваются одновременно, отсюда и название синхронизации sync .

⇒ По одному (OneByOne)

Каждый элемент пути рисуется один за другим. Эта анимация дает лучшее впечатление от живого рисунка. Продолжительность каждой строки зависит от их длины, чтобы обеспечить постоянную скорость рисования.

SVG Анимация. Принципы работы

Чтобы получить этот эффект, скрипт использует CSS-свойство strokeDashoffset . Это свойство управляет смещением штриха в каждой строке SVG. Теперь все, что нам нужно сделать, это добавить немного JavaScript для постепенного обновления этого значения, и волшебство начинается.

Тем не менее, есть проблема с этим. Свойство strokeDashoffset доступно только для элементов пути. Это проблема, потому что в SVG есть много элементов, таких как круг circle , прямоугольни rect , линия line и полилиния polyline , которые нарушают анимацию. Поэтому, чтобы исправить это, в репозитории есть еще один класс, называемый pathformer . Это сделано для преобразования всех объектов вашего SVG в элементы пут path , чтобы иметь возможность использовать смещение штрихов strokeDashoffset и анимировать ваши SVG.

Анимация всегда рисует элементы в том же порядке, как они определены в теге SVG.

Есть несколько условий, которым должен соответствовать ваш SVG:

  • Все элементы должны иметь свойство обводки и не могут быть заполнены. Это связано с тем, что анимация выглядит только для постепенного рисования штрихов и не проверяет заполненные цвета. Например: fill: «none»; stroke: «#FFF»;
  • Вы должны избегать создания каких-либо скрытых элементов пути в вашем SVG. Vivus считает их всех подходящими для анимации, поэтому рекомендуется удалить их, прежде чем поиграть с ними. Если они не удалены, анимация может не достичь желаемого эффекта с появлением пустых областей и пробелов.
  • Текстовые text элементы не допускаются, они не могут быть преобразованы в элементы пути.

Код вдохновлен другими источниками. Пост вдохновлен прекрасными Codrops о посте SVG Drawing Animation (если вы не знаете этот веб-сайт, будьте готовы к тому, что ваш ум просто взорвется). Затем для Pathformer, есть много работы от SVGPathConverter от Waest.

Использование

Как я уже сказал, здесь нет никаких зависимостей. Все, что вам нужно сделать, это включить сценарии.

SVG animation

Обзор

SVG графика может быть анимирована с использованием анимационных тегов. Они были описаны в спецификации Animation SMIL.

Рассмотрим эти теги:

  • позволяет анимировать свойства в течение времени.
  • это удобное сокращение, которое полезно для присвоения значений анимационных нечисловых атрибутов и свойств, таких как свойства opacity.
  • который двигает вдоль траектории движения path.
  • которая модифицирует значение цвета отдельных атрибутов или свойств с течением времени.

В дополнение к элементам, определенных в SMIL, SVG включает расширения, совместимые с SMIL анимацией спецификации.

Эти расширения включают в себя атрибуты, которые расширяют функционал элемента.

Расширения SVG включают в себя:

  • — дает возможность анимировать один из SVG атрибутов в течение промежутка времени, например, в качестве атрибута преобразования нового центра фигуры или преобразование фигуры и использование поворота вокруг одной из осей (Х, Y, Z).
  • path(attr) — позволяет анимировать вдоль определенного пути.
  • — используется в сочетании с animateMotion элемента для ссылки на траекторию движения, которая должна быть использована в качестве пути для движения. Элемент mpath входит внутрь animateMotion элемента перед закрывающим тегом.
  • keypoints (attr) — задается в качестве атрибута для animateMotion, обеспечивая точный контроль скорости траектории движения анимации.
  • rotate(attr) — используется в качестве атрибута для animateMotion для того, чтобы контролировать поворот относительно оси поворота.

SVG анимации могут быть похожи на CSS анимации. Ключевые кадры создаются, объекты движутся. Но они могут сделать нечто, что CSS анимации не делает.

Применение SVG Анимации

SVG элементы можно стилизовать и анимировать и с помощью CSS. В принципе, любое преобразование или анимации перехода, которые могут быть применены к HTML элементу, также могут быть применены к SVG. Но существуют некоторые SVG свойства, которые не могут быть сделаны через CSS. Векторная версия путь, например, поставляется с набором данных path, который определяет траекторию этому пути. Эти данные могут быть изменены и анимированных через SMIL, но не CSS. Это потому, что SVG элементы описаны набором атрибутов, известных как SVG атрибуты представления.

Если вы предпочитаете использовать JavaScript, я рекомендую использовать snap.svg, который описан как «в JQuery в SVG».

Вот коллекция примеров.

Если вы предпочитаете декларативный подход анимации, вы можете применять элементы SVG анимации, о которых я расскажу.

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

Поддержка браузеров

Поддержка браузеров для SMIL анимации довольно приличная. Они воспроизводятся во всех браузерах, кроме IE. Подробный обзор поддержки браузеров вы можете посмотреть в таблице совместимости на caniuseit.

Если вам нужно обеспечить альтернативный вариант для SMIL анимации, вы можете проверить поддержки браузера на лету, используя Modernizr. Если SMIL не поддерживается, вы можете предоставить какой-то запасной вариант (анимации JavaScript, например).

Анимация атрибутов элемента из одного значения к другому в течение произвольного времени с указанием конечного состояния: from, by, to, dur и fill.

Давайте рассмотрим с перемещением круга из одного положения в новое. Это можно сделать, изменив значение его атрибута сх (который определяет х — положение его центра).

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

Чтобы изменить значение на другое в течение времени используются from, by, to, dur и fill. В дополнение к этому, вы также хотите указать, когда анимация должна начинаться с атрибутом начала.

В приведенном примере, я определил круг, а затем вызываю анимацию на этом круге. Центр окружности перемещается из исходного положения — 500 единиц, до 1750 единиц вдоль оси х.

Начальное значение установлено на кнопку мыши. Это означает, что круг будет двигаться, когда она нажата. Вы можете установить это значение к значению времени, а также. Например, начинают = «0s» начнет анимацию, как только страница загружена. Вы можете задержать анимацию, установив положительное значение времени. Например, начать = «6s» запустит анимацию через шесть секунды после нагрузки.

Атрибут Dur похож на анимации-импульса в CSS.

from — to атрибуты похожи на from to ключевых кадров в keyframe блока анимации в CSS:

Повторяющиеся анимации с Repeat-Count

Когда вы хотите воспроизвести анимацию несколько раз, вы можете сделать это с использованием атрибута RepeatCount. Можно указать, сколько раз вы хотите повторить или использовать ключевое слово, чтобы он без конца повторять. Так что, если мы должны были повторить анимацию вида круга в течение двух раз, код будет выглядеть так:

Управление значениями ключевых кадров анимации: keyTimes и values. В CSS, мы можем задать значения, которые мы хотим, чтобы взять в определенные рамки во время анимации.

0%, 40 % , 80 % и 100% являются кадрами анимации.

Анимация вдоль определенных путей:

Хорошие примеры таких анимаций можно посмотреть здесь

Так же более подробный пример есть на хабре

Функция прохода анимации

Еще один важный элемент — это функция по которой будет проходить анимация. Среди всем известных функций анимации мы знаем ease, ease-in, ease-out, linear. Но если Вы хотите создать свою функцию прохождения анимации, то вам сюда

И напоследок лучший пример, от которого просто невозможно оторвать глаз

Мастер Йода рекомендует:  Стала известна дата, когда Google покинет Китай
Добавить комментарий