Анимация текста

В этом уроке мы продолжим знакомство со smil анимацией и подвигаем буквы. С помощью изменений, которые мы внесем в svg файл, мы из отдельных букв получим слово.

Анимация текста с помощью animate

После запуска редактора на панели слоев удалите единственный слой. Для этого нажмите на знак .

Шаг 1. Готовим буквы.

Наберите произвольные буквы из которых может получиться слово. Я напечатал X, T, T, E.

набор букв

Из этих букв мы получим слово TEXT с помощью анимации движения отдельных букв и перестановки их на новые места пример. Слово короткое поэтому работа не займет много времени.

анимация текста

Теперь сохраните документ. При сохранении документа в списке типов файлов выберите простой svg.

Редактор можно закрыть и открыть сохраненный документ в блокноте.

Шаг 2. Анимируем движение букв текста

Добавьте в начало документа следующую строку (это 12 строка)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="297mm"
   height="210mm"
   viewBox="0 0 297 210"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">

Посмотрите на разметку документа. Вы можете глазами найти все буквы напечатанные нами в редакторе inkscape. Разметка для всех букв выглядит одинаково. Вот, например, разметка для буквы Х.

<text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:25.3139px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.18659"
     x="105.88646"
     y="118.0"
     id="text4332"><tspan
       id="tspan4330"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:1.18659"
       x="105.88646"
       y="118.05137">X</tspan></text>

Анимацию мы будем добавлять сразу за этим фрагментом разметки. Нам потребуется id буквы Х (это tspan4330). Для этой буквы мы зададим вот такую траекторию движения

порядок перемещения букв

Первый участок движения будет вертикальным и буква будет двигаться вниз. Это произойдет через 0.5 с после начала загрузки документа в браузер (3 строка). Продолжительность анимации 0.5 с (4 строка). Конечная координата буквы 140 пх (5 строка). 6 строка связывает анимацию с объектом по его id и последняя строка фиксирует состояние объекта в конечном положении.

Для этого добавьте следующий фрагмент

<animate
     attributeName="y"
     begin="0.5s"
     dur="0.5s"
     to="140"
     xlink:href="#tspan4330"
     fill="freeze" />

Следующий участок движения буквы- по горизонтали вправо, этот фрагмент добавляем сразу за предыдущим

<animate
     attributeName="x"
     begin="1.8s"
     dur="0.5s"
     to="147"
     xlink:href="#tspan4330"
     fill="freeze" />

и завершающий участок- вертикально вверх (к этому времени для буквы Х освободится место)

<animate
     attributeName="y"
     begin="2.5s"
     dur="0.5s"
     to="118"
     xlink:href="#tspan4330"
     fill="freeze" />

Смысл каждой строки разметки от буквы к букве не изменяется. Меняются лишь значения времени, начала анимации и координаты. Окончательно для всех букв разметка выглядит так

<text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:25.3139px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.18659"
     x="128.08255"
     y="118.0"
     id="text2102"><tspan
       id="tspan2100"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:1.18659"
       x="128.08255"
       y="118.05137">T</tspan></text>
  <animate
     attributeName="x"
     begin="1.2s"
     dur="0.5s"
     to="110"
     xlink:href="#tspan2100"
     fill="freeze" />
  <text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:25.3139px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.18659"
     x="166.05972"
     y="118.0"
     id="text3602"><tspan
       id="tspan3600"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:1.18659"
       x="166.05972"
       y="118.05137">E</tspan></text>
  <animate
     attributeName="y"
     begin="0.5s"
     dur="0.5s"
     to="96"
     xlink:href="#tspan3600"
     fill="freeze" />
  <animate
     attributeName="x"
     begin="1.8s"
     dur="0.5s"
     to="128"
     xlink:href="#tspan3600"
     fill="freeze" />
  <animate
     attributeName="y"
     begin="2.5s"
     dur="0.5s"
     to="118"
     xlink:href="#tspan3600"
     fill="freeze" />
  <text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:25.3139px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.18659"
     x="105.88646"
     y="118.0"
     id="text4332"><tspan
       id="tspan4330"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:1.18659"
       x="105.88646"
       y="118.05137">X</tspan></text>
  <animate
     attributeName="y"
     begin="0.5s"
     dur="0.5s"
     to="140"
     xlink:href="#tspan4330"
     fill="freeze" />
  <animate
     attributeName="x"
     begin="1.8s"
     dur="0.5s"
     to="147"
     xlink:href="#tspan4330"
     fill="freeze" />
  <animate
     attributeName="y"
     begin="2.5s"
     dur="0.5s"
     to="118"
     xlink:href="#tspan4330"
     fill="freeze" />
  <text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:25.3139px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.18659"
     x="147.99197"
     y="118.0"
     id="text4908"><tspan
       id="tspan4906"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';stroke-width:1.18659"
       x="147.99197"
       y="118.05137">T</tspan></text>
  <animate
     attributeName="x"
     begin="1.2s"
     dur="0.5s"
     to="166"
     xlink:href="#tspan4906"
     fill="freeze" />

Я думаю вы самостоятельно разберете разметку для остальных букв по образцу буквы Х. Результатом будет вот такая анимация перестановки букв (жми)

XTTE

Безусловно, это не идеальный вариант анимации, но узнать что внутри svg интересно и полезно.