Несмотря на то, что анимация SVG с помощью CSS может быть более удобной для обычного пользователя, у SVG есть другой способ создания анимации, встроенный прямо в сам синтаксис SVG. Это именно то, о чем мы вкратце рассказываем в этом видео, но если вам нужно полное справочное руководство, обязательно ознакомьтесь с Руководством по SVG-анимации (SMIL) Сары Суайдан прямо здесь, на CSS-Tricks.
SMIL расшифровывается как Synchronized Multimedia Integration Language. Насколько я понимаю, это отдельная «вещь», встроенная в SVG. Но в SVG есть свои собственные дополнения, подобные SMIL. Я просто буду называть все это SMIL, хотя я уверен, что иногда я технически некорректен.
Для очень простых анимаций не имеет большого значения, делаете ли вы это в SMIL или CSS, они будут делать то же самое примерно на том же уровне сложности. Некоторые вещи могут быть даже проще в CSS. Но вот некоторые вещи, в которых можно использовать SMIL:
- Вам нужно анимировать то, чего CSS не может коснуться. Как форма многоугольника или пути.
- Вы хотите использовать события влияют на анимацию, подобно
clickилиmouseoverили что - то. - Вы хотите сделать аддитивную анимацию, например, анимировать от того места, где вы сейчас находитесь, еще на x пикселей.
- Вы хотите иметь анимацию, которая напрямую связана с другими анимациями, например, когда эта анимация завершается, запускайте следующую анимацию (без ручного управления длительностью).
- Я уверен, что есть еще кое-что.
Поначалу синтаксис кажется пугающим, но, обещаю, это действительно довольно просто. Вот простой пример:
См. Pen jAipI Криса Койера (@chriscoyier) на CodePen.
«Трансформация формы» действительно уникальна для SMIL, так что вот лучший пример, чем странный, который мы сделали в видео:
См. Кнопку изменения формы пера Криса Койера (@chriscoyier) на CodePen.
В этой демонстрации события обрабатываются JavaScript вместо SMIL. Просто приятно знать, что ты тоже можешь это сделать. Триггеры событий SMIL - это круто, но тогда то, что нужно щелкнуть, должно быть в этом SVG, а не где-либо еще в DOM.