# Графика и SMIL анимация

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

## Шкала времени

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

Следующая фигура показывает три объекта анимации документа. Каждый объект показывается в левой части шкалы меткой с белым фоном и блоком располагающимся за этой меткой. Щелчок по метке подсвечивает соответствующий элемент в виде Форматированный, обеспечивая пользователя контекстом этого элемента. Если графический элемент имеет один единственный элемент анимации (например элемент Прямоугольник-Rectangle в фигуре), этот элемент анимации выводится как цветная полоска. Если есть несколько элементов, то серая полоска будет представлять всю анимацию (Circle-Круг, внизу фигуры), и кнопка '+' в в метке позволяит пользователю получить расширенное представление. Элемент MyText, является примером такого расширенного представления, где каждый элемент анимации представлен цветной полосой. Кнопка '-', позволит пользователю вернуться к сжатому представлению.

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

- жёлтый для `animate`,
- красный для `set`,
- зелёный для `animateMotion`,
- тёмно-синий для `animateColor`,
- голубой для `animateTransform`

## Редактирование анимации

Шкала времени полезна для того чтобы быстро оценить анимацию всей графики в документе, а также позволяет автору редактировать анимацию. Существующие элементы могут быть изменены. Большинство манипуляций выполняется непосредственно в шкале времени, путём перемещения полосы или изменения её длины. Это немедленно отображается и в других видах документа, где изменяются соответствующие атрибуты элемента анимации (в этом случае атрибуты `begin` и `dur`).

При создании анимации существующего графического элемента:

- Пользователь должен начинать, с выбора времени начала анимации

  Нажмите Ctrl + левая кнопка мыши на бегунке с красной линией и переместите его в нужную вам стратовую позицию

- Затем выбирается интересующий пользователя элемент в виде Форматированный

  Если элемент имел идентификатор ID то он будет использоваться как метка,

- Затем щёлкните по кнопке находящейся в левом верхнем углу окна шкалы времени

  Это создаст новый элемент анимации в этом виде.

- Затем пользователь должен указать стартовую и конечную позицию мультика в виде Форматированный

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

- Наконец, возвращаясь к шкале времени, пользователь может перемещать и/или изменять размеры новой полосы, для корректировки синхронизации.

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

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

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