SV-анимация через элемент

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 25
Автор
Рек. время прохождения 2 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы изучим, как оживить векторную графику прямо в браузере с помощью встроенных возможностей SVG. Анимация в SVG позволяет создавать динамические и интерактивные элементы без использования JavaScript или внешних библиотек. Вы научитесь изменять положение, размер, цвет и другие свойства SVG-фигур с течением времени. Задания построены от простого к сложному: мы начнем с базового перемещения объекта, затем перейдем к управлению цветом и повторениями, освоим трансформации (вращение, масштабирование) и, наконец, научимся анимировать объекты вдоль сложных траекторий. Этот тренажер поможет вам закрепить синтаксис и понять основные принципы декларативной анимации в SVG.
Список тем

Простое движение

id: 37820_svg-animation-basic-move-1

Ваша первая задача — создать простейшую анимацию. Заставьте синий круг перемещаться по горизонтали от начальной точки (50) до конечной (250) в течение 3 секунд.

CSS
svg {
  border: 1px solid #eee;
  width: 100%;
  max-width: 370px;
  height: 150px;
}
HTML
<svg viewBox="0 0 300 100">
  <circle cx="50" cy="50" r="20" fill="#4A90E2">
    <input1 attributeName="cx" from="50" to="250" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>
Для анимации атрибутов SVG-элементов используется специальный тег, который вкладывается внутрь анимируемой фигуры. Основной тег для этого — <animate>. У него есть ключевые атрибуты: 'attributeName' для указания анимируемого свойства (в данном случае, 'cx'), 'from' и 'to' для начального и конечного значений, и 'dur' для указания длительности анимации (например, '3s').
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Анимация цвета

id: 37820_svg-animation-color-2

Теперь давайте поработаем с цветом. Заставьте квадрат плавно менять свою заливку с красного (#E24A4A) на зеленый (#4AE286). Анимация должна остановиться в конечном состоянии.

CSS
svg {
  border: 1px solid #eee;
  width: 100%;
  max-width: 370px;
  height: 150px;
}
HTML
<svg viewBox="0 0 150 150">
  <rect x="25" y="25" width="100" height="100" fill="#E24A4A">
    <animate input1="fill" from="#E24A4A" to="#4AE286" dur="4s" input2="freeze" />
  </rect>
</svg>
Принцип тот же, что и в предыдущем задании. Используйте тег <animate>. Вам нужно анимировать атрибут 'fill'. Чтобы анимация застыла в конечном состоянии и не возвращалась в исходное, используйте атрибут 'fill' (не путать с атрибутом фигуры) со значением 'freeze'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Бесконечное повторение

id: 37820_svg-animation-repeat-3

Сделайте так, чтобы анимация изменения радиуса круга повторялась бесконечно. Круг должен пульсировать, увеличиваясь от 10 до 30 и обратно.

CSS
svg {
  border: 1px solid #eee;
  width: 100%;
  max-width: 370px;
  height: 150px;
}
HTML
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="10" fill="#7ED321">
    <animate attributeName="r" from="10" to="30" dur="1.5s" input1="indefinite" />
  </circle>
</svg>
Для управления количеством повторений анимации используется атрибут 'repeatCount'. Чтобы анимация повторялась бесконечно, ему нужно присвоить специальное значение 'indefinite'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Анимация трансформации: Вращение

id: 37820_svg-animation-transform-4

Простые атрибуты — это хорошо, но трансформации интереснее. Заставьте прямоугольник вращаться на 360 градусов вокруг своего центра (75, 75).

CSS
svg {
  border: 1px solid #eee;
  width: 100%;
  max-width: 370px;
  height: 150px;
}
HTML
<svg viewBox="0 0 150 150">
  <rect x="25" y="25" width="100" height="100" fill="#F5A623">
    <input1
      attributeName="transform"
      input2="rotate"
      from="0 75 75"
      to="360 75 75"
      dur="5s"
      repeatCount="indefinite" />
  </rect>
</svg>
Для анимации трансформаций (вращение, масштабирование, перемещение) используется другой тег — <animateTransform>. У него обязательно должен быть атрибут 'type', который указывает тип трансформации (в данном случае 'rotate'). Значения 'from' и 'to' для вращения задаются в формате 'угол центр_x центр_y'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Движение по заданному пути

id: 37820_svg-animation-path-5

Это более сложная задача. Заставьте маленький спутник (круг) двигаться вдоль предопределенной изогнутой траектории (path).

CSS
svg {
  border: 1px solid #eee;
  width: 100%;
  max-width: 370px;
  height: 200px;
}
HTML
<svg viewBox="0 0 300 150">
  <path d="M20,75 C 80,150 220,0 280,75" stroke="#ccc" stroke-width="1" fill="none"/>
  <circle cx="0" cy="0" r="8" fill="#D0021B">
    <input1
      input2="M20,75 C 80,150 220,0 280,75"
      dur="6s"
      repeatCount="indefinite" />
  </circle>
</svg>
Для анимации движения вдоль пути существует тег <animateMotion>. Он позволяет объекту следовать по контуру, заданному в атрибуте 'path' или во вложенном элементе <mpath>. В этом задании путь задан прямо в атрибуте 'path'.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Автоматический поворот по пути

id: 37820_svg-animation-path-rotate-6

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

CSS
svg {
  border: 1px solid #eee;
  width: 100%;
  max-width: 370px;
  height: 200px;
}
HTML
<svg viewBox="0 0 300 150">
  <path id="motionPath" d="M20,75 C 80,150 220,0 280,75" stroke="#ccc" stroke-width="1" fill="none"/>
  <polygon points="-10,-5 10,0 -10,5" fill="#4A90E2">
    <animateMotion dur="6s" repeatCount="indefinite" input1="auto">
      <mpath href="#motionPath" />
    </animateMotion>
  </polygon>
</svg>
У тега <animateMotion> есть полезный атрибут 'rotate'. Если задать ему значение 'auto', объект будет автоматически поворачиваться, следуя изгибам траектории.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Комбинация анимаций

id: 37820_svg-animation-combined-7

Объедините несколько анимаций. Заставьте звезду одновременно вращаться на месте и менять свой цвет с желтого на оранжевый. Обе анимации должны быть бесконечными.

CSS
svg {
  border: 1px solid #eee;
  width: 100%;
  max-width: 370px;
  height: 150px;
}
HTML
<svg viewBox="0 0 100 100">
  <polygon points="50,5 61,40 98,40 68,62 79,96 50,75 21,96 32,62 2,40 39,40" fill="#F8E71C">
    <animateTransform 
      attributeName="transform" 
      type="rotate" 
      from="0 50 50" 
      to="360 50 50" 
      dur="4s" 
      repeatCount="indefinite" />
    <input1 
      attributeName="fill" 
      from="#F8E71C" 
      to="#F5A623" 
      dur="2s" 
      input2="indefinite" />
  </polygon>
</svg>
Один SVG-элемент может содержать несколько тегов анимации. Просто добавьте внутрь фигуры и <animateTransform> для вращения, и <animate> для изменения цвета ('fill'). Они будут выполняться параллельно.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру