В этом уроке мы продолжим знакомство со 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 интересно и полезно.