Есть ли в SVG возможность, при помощи тега animate
, animateTransform
, set
или какого-нибудь другого тега, реализовать анимацию смены текста с одного на другой?
-
в SVG это сделать сложно но что бы не мучаться придумали экспорт из AI в After Effect , и вот там все эти штуки доступны, к примеру это минимум что показано по этому вопросу : codepen.io/airnan/pen/YwroOX – MaximLensky 27 мар '19 в 23:42
-
а какой характер анимации Вас интересует? – Stranger in the Q 28 мар '19 в 7:50
2 ответа
Текст в SVG, как любой другой графический элемент имеет координаты X
и Y
с помощью которых он позиционируется на холсте svg.
<text x="5" y="75" font-size="60" stroke="yellow" fill="gold">
Начальный текст Другой текст
</text>
Изменяя эти координаты с помощью команд анимации <animate />
<animateTransform/>
<set />
<animateMotion />
можно как угодно анимировать движение текста.
- Горизонтальная анимация текста
<animate attributeName="x"
Движение текста влево после клика:
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="100" style="border:0px solid gray">
<rect x="2" y="12" width="445" height="85" fill="#1A2153"/>
<text x="5" y="75" font-size="60" stroke="yellow" fill="gold"> Начальный текст Другой текст
<!-- анимация первой половины фразы -->
<!-- Вся фраза передвигается влево и показывается вторая половина фразы -->
<animate attributeName="x" begin="svg1.click"
values="5;-435" dur="0.8s" repeatCount="1" fill="freeze"/>
</text>
</svg>
- Дискретное перемещение текста
Для этого добавляется атрибут alcMode="discrete"
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="100" style="border:0px solid gray">
<rect x="2" y="12" width="445" height="85" stroke="gray" fill="none"/>
<text x="5" y="75" font-size="60"> Начальный текст Другой текст
<animate attributeType="XML" attributeName="x" begin="svg1.click"
values="5;-435" dur="0.4s" calcMode="discrete" repeatCount="1" fill="freeze"/>
</text>
</svg>
- Замена слов после наведения курсора
begin="gr1.mouseover"
и увода курсораbegin="gr1.mouseout"
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="100" style="border:0px solid gray">
<g id="gr1">
<!-- Рамка вокруг текста -->
<rect id="rect1" x="2" y="12" width="445" height="85" fill="#1A2153"/>
<text id="txt1" x="6" y="75" font-size="60" stroke="white" fill="white" pointer-events="none" > Начальный текст Другой текст</text>
</g>
<!-- анимация первой половины фразы -->
<!-- Вся фраза передвигается влево и показывается вторая половина фразы -->
<animate xlink:href="#txt1" attributeName="x" begin="gr1.mouseover"
to="-435" dur="0.2s" calcMode="discrete" fill="freeze"/>
<!-- Возврат фразы в исходное состояние при отводе курсора -->
<animate xlink:href="#txt1" attributeName="x" begin="gr1.mouseout"
to="5" dur="0.2s" calcMode="discrete" fill="freeze" />
</svg>
- Плавное, построчное движение слов вверх
Используется команда анимации движения вдоль пути
<animateMotion path="M 0 0 L 0 -200" dur="6s" repeatCount="indefinite" />
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="400px" height="40px" viewBox="0 0 400 40" >
<rect width="75%" height="100%" fill="#1A2153" />
<text
style="font-size:20px;fill:gold; stroke:yellow; font-family:Garamond"
x="0"
y="0">
<tspan x="20" y="50">Люблю грозу в начале мая,</tspan>
<tspan x="20" y="100">Когда весенний, первый гром,</tspan>
<tspan x="20" y="150">Как бы резвяся и играя,</tspan>
<tspan x="20" y="200">Грохочет в небе голубом.</tspan>
<animateMotion path="M 0 0 L 0 -200" dur="6s" repeatCount="indefinite" />
</text>
</svg>
- Движение с остановками на каждой фразе
Для этого используется атрибут:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="400px" height="40px" viewBox="0 0 400 40" >
<rect width="75%" height="100%" fill="#1A2153" />
<text
style="font-size:20px;fill:gold; stroke:yellow; font-family:Garamond"
x="0"
y="0">
<tspan x="20" y="50">Люблю грозу в начале мая,</tspan>
<tspan x="20" y="100">Когда весенний, первый гром,</tspan>
<tspan x="20" y="150">Как бы резвяся и играя,</tspan>
<tspan x="20" y="200">Грохочет в небе голубом.</tspan>
<animateMotion
keyTimes="0; 0.075;0.175; 0.325; 0.425; 0.575;0.675;0.825;0.925; 1"
values="0,0;0,-25;0,-25;0,-75;0,-75;0,-125;0,-125;0,-175;0,-175;0,-204"
repeatCount="indefinite"
dur="8s"
calcMode="linear">
</animateMotion>
</text>
</svg>
keyTimes="0; 0.075;0.175; 0.325; 0.425; 0.575;0.675;0.825;0.925; 1"