Как создать анимацию SVG

Оцените материал
(0 голосов)

Здравствуйте! Сегодня я хочу рассказать о том как сделать анимацию в SVG. Вы уже многое знаете об SVG. На ппрошлом уроке мы с вами  разбирались как  рисовать  объекты в SVG,  задавать им стили и писать текст, но есть также еще очень классная штука - анимация. Вот  как анимировать SVG объекты, мы и поговорим в этой статье.

Как создать анимацию SVG

<svg>
  <rect x="0" y="0" width="150" height="150" fill="#0f0">
   <animate attributeName="width" from="0" to="150" dur="5s" />
  </rect>
</svg> 

Просмотреть  пример

Для создания анимации используется тег animate. Атрибут attributeName принимает имя того атрибута, который будет анимироваться, from и to,  это  начальные и конечные значения, а в dur указывается длительность анимации в секундах.

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

<svg>
  <rect x="0" y="0" width="200" height="200" fill="#0f0">
   <animate attributeName="x" from="0" to="150" dur="3s" fill="freeze" />
  </rect>
</svg>

Просмотреть  пример

В примере анимируется атрибут x, таким образом  положение по оси x, а атрибут fill, которому присвоено  freeze как бы  замораживает объект на том самом месте, где он остановился. Если его убрать, то после анимации объект  будет возвращаться  на исходную позицию.

Если  требуется   вам вдруг  потребуется анимировать одновременно  несколько атрибутов, то следует указывать  несколько тегов animate.

<svg>
  <ellipse cx="30" cy="30" rx="30" ry="30">
   <animate attributeName="cx" from="30" to="50" dur="1s" fill="freeze" />
   <animate attributeName="rx" from="30" to="50" dur="1s" fill="freeze" />
  </ellipse>
<svg>

Просмотреть  пример

И конечно  можно  трансформировать объекты, используя тег animateTransform.

<svg>
  <rect width="100" height="100">
   <animateTransform attributeName="transform" type="rotate" from="0" to="-100" dur="5s" />
  </rect>

Просмотреть  пример

Атрибут type  может принимать такие  значения scale(масштаб), translate(перемещение) и rotate(поворот).

Итак, в этом уроке мы свами  мы рассмотрели, как анимировать SVG объекты. Как видите все довольно просто.

 

Прочитано 901 раз Последнее изменение Вторник, 25 июля 2017 18:59
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+