Простая анимация в inkscape
Добавлено: 15 янв 2017, 00:35
Простая анимация в inkscape
В этой теме мы рассмотрим примеры, как делать анимацию в inkscape. Начнем с самого простого.
Как вы, наверное, уже знаете, inkscape - это векторный редактор, который сохраняет свои файлы SVG в формате XML.
XML-файлы можно редактировать также, используя различные текстовые редакторы, даже обычной Блокнот в Windows.
Давайте создадим какую нибудь одну фигуру в inkscape. Я сделал просто круг.
Сохраним файл с фигурой в inkscape в формате SVG.
Откройте созданный файл SVG в тектовом редакторе, например в блокноте и вы увидите:
Немного упростим файл. В конце концов его делала машина, для нашей задачи не все параметры являются обязательными.
Кроме удаления не нужных для нашей задачи параметров (это было нужно для большей наглядности, чтобы сделать код по-проще) я изменил:
Ширину и высоту рисунка: width="1500" height="1500".
Начальное положение нарисованного круга: cx="200" cy="200".
Идентификатор круга с автоматического названия на более читаемое: id="BlueCircle".
Теперь добавим в наш файл простенький скрипт который будет делать движение между тегами <svg> и <g>, а также вызов этого скрипта внутри тега <svg> - onload="Start(evt)".
Всё! Сохраните файл в формате HTML и откройте в браузере, чтобы убедиться, что анимация работает. Пример HTML файла с полученной анимацией в inkscape можно посмотреть здесь. Вставить на форум HTML код нельзя, поэтому ниже анимированный GIF того, что должно получиться. Настоящий HTML можно открыть по ссылке в предыдущем предложении.
В этой теме мы рассмотрим примеры, как делать анимацию в inkscape. Начнем с самого простого.
Как вы, наверное, уже знаете, inkscape - это векторный редактор, который сохраняет свои файлы SVG в формате XML.
XML-файлы можно редактировать также, используя различные текстовые редакторы, даже обычной Блокнот в Windows.
Давайте создадим какую нибудь одну фигуру в inkscape. Я сделал просто круг.
Сохраним файл с фигурой в inkscape в формате SVG.
Откройте созданный файл SVG в тектовом редакторе, например в блокноте и вы увидите:
Код: Выделить всё
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing-1.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-139.28571"
inkscape:cy="520"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="837"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path4136"
cx="-321.42856"
cy="468.07648"
r="110" />
</g>
</svg>
Кроме удаления не нужных для нашей задачи параметров (это было нужно для большей наглядности, чтобы сделать код по-проще) я изменил:
Ширину и высоту рисунка: width="1500" height="1500".
Начальное положение нарисованного круга: cx="200" cy="200".
Идентификатор круга с автоматического названия на более читаемое: id="BlueCircle".
Код: Выделить всё
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg"
width="1500"
height="1500"
version="1.1">
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="BlueCircle"
cx="200"
cy="200"
r="110" />
</g>
</svg>
Код: Выделить всё
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg"
onload="Start(evt)"
width="1500"
height="1500"
version="1.1">
<script type="text/ecmascript">
<![CDATA[
var time = 0;
var delta_time = 25;
var max_time = 1000;
var dir = 1;
var the_rect;
function Start(evt) {
the_rect = evt.target.ownerDocument.getElementById("BlueCircle");
Oscillate();
}
function Oscillate() {
time = time + dir * delta_time;
if (time > max_time) dir = -1;
if (time < -max_time) dir = 1;
// Calculate x position
x_pos = (time * 25) / max_time;
the_rect.setAttribute("transform", "translate(" +x_pos+ ", 0.0 )");
// Repeat
setTimeout("Oscillate()", delta_time)
}
window.Oscillate = Oscillate
]]>
</script>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<circle
style="opacity:1;fill:#00ffff;fill-opacity:1;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="BlueCircle"
cx="200"
cy="200"
r="110" />
</g>
</svg>