О Flash-графике
Формат файла Flash (SWF) основан на векторной графике и предназначен для масштабируемой, компактной графики для Интернета. Так как этот формат файла основан на векторной графике, объект сохраняет качество изображения при любом разрешении и идеален для создания кадров анимации. В Illustrator можно создать отдельные кадры анимации на слоях и затем экспортировать слои изображения в отдельные кадры для использования на веб-сайте. Можно также определить символы в файле Illustrator для снижения размера анимации. При экспорте каждый символ определяется в файле SWF только один раз.
Сохранить объект как файл SWF можно с помощью команды «Экспорт» или Сохранить для Web и устройств . Вот преимущества каждого из этих способов:
Команда «Экспорт» (SWF)
Обеспечивает наибольший контроль над анимацией и битовым сжатием.
Команда «Сохранить для Web и устройств»
Обеспечивает больше контроля над смесью форматов SWF и битового во фрагментированном макете. Эта команда предлагает меньше параметров изображения, чем команда «Экспорт» (SWF), и применяет последние использованные параметры команды «Экспорт».
При подготовке объекта к сохранению в формате SWF помните следующие рекомендации.
Чтобы файл был как можно меньше при использовании символов, применяйте эффекты к символу на палитре «Символы», а не к экземплярам символа в объекте.
Использование инструментов «Обесцвечивание символов» и «Стили символов» увеличит размер файлов SWF, так как Illustrator должен создать копию каждого экземпляра символа для сохранения оформления.
Сетчатые объекты и градиенты, у которых больше восьми точек узла градиента, растрируются и отображаются как фигуры, залитые растровым изображением. Градиенты с менее чем восемью точками узла градиента экспортируются как градиенты.
Узоры растрируются в маленькие изображения размером с узор и выкладываются мозаикой для заполнения объекта.
Если растровый объект выходит за границы фрагмента, весь объект включается в экспортируемый файл.
Формат SWF поддерживает только скругленные концы и стыки. При экспорте в формат SWF скошенные или квадратные концы и стыки скругляются.
Залитый узором текст и обводки преобразуются в контуры и заливаются узором.
Хотя при экспорте в формат SWF текст сохраняет многие свои особенности, некоторая информация теряется. Если файл SWF импортируется в Flash, интерлиньяж, кернинг и трекинг не сохраняются. Вместо этого текст разбивается на отдельные записи для имитации вида интерлиньяжа. Если затем файл SWF проигрывается в Flash Player, оформление интерлиньяжа, кернинга и трекинга в файле сохраняется. Если нужно экспортировать текст как контуры, установите флажок «Экспортировать текст в кривых» в диалоговом окне «Параметры SWF» или преобразуйте текст в кривые перед экспортом в формат SWF, выбрав команду «Преобразовать в кривые».
Создание Flash-анимации
В Illustrator существует много способов создания Flash-анимации. Один из самых простых — это расположить каждый кадр анимации на отдельном слое Illustrator и при экспорте объекта выбрать параметр Слои AI в кадры SWF .
Для этого можно вставить основной объект в новый слой, а затем отредактировать объект. Можно также использовать команду «Распределить по слоям» для автоматического формирования слоев из накапливающихся объектов.
Выберите «Файл» > «Экспорт», формат «Flash (SWF)» и нажмите «Экспорт». В диалоговом окне «Параметры SWF» выберите в списке «Экспортировать как» значение Слои AI в кадры SWF . Задайте дополнительные параметры анимации и нажмите кнопку «ОК».
Выберите «Файл» > Сохранить для Web и устройств . Выберите «SWF» из меню Оптимизированный формат файла . В меню «Тип экспорта» выберите команду Слои AI в кадры SWF . Задайте дополнительные параметры и нажмите кнопку «Сохранить».
Работа с Illustrator и Flash
Графический объект, созданный в приложении Illustrator, можно переместить в среду редактирования Flash или напрямую открыть в приложении Flash Player. Графические объекты можно копировать и вставлять, сохранять в формате SWF или экспортировать напрямую в приложение Flash. Кроме того, Illustrator обеспечивает поддержку динамического текста Flash и символов роликов.
С помощью приложения Device Central можно увидеть, как будет выглядеть графический объект Illustrator в приложении Flash Player на различных карманных устройствах.
Вставка графического объекта Illustrator
Созданный в приложении Illustrator графический объект можно быстро, просто и без затруднений скопировать и вставить в приложение Flash.
При вставке графического объекта Illustrator в приложение Flash сохраняются следующие атрибуты.
Контуры и фигуры
Текст (включая шрифты OpenType)
Кроме того, Illustrator и Flash поддерживают следующие возможности при вставке графического объекта.
При выделении в графическом объекте Illustrator слоев верхнего уровня целиком и вставке их в приложение Flash сохраняются слои и их свойства (видимость и блокировка).
Цветовые форматы Illustrator, отличные от RGB (CMYK, градации серого и пользовательские форматы), преобразуются приложением Flash в формат RGB. Цвета RGB вставляются обычным образом.
При импорте или вставке графического объекта Illustrator можно с помощью различных параметров сохранить определенные эффекты (например, тень, отбрасываемую текстом) в виде фильтров Flash.
Flash сохраняет маски Illustrator.
Экспорт файлов SWF из приложения Illustrator
Файлы SWF, экспортируемые из приложения Illustrator, соответствуют по качеству и степени сжатия файлам SWF, экспортируемым из приложения Flash.
При экспорте можно выбрать один из многочисленных заранее заданных стилей, обеспечивающих оптимальный вывод, и указать способ использования нескольких монтажных областей, способ преобразования символов, слоев, текста и масок. Например, можно указать экспорт символов Illustrator в виде роликов или графических изображений, а также создание символов SWF из слоев Illustrator.
Импорт файлов Illustrator в приложение Flash
Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Flash за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Flash с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».
Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Flash и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области импортируются в программу Flash как единый слой. При импорте другой монтажной области из того же файла AI объекты из этой монтажной области импортируются в программу Flash как новый слой.
При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Flash сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.
Преобразовать слои Illustrator в слои Flash.
Преобразовать слои Illustrator в кадры Flash.
Преобразовать все слои Illustrator в один слой Flash.
Работа с символами
Работа с символами в приложении Illustrator похожа на работу с символами в приложении Flash.
При создании символа в приложении Illustrator в диалоговом окне «Свойства символа» можно задать его имя и специфичные для приложения Flash параметры: тип символа ролика (это значение по умолчанию для символов Flash), местоположение в сетке регистрации Flash и направляющие 9-фрагментного масштабирования. Кроме того, многие комбинации клавиш, применяемые в приложениях Illustrator и Flash, совпадают (например, клавиша F8 используется для создания символа).
Редактирование символов в режиме изоляции
Дважды нажмите символ в приложении Illustrator, чтобы открыть его в режиме изоляции, упрощающем редактирование. В режиме изоляции допускается редактирование только данного экземпляра символа, все остальные объекты в монтажной области затенены и недоступны. После выхода из режима изоляции соответствующим образом обновляется символ на палитре «Символы» и все его экземпляры. Режим редактирования символов и панель «Библиотека» в приложении Flash работают аналогично.
Свойства и связи символа
С помощью палитры «Символы» или панели «Управление» можно легко назначать имена экземплярам символов, разрывать связи между экземплярами и символами, замещать экземпляр символа другим символом или создавать копию символа. Функции редактирования панели «Библиотека» в приложении Flash работают аналогично.
Статические и динамические текстовые объекты и объекты для ввода текста
При переносе статического текста из приложения Illustrator в приложение Flash он преобразуется в контуры. Кроме того, можно настроить текст в приложении Illustrator как динамический текст. Динамический текст позволяет редактировать содержимое текста в приложении Flash программным образом и легко управлять проектами, требующими локализации на разные языки.
В приложении Illustrator отдельные текстовые объекты могут быть статическими, динамическими или объектами для ввода текста. Динамические текстовые объекты в приложениях Illustrator и Flash имеют схожие свойства. Например, в обоих приложениях можно использовать кернинг, оказывающий влияние на все символы текстового блока, а не на отдельные символы; оба приложения одинаково производят сглаживание текста и поддерживают связь с внешним файлом XML, содержащим текст.
Как сделать анимацию прелоадера в Adobe Illustrator
от 
Главред Евгений 01.11.2020, 15:48 1.6k Views
Всем привет! В этот раз я подготовил для вас довольно простой урок, с помощью которого вы сможете сделать в Adobe Illustrator анимацию прелоадера. Этот урок будет полезен начинающим иллюстраторам, которых так или иначе интересует тема создания анимации. Сначала я покажу как нарисовать классические песочные часы в стиле пиксель арт для нашего прелоадера, а затем научу вас делать анимацию в Adobe Illustrator.
Начнём с создания часов. Как видно из скриншота, сделать это очень просто. Песочные часы собираются из прямоугольников как из конструктора.
Затем слепляем все чёрные прямоугольники в один объект с помощью функции Unite(Add) в панели PathFinder. Либо второй вариант – просто сгруппируйте все объекты.
Берём инструмент Text Tool и пишем надпись. Шрифт можно поменять, сделав правый клик и выбрав в контекстном меню пункт Font.
Теперь нужно просто расставить объекты в нужные места. Все они находятся в первом и пока единственном слое. В дальнейшем нам нужно будет довольно тесно поработать со слоями.
Копируем объекты из первого слоя Ctrl+C. Создаём второй слой. Выключаем видимость первого слоя, нажав на иконку глазика. Вклеиваем объекты во второй слой точно на ту позицию, откуда их скопировали Ctrl+F.
Далее поворачиваем часы во втором слое на 45 градусов.
Затем опять копируем объекты из второго слоя Ctrl+C. Создаём третий слой. Выключаем видимость второго, чтобы ничего нам не мешало. Вклеиваем объекты в третий слой Ctrl+F. И поворачиваем часы ещё на 45 градусов.
Соответственно дальше нужно сделать четвертый слой, скопировать всё туда и повернуть часы ещё на 45 градусов.
И наконец, точно так же копируем объекты и ставим их в пятый слой. Только часы нужно будет вернуть в первоначальную позицию.
А сейчас будем работать уже только в панели слоёв. Выделите пятый слой, зайдите в меню панели и сделайте его копию.
Затем создайте ещё несколько копий этого слоя. Это нужно, чтобы сделать задержку между поворотами часов.
Напоследок не забудьте включить все слои, это важно для экспорта анимации.
Сохраняем анимацию прелоадера. Для этого идём File > Export и выбираем формат Flash (SWF). В настройках экспорта устанавливаем Export As: AI Layers to SWF Frames, чтобы преобразовать слои в кадры анимации. Галочка Clip to Artboard Size нужна, чтобы иллюстратор учитывал размеры рабочей области. Далее нажмите кнопку Advanced.
В открывшемся окне нужно установить частоту кадров Frame Rate. У меня стоит 12 кадров в секунду. Галочка Looping отвечает за цикличность анимации. И опция Layer Order: Bottom Up воспроизводит слои иллюстратора снизу вверх.
Анимация готова. И теперь прелоадер будет весело крутить часики по кругу.
На этом у меня все. До скорого!
Подписывайтесь на канал Иллюстратор, чтоб не пропускать новые интересные уроки.
Все об SVG анимации
В данной статье я хочу осветить тонкости работы с SVG-графикой, SVG анимацию (в том числе и path), проблемы и способы их решения, а также разнообразные подводные камни, коих в SVG огромное множество. Эту статью я позиционирую как подробное руководство.
Здесь не будет никаких плагинов, библиотек и прочего, речь пойдет только о чистом SVG.
Единственный инструмент, который я буду использовать, это Adobe Illustrator.
Предисловие
Все началось со скучной лекции и в надежде занять себя хоть чем-то, я решил изучить SVG графику, а именно анимацию. К моему удивлению, в интернете было совсем мало информации. Везде дублировалась информация, объясняющая основы, а про анимацию вообще от силы 2-3 ссылки с абсолютно идентичной информацией, являющейся переводом статьи A Guide to SVG Animations (SMIL) за авторством Сары Суэйдан.
Ее статья рассказывает о всём, но поверхностно. Тем не менее настоятельно рекомендую с ней ознакомиться. *Ссылка на перевод*
Следующие несколько недель я провел, собирая информацию по кусочкам из разных источников. Результатом этих поисков является эта статья
Правильный экспорт SVG из Illustrator
Этот раздел посвящен особенностям и проблемам Adobe Illustrator, так что, если ты используешь не Illustrator, то можешь пропустить эту часть.
Подготовить документ для анимации очень важный этап, пренебрежительное отношение к которому может обернуться очень неприятными последствиями. Учить тебя, как лучше рисовать в Illustrator, я не стану. Единственное, что я скажу – при отрисовке фигур следует следить за значениями, желательно, чтобы они имели лишь одно число после запятой, а лучше вообще были целыми. Следовать этому правилу не обязательно, но оно уменьшит размер файла, упростит дальнейшую анимацию и визуально сократит объем информации. Взгляни
В примере одна и та же кривая, но в первом случае одна цифра после запятой, а во втором три. Эта кривая имеет всего 4 точки, а второй пример на треть длиннее первого. Представь, как много места займет кривая из 20 точек.
После того как каркас нарисован, нужно сохранить изображение как SVG файл. Для этого есть два пути – «Сохранить как» или «Экспортировать как». Но какой способ выбрать? Если доверяешь мне – лучше используй «сохранить как». Если хочешь знать «почему», то разворачивай спойлер.
На первый взгляд разницы никакой, ведь в итоге мы получим файл.svg с нашим изображением. Однако отличия начинаются еще на этапе параметров экспорта
Детально объяснять все параметры я не вижу смысла, с этим прекрасно справляется сам Illustrator в секции «Описание».
Как видно, «сохранить» имеет больше настроек, нежели «экспортировать», и для кого-то это уже будет весомой причиной отказаться от экспортирования, но мы продолжим.
Если открыть файлы, сохраненные обоими способами, в браузере, разницы мы не заметим. Однако в данный момент нас больше интересует не внешний вид, а начинка, поэтому сделаем то же самое, но уже через текстовый редактор. Тут отличия станут более очевидны. Предлагаю тебе самому посмотреть и сделать выводы, я ничего в файлах не изменял, просто скопировал целиком как есть.
Экспортировать
Помимо отличий в именовании CSS классов и оформления в целом, которые кто-то может посчитать вкусовщиной, есть и другие проблемы. При «экспортировании» все изображение уменьшилось в 2 раза. Судить об этом можно по размерам фигур и атрибуту viewBox. Так как это векторная графика, хуже от этого не стало, но все равно неприятно. «Сохранение» же оставило размеры, которые я указал в Illustrator.
Но все это цветочки по сравнению с тем, какую свинью может подложить «экспортирование». Конкретно в данных примерах этой проблемы нет, вероятно, потому что изображение очень простое. Однако я столкнулся с ней, когда экспортировал другую мою работу. Вот ее скриншот
Объем файла достаточно большой, так что я приведу только проблемную часть
Заметил что-нибудь необычное? Если ты косо смотришь на атрибут transform, то ты прав. Именно он портит всю малину. При «экспортировании» изображения Illustrator приписывает его ко ВСЕМ элементам <path>. При этом такой проблемы не наблюдается при «сохранении».
Если ты до сих пор не понимаешь моего негодования, то я объясню: если захочешь анимировать перемещение такого элемента, то он будет смещаться в сторону. В данном случае на 5.5 по обеим осям. Связанно это с тем, что анимация перемещения изменяет атрибут transform, сбрасывая все прошлые значения. Конечно, это можно обойти, но разве не лучше избежать проблемы, чем потом исправлять ее последствия…
На данный момент мне довелось заметить только эту проблему, но это не значит, что она единственная. Если здраво оценить ситуацию, окажется, что «сохранить как» выигрывает во всем. Именно поэтому я советую использовать именно его.
Способы импорта SVG документа в HTML
Перед тем, как я приступлю непосредственно к анимации, я хочу рассказать про то, как встроить SVG на страничку. Каждый способ имеет свои «особенности», которые оказывают прямое влияние на анимацию. И если про них не рассказать, то статья будет неполной.
Предположим, что у тебя уже есть готовый SVG с интерактивной анимацией и осталось встроить этот документ на сайт. Как же это сделать?
Вариант номер раз – вспомнить, что SVG это тоже изображение и его можно импортировать стандартными средствами HTML. Можно создать тег <img> со ссылкой на документ
Или задать SVG в качестве фонового изображения
Главный минус этого способа – изолированность изображения. SVG как экспонат в музее – смотреть можно, трогать руками нет. Анимация внутри будет работать, но ни о никакой интерактивности речи быть не может. Если же, например, анимация запускается по клику пользователя или есть необходимость динамически менять содержимое SVG документа, то этот способ не для тебя.
Вариант номер два – создать объект из SVG, использовав теги <object> или <embed>. Также есть возможность использовать <iframe>, чтобы создать фрейм, но этот способ я использовать не рекомендуют, т.к. требуется костыль для всех браузеров, чтобы этот вариант отображался корректно
Тут уже дела обстоят получше. Анимации получают возможность быть интерактивными, но только если объявлены внутри SVG документа, а содержимое доступно для внешнего JavaScript. Еще <object> и <iframe> могут показать заглушку, если вдруг изображение не загрузится.
Вариант номер три – просто вставить содержимое SVG документа прямо внутрь HTML. Да так можно. Поддержка SVG появилась в стандарте HTML5. Так как SVG по сути является частью самой странички, то доступ к нему есть везде. Анимации и стили элементов могут быть объявлены как внутри SVG, так и во внешних файлах. Минус заключается в том, что такие изображения просто так не кэшируются отдельно от страницы
SVG анимация
Есть два основных способа анимации SVG элемента:
- CSS анимация
- SMIL анимация, встроенная в SVG (на самом деле это SVG анимация, которая базируется на SMIL и расширяет его функционал)
SMIL — когда нужно:
- Сделать то, что не смог CSS (анимировать неподдерживаемый атрибут и т.д.)
- Иметь более точный контроль над анимацией
- Сделать морфинг контура (анимация атрибута d у тега path)
- Синхронизировать анимации
- Сделать интерактивные анимации
Анимация средствами CSS
Тут ничего нового. Любой SVG элемент мы можем анимировать так же, как мы это делаем с HTML. Все анимации создаются с помощью @keyframes. Так как CSS-анимация это уже другая тема, я подробно останавливаться на этом пункте не буду, в сети полно документации и руководств на эту тему. Все, что там описывается применимо и к SVG, а я лишь приведу несколько примеров.
SVG документ имеет внутренние таблицы стилей, вот в них мы и будем писать анимацию
Анимировать SVG атрибут так же просто, как и CSS атрибуты
Можно задавать значения как в процентах, так и конструкцией from-to
Затем остается просто применить созданные анимации к нужному элементу
Все, что я описывал выше – это статичные анимации, интерактивностью там и не пахнет. А что делать, если уже очень хочется? Ну кое-что все-таки можно сделать интерактивным и на CSS. Например, если использовать transition в сочетании с псевдоклассом hover
При наведении на элемент он изменит свой цвет с синего на голубой за 300ms
Анимация атрибутов и небольшой кусочек интерактивности – на этом особенности CSS-анимации заканчиваются. Но этого функционала предостаточно, ведь большинство задач сводятся к анимации какого-либо атрибута. Практически любой SVG атрибут можно анимировать. И когда я пишу «практически любой» я имею в виду, что если ты выберешь случайный атрибут и он окажется неанимируемым, то тебе ОЧЕНЬ повезло.
SMIL анимация
Сразу стоит сказать, что SMIL анимация стара как мир и она потихоньку вымирает, поддержка браузеров пусть и приличная, но все же меньше, чем у CSS Animation, однако есть причина, почему SMIL все еще привлекателен – он может то, что не может CSS.
Про SMIL я буду рассказывать подробнее, потому что тут есть множество подводных камней, про которые редко где пишут. Да и тема эта менее популярная, чем CSS. Основные теги для анимации это <animate>, <set>, <animateTransform>, <animateMotion>.
<animate>
Начнем с тяжёлой артиллерии. <animate> – используется для анимации любого атрибута и является основным инструментом. Остальные же теги узкоспециализированные, но о всем по порядку.
Как применить анимацию к элементу?
Указать элемент, к которому будет применена анимация, можно двумя способами
-
Положить тег внутрь элемента. Этот способ позволяет инкапсулировать анимацию внутри объекта, что облегчает чтение кода
Но и тут не все так гладко — href не поддерживается Safari. Получается патовая ситуация, один атрибут устарел, другой частично не поддерживается. Так что какой способ использовать решает каждый для себя сам.
Для тех, кто заметил сходство с CSS селекторами: спешу огорчить, обратиться к элементам по классу не получится
Это не работает!
Как указать атрибут для анимации?
Для этого существует attributeName. В качестве значения выступает имя атрибута, которое мы будем анимировать.
Указав в attributeName значение r, мы сообщаем, что собираемся анимировать радиус окружности
Что такое attributeType и почему он тебе не нужен?
Потому что он бесполезный
В теории может возникнуть такой момент, когда имена атрибутов в CSS и XML будут совпадать, что может привести к проблемам. И чтобы разрешить этот конфликт, нужно явно указать пространство имен. Есть два стула способа: указать префикс или использовать attributeType. Начнем с префикса.
Везде пишут примерно следующее:
Этот способ упоминается вскользь и без примеров. Вот и я не буду изменять традициям. (советую тебе тут остановиться, забыть про префиксы как про страшный сон и переходить к attributeType, я тебя предупредил)
Содержание этого спойлера несет скорее развлекательно-ознакомительный характер. Никакой полезной информации, кроме того факта, что префиксы не работают, тут ты не узнаешь
Для начала нужно найти более точное определение, а, как известно, самые точные определения в спецификациях и в стандартах.
- Открываем спецификацию по SVG анимации за 14 марта 2019
- В разделе про attributeName видим, что он наследует стандарт SMIL Animation за (о ужас) 2001 год
- Читаем определение attributeName
- Profit!
Хмм, легче не стало. Что придет в голову человеку, который не знает XML, после прочтения такого определения? Правильно. То же самое что и мне.
Я понял его буквально и подумал, что это должно выглядеть так
Подумал и благополучно забыл про этот способ до написания этой статьи. Проблемы начались, когда я решил проверить его на практике. Думаю, я никого не удивлю, если скажу, что это не работает. Спустя несколько часов безуспешных поисков я загуглил «xmlns prefix» и к моему удивлению увидел, что xmlns это не сам префикс, а (сконцентрируйся, сейчас будет сложно) конструкция определения пространства имен с префиксами.
Выглядит она следующем образом:
Тут я понял, что ничего не понял…в самом начале…и сейчас в принципе тоже
Спустя еще пару часов я наконец нашел, что искал, в Namespaces in XML. Вот оригинальный пример:
Но знаешь, что самое смешное? Это все равно не работает. Хотя сделано все по книжке
Ошибок нет и не должно быть, потому что все сделано по правилам, но проблема в том, что мы получим круг без радиуса. Такой же результат будет, если просто не писать атрибут r.
Эпилог: SVG игнорирует атрибуты с префиксом. В итоге даже если SMIL действительно анимирует атрибут с префиксом, результата этой анимации ты не увидишь.
В свое оправдание скажу, что разбирался только с SVG, а именно с его анимацией, поэтому гуру XML порошу отложить факелы и вилы в сторону. Если знаете, как заставить этот способ работать, милости прошу в комментарии
Чтобы явно указать, к чему принадлежит анимируемый атрибут, используется attributeType. Он принимает 3 значения: CSS, XML, auto. Если явно не указывать attributeType, то будет использоваться auto. В этом случае сначала проверяются CSS свойства и если нет совпадений, то проверяются атрибуты целевого элемента. В примере укажем, что собираемся анимировать именно CSS свойство
Отлично, attributeType позволяет легко и без костылей указать, к чему относится анимируемый атрибут, тем самым решая «проблему», которой даже не существует.
Неожиданно, правда? Как я сказал в начале главы – SMIL вымирает и связано это с тем, что анимацию переводят на рельсы CSS. Большинство дублирующихся атрибутов абсолютно идентичны друг другу, т.е. неважно, принадлежит атрибут CSS или SMIL — результат будет один и тот же. А в сочетании со значением auto по умолчанию необходимость в явном определении attributeType отпадает.
Минутка интересных фактов: атрибут attributeType не поддерживается SVG. Откуда тогда он взялся? Он пришел к нам из SMIL Animation, на котором базируется SVG анимация. А еще attributeType удален после SVG 1.1 Second Edition. Все пруфы тут
Как определить значения анимации?
Указать атрибут для анимации недостаточно, необходимо определить его значения. Тут на сцену выходят from, to, by, values.
Начнем с парочки, которая всегда вместе: from и to. Смысл их существования очевиден, from указывает на начало, to на конец
Результатом выполнения анимации будет плавное изменение радиуса окружности с 10 до 45
Пусть я и сказал, что они всегда вместе, to так же может использоваться и без явного объявления from. В таком случае from примет значение, определенное в целевом элементе. Для примера выше анимация будет начинаться с 25.
Если есть необходимость указать набор из нескольких значений, используется values. Значения перечисляются через точку с запятой
Значение радиуса уменьшится до 15, после увеличится до 50 и затем вернется в начальное положение
Последний на очереди by. Ему не важно «откуда» и «куда», все, что его интересует, это «на сколько». Иначе говоря, вместо абсолютных значений он работает с относительными
Как итог анимации – радиус увеличится на 15, то есть получится 25+15=40
По просторам руководств ходит легенда, что «by может использоваться для указания величины, на которую анимация должна продвинутся». Я понимаю это так: если from=20, to=50, и задан by=10, то этот путь должен преодолеваться «прыжками» по 10, т.е. 20, 30, 40, 50. Но как бы я не пытался, что с by, что без него, анимация ни капли не изменялась. Также я не нашел подтверждения в спецификации. Похоже, это просто ошибка.
Наибольшим приоритетом обладает values, затем идет from—to, последний by. Наименьший приоритет by объясняет, почему «легенда» не может работать в принципе. Однако by работает в связке с from, в этом варианте from просто переопределяет текущее положение элемента
Тут анимация вместо 50 начнется с 70 и закончится на 100
Еще про относительные анимации
Можно заставить остальные атрибуты работать так же, как и by. Делается это с помощью атрибута additive, который имеет два положения – replace и sum. Первый стоит по умолчанию, поэтому нас интересует второй. При значении sum все атрибуты будут прибавляться к текущему значению целевого элемента, т.е. при анимации радиуса, равного 20, со значениями form=5 и to=15, анимация будет с 20+5 до 20+15
При выполнении анимации произойдет резкий скачок в положение 25, что не есть хорошо (если, конечно, так не задумано). Этого можно избежать при form=0, но тогда теряется смысл использования sum, потому что тот же эффект можно получить и без additive используя by
Как по мне, второй способ гораздо понятнее и удобнее
Где указывать длительность анимации?
Остался последний обязательный атрибут, чтобы сделать рабочую анимацию – и это dur. Значение атрибута определяет длительность анимации, которое можно указывать как в секундах, так и в миллисекундах
По последней строчке можно догадаться, что есть еще кое-что…
Также можно указывать значения в минутах и даже часах
Хрен его знает, на кой ляд тебе сдалось указывать значения в часах, но я в чужие дела не лезу, хочешь, значит есть зачем.
Для других атрибутов временные значения задаются в таких же формах
Что сделать, чтобы анимация не возвращалась в начало?
Атрибут fill (не путайте этот атрибут с его тезкой) отвечает за поведение элемента после окончания анимации. Предусмотрено две опции:
- remove (значение по умолчанию) – как только анимация достигает своего конца, все преобразования сбрасываются и элемент принимает состояние как до анимации
- freeze – элемент застывает в конечном положении анимации
Ответ – да. Для этого в атрибуте repeatCount указывается значение indefinite. Атрибут определяет число повторений анимации и по умолчанию имеет 1, но можно указать любое число
Первая будет повторяться бесконечно, вторая отработает 3 раза
Теперь меня бесят бесконечные анимации, можно их выключить через время?
Для таких раздражительных людей сделали repeatDur. Этот атрибут останавливает воспроизведение анимации через определенное время с начала воспроизведения анимации! Проще говоря, repeatDur ограничивает время длительности анимации. Главное отличие от repeatCount в том, что анимация может быть остановлена в середине
Анимация прервется в середине второй итерации
А что если я хочу, чтобы анимация начиналась не сразу?
Тогда для тебя, мой друг, предусмотрен атрибут begin. Отвечает он за то, когда начнется анимация. Этот атрибут очень полезен, потому что также используется для синхронизации нескольких анимаций, но об этом чуть позже.
Если нужно указать обычную задержку запуска, то пишем, через какой промежуток времени должна начаться анимация после открытия документа
Воспроизведение начнётся через 1,5 секунды
Также можно указать отрицательное значение. Тогда анимация начнется не с начала, а в том месте, где она была бы через указанный промежуток времени
Анимация начнется с открытием документа, но будет воспроизводиться с середины
Делаем анимации интерактивными
В качестве значения begin можно указать событие, при котором начнется анимация, но без приставки «on». Например, если хочется сделать анимацию по клику, то вместо «onclick» пишем click
В примере выше анимация начнется при клике на элемент, к которому применена анимация. Если необходимо запустить анимацию по событию с другого элемента, то нужно указать его id
Еще можно указать несколько условий начала анимации. Для этого нужно перечислять их через точку с запятой
Анимация начнется при загрузке документа и по клику
Поддерживаются далеко не все события, но работают большинство событий, связанных с мышью. Я не стану перечислять их все, доступные события можно найти где-то тут. Также никто не отменял метод научного тыка.
Анимация перезапускается, не достигнув конца, как это починить?
Я приведу простой пример. Здесь анимация начинается по клику. Если пользователь так и не нажмет, то предусмотрен автоматический запуск через 3 секунды
Но появляется проблема: если пользователь нажмет до автоматического таймера, то, когда пройдет 3 секунды, анимация перезапустится, так и не дойдя до конца. На помощь придет атрибут restart в значении whenNotActive. Всего у него их три
- always стоит по умолчанию – разрешает перезапускать анимацию в любой момент времени
- whenNotActive – анимация может быть запущена, если она уже не воспроизводится
- never – запрещает перезапуск анимации
Синхронизация анимаций
Помимо стандартных событий, по типу клика, есть события начала, конца, повторения анимации. Для того, чтобы привязать событие, необходимо указать id анимации и через точку begin, end, repeat соответственно
Если с первыми двумя все понятно, то с repeat все не так очевидно. В скобках пишется номер повторения, после которого нужно запустить анимацию (это число не может быть последим повторением)
Анимация запустится после двух повторений, а не каждые 2 повторения
Еще можно указывать задержку относительно события. Например, если я хочу проиграть анимацию через 2 секунды после начала другой
Или запустить анимацию за секунду до окончания другой
На что еще способен begin.
хотел я назвать этот раздел, но правильнее его назвать «Что он должен уметь, но не умеет?». По уже моей любимой спецификации у begin должно быть еще два значения, которые он должен принимать. Первый это accessKey, который запускает анимацию по нажатию клавиши, указанной в формате Unicode. Второй — wallclock, определяющий начало анимации по реальному времени. И там можно указать не только часы, но даже месяц и год, в общем полный набор.
К сожалению, ни один из них не захотел работать. Хотя не велика потеря, ведь необходимость в них все равно сомнительная
Не знаю, в чем проблема, может, их не поддерживает мой браузер, а может что-то еще…
Могу ли я прервать анимацию?
Это можно сделать атрибутом end. По своему использованию он идентичен begin, также можно указывать время, события, и т.д. Как можно заметить, это уже не первый (и не последний) способ прерывать анимацию, ведь есть repeatDur, где тоже можно фиксировать длительность анимации. И пусть в end тоже можно указывать время напрямую, его отличительными особенностями являются привязка к событиям и возможность указать список значений.
Предположим, что у нас есть элемент, у которого есть состояние покоя и активности. Второе активируется при клике. И мы хотим прервать анимацию покоя с началом активности. Реализовать подобную задумку можно так
Анимация покоя запущена по умолчанию. При клике на элемент запустится анимация активности и прервет анимацию покоя
Комбинирование атрибутов end и begin
Как уже известно, и begin, и end могут принимать список значений, но все еще не понятно, как будет вести себя анимация, если указать список в обоих атрибутах. А получатся, своего рода, повторения с настраиваемой длительностью и интервалами между ними… не понятно? Сейчас все объясню.
Первое, что нужно знать – количество значений в списках должно совпадать. Каждая пара значений begin—end определяет одно «повторение». А время между концом одного «повторения» и началом следующего определяет задержку. Я неспроста называю их «повторениями», анимация не приостанавливается и продолжается, а прерывается и начинается с начала. Выходит, мы можем отдельно регулировать длительность каждого повторения и устанавливать разные задержки после каждого повторения
В примере анимация имеет 3 «повторения». Первый начнется через секунду после загрузки документа и продлится лишь одну секунду из трех. Затем задержка в 3 секунды, и после нее полная анимация в 3 секунды. Опять задержка, но уже в 1 секунду. Последнее повторение прервется после двух секунд анимации
А можно еще как-нибудь прервать анимацию?
Еще парочка бесполезных атрибутов в копилку
Конееееечно, есть еще целых два атрибута – min и max. Как понятно из названия, min определяет минимальную, а max максимальную длительность. Сначала длительность анимации рассчитывается по значениям dur, repeatCount, repeatDur, end. А после полученная длительность подгоняется под рамки, задаваемые min и max. На бумаге все красиво, посмотрим, как это работает на практике.
Прервется на 4 секунде
-
Потому что сама анимация закончилась, т.е. dur * repeatCount < min
-
У repeatDurнаивысший приоритет, поэтому если он задан, и он меньше чем min, то min игнорируется
Как управлять ключевыми кадрам и где указывать функцию времени?
Для этого нужно знать атрибуты keyTimes, keySplines, calcMode. Указав в values список, мы объявляем ключевые кадры, но они распределены равномерно. Благодаря атрибуту keyTimes мы можем ускорять или замедлять переход из одного состояния в другое. В нем, так же в виде списка, указываются значения для каждого кадра. Значения представляют положение ключевого кадра на временной оси в процентном соотношении, относительно длительности всей анимации (0 – 0%; 0,5 – 50%; 1 – 100%).
Есть несколько правил: каждое значение представляет число с плавающей точкой от 0 до 1, кол-во значений в списках должно совпадать, первое значение обязательно 0, а последнее 1, каждое следующее значение должно быть больше предыдущего. Думаю, ты понимаешь, что нет смысла использовать keyTimes без values. А теперь пример
По умолчанию все преобразования происходят линейно, чтобы это изменить, нужно указать другой режим в calcMode. И вариантов тут не много:
- linear – стандартное значение, в объяснении не нуждается
- paced – временные промежутки рассчитываются так, чтобы скорость между ключевыми кадрами была постоянной
- discrete – анимация переключается между ключевыми кадрами скачками, без интерполяции
- spline – можно сказать, что это ручной режим управления (о нем попозже)
Самый трудный для понимания — это paced, так что его объясню поподробней. Для начала посмотри, как работает анимация в стандартном режиме. Длительность анимации составляет 2 секунды и у нас есть 3 ключевых кадра – начальный, промежуточный, конечный
Если понаблюдать за анимацией, то станет очевидно, что перемещение между ключевыми кадрами происходит за равные промежутки времени. Расстояние между первым и вторым составляет 100, а между вторым и третьим – 50, т.е. половину от первого пути. Путем не хитрых вычислений становится ясно, что элемент будет проходить второй отрезок в два раза медленнее, чем первый.Теперь добавим calcMode=»paced» и посмотрим, что изменилось.
А изменилась скорость движения элемента. Теперь она рассчитана таким образом, чтобы пройти всю дистанцию с одинаковой скоростью, другими словами – оба отрезка элемент будет двигаться равномерно.
Теперь посмотрим на режим spline и атрибут keySplines. Они имеют некоторое сходство …хмм…
Если spline определяет ручной режим, то атрибут keySplines определяет значения для этого режима. Очевидно, что одно без другого не работает. Значения в keySplines задаются списком, где указываются координаты двух точек для кубической Безье.
Это функция, которая определяет интенсивность движения. Она состоит из 4 чисел с плавающей точкой от 0 до 1 и в общем виде выглядит так: cubic-bezier(x1, y1, x2, y2). Пары чисел являются координатами и образуют две точки, которые определяют кривую. 
Еще подробнее о cubic-bezier можешь прочитать в сети. Для построения кубической Безье я советую пользоваться онлайн сервисами, также там можно взглянуть на примеры и поиграть со значениями.
Количество значений в keySplines должно быть на 1 меньше чем values. Связано это с тем, что мы указываем значения не для ключевых кадров, а для промежутков меду ними.
Координаты точек функции Безье разделяются пробелами или запятыми, а значения списка через точку с запятой
Первый и самый неприятный минус – нельзя задать общую функцию времени для всех ключевых кадров, придется дублировать функцию для каждого кадра.
Второй – если хочется задать функцию времени для атрибутов from—to или by, то нужен костыль: придется задать keyTimes со значениями «0; 1»
Если вместо from—to использовать values с двумя значениями, то такой проблемы не будет
Как реализовать накопительные анимации?
Сначала немного теории – следующее повторение у накопительной анимации продолжится там, где закончилось предыдущее. Как бы круто, но не очень… Огорчает тот факт, что накопительные анимации работают только в пределах повторений.
Теперь о том, как сделать анимацию накопительной: нужно установить атрибут accumulate (который по умолчанию none) в значение sum
Стоит иметь в виду, что если использовать values или from—to, то все повторения, кроме первого, будут вести они себя как при additive=»sum». А еще accumulate игнорируется если задан только один to.
Постигаем морфинг контура
Теперь, когда я объяснил основы, пора переходить к по настоящему крутым и сложным вещам. Уверен, что кто-то открыл эту статью исключительно ради этого раздела.
Морфинг контуров – это анимация атрибута d у тега path, что позволяет создать эффект плавного изменения формы фигуры. На данный момент встроенными средствами такое можно сделать только с помощью SMIL. В values указывается список значений для атрибута d, через которые пройдет элемент. Также можно использовать from—to. В общем виде морфинг контура выглядит так
А теперь перейдем к тонкостям сего процесса:
Для тех кто в танке – атрибут d содержит в себе набор точек, которые впоследствии поочередно соединяются и получается фигура. При более детальном рассмотрении можно заметить, что список значений похож на набор команд для ЧПУ станка (или «робота» на уроках информатики). Команд достаточно много, одни отвечают за «перемещение курсора», другие за «рисование», какие-то за то, насколько кривая будет линия и т.д. (все команды тут).
Чтобы морфинг сработал, количество команд должно совпадать, и они должны быть одного типа. Если проигнорировать это условие, то интерполяция будет отсутствовать – анимация будет скакать от одного состояния к другому, как при calcMode=»discrete». На первый взгляд ничего сложного и это так, если ты будешь анимировать фигуры без кривых. Если же нет, то тут начинаются сложности.
При создании сложной графики все используют векторные редакторы, а у них есть привычка максимально оптимизировать «код». Обычно это плюс, но не в нашем случае. На выходе у нас возможно будет список одной длинны, но с командами разного типа, а это нарушение одного из правил. Я использовал Adobe Illustrator и не нашел опции, которая могла поправить положение дел. Иногда, по воле богов дизигна, эта проблема отсутствует. А если серьезно, то вероятность возникновения проблемы прямо пропорциональна сложности фигуры и морфинга.
На данный момент единственным решением проблемы я вижу преобразование «кривого кода» в веб-приложении Shape Shifter. Это тот вариант, которым пользуюсь я. Помимо починки битого кода Shape Shifter позволяет посмотреть результат, при желании добавить анимации другого типа и экспортировать результат в удобном формате.
Далее будет пошаговый туториал, где я расскажу, как сделать такую красивую анимацию
Плант такой: я создам SVG каркас в Adobe Illustrator, напишу анимацию и не одну, починю косяки в Shape Shifter и сделаю морфинг. Я буду использовать как CSS, так и SMIL анимацию.
Будем делать анимированную иконку вопроса. Для начала нужно создать новый проект в Illustrator. Так как в итоге мы получим векторное изображение, большое разрешение тут не нужно. Я считаю комфортным для работы размер монтажной области 200×200 пикселей.
Далее нужен, собственно, сам знак вопроса. Вместо того, чтобы рисовать его вручную, я воспользуюсь инструментом «Текст». Поиграв с параметрами и шрифтами, получаем такой симпатичный вопросик
На этом каркас готов и пора переходить к анимации. Но перед этим нужно сохранить сам проект, потому что он нам еще пригодится. Только после этого сохраняем проект как SVG файл. (как правильно экспортировать документ из Illustrator я писал в самом начале статьи)
Когда я заглянул внутрь полученного документа, я очень удивился, потому что Illustrator сохранил мой круг как элемент <path>, а не <circle>. Так я плавно подвожу к тому, что настало время прибраться. Нужно убрать все лишнее, оптимизировать некоторые моменты и просто сделать так, чтобы было приятно работать. Кто-то делает это с помощью сторонних программ (например SVGO), но я предпочитаю делать все ручками. В процессе создания анимации еще придется не раз перелопатить структуру файла.
В примерах стер содержимое атрибута d, которое занимает много места)
Я заменил имена CSS классов на человеческие, починил тот бракованный круг и убрал всякий мусор. Теперь можно творить чудеса и начну я с того самого круга. Он будет расходиться, как круги на воде. Для этого его нужно для начала повернуть. И тут мы воспользуемся CSS свойствами. А напишу я следующее:
Чтобы круг поворачивался корректно и никуда не ехал, нужен класс _transformer, который я присвою кругу и другим элементам, которые будут трансформироваться. Об этом «лайфхаке» я расскажу подробнее в части про <animateTransform>.
Кто-то спросит: почему ты сразу не сплюснул круг, когда рисовал его в Illustrator? Тогда бы не пришлось возиться с ним сейчас…
Все просто – это делалось для того, чтобы была разница в толщине линии. Если просто сплюснуть круг, такого эффекта не добиться. Конечно, это можно было бы сделать с помощью <path>, но тогда и размер файла был бы больше и анимировать такой элемент ГОРАЗДО сложнее.
Собстна, анимация! Происходить будет следующее – при нажатии на вопрос радиус и обводка круга будут увеличиваться, а его прозрачность уменьшаться. Первые две анимации будут происходить линейно, а исчезновение – под самый конец. Сделаем значение радиуса у circle равным нулю, чтобы его не было видно. Так как animate может анимировать только один атрибут за раз, придется сделать 3 синхронные анимации
Если бы не было необходимости привязывать анимацию к клику, разумнее было бы реализовать ее на CSS
Маской будет простой прямоугольник. В какой-то момент мне показалось, что круто было бы добавить небольшого размытия на границах блика. Поэтому вместо однотонной заливки будем использовать градиент, прозрачный в начале и в конце
Отлично, маска готова. Но для того, чтобы реализовать задуманное, нужно изменить структуру файла. Так как у нас будут два совершенно одинаковых знака вопроса, я заменю их на конструкцию <use>, а элемент <path> перемещу в <defs>
Вот что получается
Теперь, когда основа заложена, пора переходить к анимации. А анимировать мы будем маску. Вернее, прямоугольник внутри маски
В данном примере очень важен порядок применения трансформаций. Попробуй поменять их местами и все пойдет наперекосяк. Именно поэтому тут CSS лучше, чем SMIL.
Так как иконка у нас интерактивная, по клику знак будет подпрыгивать. А просто висящий в воздухе знак — это скучно, поэтому добавим еще небольшого движения в состоянии покоя. Пишем обе анимации и синхронизируем их так, чтобы одновременно работала только одна из них
Все анимации применяются к группе, чтобы элементы внутри двигались вместе
А для того, чтобы анимация прыжка была более выразительной, добавим небольшую деформацию. Так как обе анимации должны происходить одновременно, нужен атрибут additive=»sum»
Еще я изменил время для анимации круга, чтобы она запускалась, когда знак приземляется. Результат:
В итоге у нас получится что-то вроде разлетающихся в разные стороны частиц. Для этого опять изменим структуру, чтобы частицы оказались за знаком
А также добавим им немного прозрачности, чтобы они меньше бросались в глаза и уберем обводку, чтобы их не было видно до анимации
Дальше анимация, которая сама по себе не несет ничего особенного. Просто уменьшаем длину и толщину штриха, попутно перемещая его по прямой
Интерес вызывает то, как мы будем применять эту анимацию. Я хочу, чтобы частицы разлетались, когда знак «приземляется». Но тут же появляются сложности: анимация написана на CSS и, если просто применить ее к нашим частицам, она будет воспроизводиться сразу при открытии документа. А если делать ту же анимацию на SMIL, то их будет 3 на каждый атрибут, и они будут дублироваться для каждой линии, а их целых 7. Вариант, мягко говоря, не очень…
Решение проблемы элегантно – вместо того, чтобы выбирать что-то одно, будем использовать их одновременно. Анимация будет написана на CSS, а интерактивную часть будет обрабатывать SMIL.
Создадим вспомогательный класс Particles_active, через который будем применять анимацию к нашим частицам
И добавим элемент <set>, который будет присваивать этот класс группе, когда настанет нужный момент (подробнее про set расскажу в следующем разделе)
Что мы получили в результате такого манёвра:
- анимация написана один раз и анимирует все атрибуты сразу;
- привязали анимацию к конкретному событию;
- благодаря тому, что класс присваивается не частицам, а их родителю, элемент, включающий анимацию, тоже один;
- после окончания анимации вспомогательный класс автоматически удалится;
Морфинг контуров я оставил на сладкое. У нас уже есть иллюзия объема, но мы ее усилим, сделав небольшое вращение. Так как знак не 3D объект, просто крутить его не получится. Поэтому будем изменять контуры так, чтобы казалось, что знак вращается.
Снова обратимся к Adobe Illustrator, в котором откроем ранее сохраненный проект. Нужно всего два ключевых кадра, один из которых у нас уже готов. Чуть-чуть изменим фигуры, чтобы добиться нужного эффекта. Получим два знака вопроса, разница между которыми видна только при непосредственном сравнении
Для создания анимации нужны только значения атрибута d. Так что вместо сохранения документа откроем его в браузере либо текстовом редакторе
Я предпочитаю открывать в браузере, потому что там удобнее искать. Копируем сгенерированные значения и идем с ними на сайт Shape Shifter.
Всегда есть вероятность, что анимация заработает сразу со сгенерированными значениями, но я даже не стал проверять. Потому что в любом случае собирался показать, как работать в Shape Shifter
Чтобы начать работать, нужно загрузить SVG на сайт. Так как модифицированный вариант с анимациями Shape Shifter не поймет, я заранее подготовил «чистый» SVG. Это просто копия самого первого экспорта из Illustrator. После того как файл загружен, нужно добавить анимацию. Выбираем нужную фигуру, кликаем на часы и в развернувшемся меню выбираем pathData
Перед тем, как приступать к написанию анимации, можно прямо в Shape Shifter поиграть с параметрами, чтобы сразу определиться с длительностью анимации, временными функциями или вообще понять, что это не то, чего ты хочешь. Когда тебя все устраивает, просто копируй значения из поля toValue и fromValue и отправляйся делать анимацию.
В итоге у меня получилась вот такая анимация. Она идентична для лицевой и боковой сторон вопроса, отличаются только значения
Состояние 1 – это нормальный вид вопроса, а состояние 2 – повернутое
Тег set является укороченной версией animate, за исключением того, что он не может в интерполяцию. Он используется для мгновенного изменения атрибута на определенный отрезок времени, т.е. работает по принципу переключателя. Вследствие этого игнорирует атрибуты, связанные с интерполяцией и не поддерживает накопительные или относительные анимации. Значение задается исключительно с помощью атрибута to, атрибуты values, from, by игнорируются
Элемент изменяет положение по клику, по истечении 5 секунд возвращается на исходное место
Если не указывать атрибут dur, то элемент останется в этом состоянии до перезагрузки документа. В остальном он аналогичен animate.
<animateTransform>
Как понятно из названия, используется для применения к элементу разного рода трансформаций. Все типы трансформация идентичны CSS трансформациям. При одновременном использовании CSS и SMIL трансформаций они будут друг друга переопределять, поэтому лучше использовать что-то одно, либо смотреть, чтобы они не пересекались.
Как трансформировать?
В качестве анимируемого атрибута выступает transform. Режим трансформации указывается в атрибуте type и принимает 4 типа значений – перемещение, поворот, масштабирование, сдвиг по осям.
translate – перемещение элемента относительно его текущего положения. В качестве значений принимает смещение в формате [x, y], где y является необязательным параметром
Перемещает элемент по оси Y
rotate – поворачивает элемент относительно центра вращения. В качестве значений принимает угол поворота и координаты центра вращения [deg, x, y], координаты центра указывать не обязательно. По умолчанию центр вращения находится в верхнем левом углу SVG документа
Поворот на 45 градусов вокруг точки с координатами 150, 150
Также центр вращения можно изменить с помощью CSS свойства transform-origin, где помимо координат можно указать проценты. По умолчанию процентные значения рассчитываются по размерам всего документа, чтобы проценты считались относительно элемента, нужно задать CSS свойство transform-box со значением fill-box.
scale – масштабирует элемент. В качестве значений принимает числа с плавающей точкой в формате [scale] для обеих осей, или отдельно для каждой оси [scaleX, scaleY] (1 соответствует нормальному размеру элемента). Если не менять transform-box, о котором я говорил выше, то элемент масштабируется относительно всего документа. Пустое пространство вокруг элемента тоже изменяется вместе с ним, поэтому визуально кажется, что элемент смещается в сторону
Растягивает элемент по оси Х
skewX или skewY – сдвигает элемент относительно оси. В качестве значения принимает угол наклона [deg]. По дефолту центр сдвига – верхний левый угол, так что тут работает тот же прикол с transform-box и transform-origin, что и в других трансформациях
Один сдвигает по X, другой по Y
Суммирование и переопределение трансформаций
В animateTransform все еще можно делать накопительные и относительные анимации, однако здесь атрибут additive ведет себя иначе. В значении replace трансформация переопределяет все предыдущие. В значении sum трансформация суммируется с предыдущей
В данном примере сдвиг прямоугольника будет переопределен на перемещение и поворот
<animateMotion>
Нужен, чтобы анимировать движение элемента вдоль траектории. animateMotion поддерживает атрибуты animate и имеет 3 собственных – path, rotate, keyPoints.
Варианты определения траектории
Определить траекторию движения можно несколькими способами – использовать знакомые нам атрибуты from, to, by или values, новый атрибут path или дочерний тег <mpath>. Я перечислил способы по возрастанию приоритета и объяснять я их буду в том же порядке.
В атрибуты from, to, by указываются координаты точек, values то же, но уже в виде списка
Эффект от такого способа сравним с обычной трансформацией перемещения. Элемент перемещается прямолинейно из одной точки в другую. И тут так же, как и в animateTransform, координаты являются относительными. Точка 0,0 указывает не на верхний левый угол документа, а на текущее положение целевого элемента. Данная особенность присутствует и в остальных способах определения траектории.
В атрибуте path указывается набор команд, как для атрибута d. Если в атрибуте d команды интерпретируются как контур фигуры, то в атрибуте path они является линией, по которой будет двигаться элемент. Координаты точек тоже относительны, поэтому путь начинается с точки 0,0
Данный путь описывает вот такую кривую
Последний способ – использовать в качестве траектории сторонний элемент <path>. Для этого в теге <mpath> нужно указать ссылку на этот элемент, а сам тег нужно поместить внутрь <animateMotion>. Этот вариант имеет ту же особенность с относительными координатами. По своей сути этот способ как бы «копирует» из элемента значение атрибута d в атрибут <path>
Элемент, который определяет траекторию, может даже не отображаться в документе. Его можно просто определить в <defs>
Поворот элемента относительно траектории
Есть возможность заставить элемент поворачиваться по направлению движения, используя атрибут rotate. Он принимает 3 типа значений: auto, auto-reverse и число, обозначающее поворот в градусах
По умолчанию rotate имеет значение 0. Любое численное значение фиксирует угол на протяжении всей анимации. Автоматические режимы auto и auto-reverse изменяют угол поворота элемента соответственно касательной к траектории. И отличаются направлением этой касательной. У auto она направлена вперед, а у auto-reverse назад
Как управлять перемещением по траектории?
Траектория представляет собой кривую, у которой есть начало и есть конец, эти точки обозначаются числами 0 и 1 соответственно. Любое положение на кривой можно определить числом в этом диапазоне. Перечисляя точки в атрибуте keyPoints, можно определить любой вид движения по траектории. Но этого недостаточно, чтобы управлять перемещением, для этого нужна целая система из атрибутов.
Для начала нужно установить calcMode в положение linear или spline. В отличие от других тегов, animateMotion по умолчанию имеет значение paced (почему-то анимация не хочет работать в этом режиме). Также необходимо указать атрибут keyTimes. Только выполнив эти действия, анимация заработает как надо
В примере анимация стартует в середине траектории, движется до конца, затем в начало, и заканчивает движение опять в середине
Разбираясь с animateMotion, я наткнулся на информацию, что то же самое можно, вроде как, сделать на CSS. Но под конец написания статьи у меня не было ни сил, ни желания с этим разбираться. Для энтузиастов я просто оставлю ссылку на документацию.