Лабораторная работа №12 / Лабораторная работа 12
.pdf
Лабораторная работа № 12
Разработка векторных элементов для Web.
Цель: ознакомить студентов с методикой создания элементов Web-дизайна в
Inkscape.
Теоретические сведения
Анимация
Элементы веб-дизайна выглядят более интересным, привлекающими внимание, если их анимировать. Существует огромное множество различных программ как платных, так и бесплатных, которые разработаны специально для создания анимированных свг-изображений.
В Inkscape так же, как и в любом векторном редакторе осуществляется создание свг-анимации, при этом принцип создания анимации в разных векторных редакторах практически одинаковый. В отличие от растровых редакторов, анимация векторных объектов – это не покадровая и не гиф-анимация (послойная), это интерактивная анимация, основанная на написании скриптового кода.
Inkscape – это векторный редактор, который сохраняет свои файлы SVG в формате XML. XML-файлы можно редактировать, используя различные текстовые редакторы: Блокнот, WordPad и т.д. Таким образом, создание анимации в Inkscape сводится к созданию графической композиции в виде файла формата SVG, затем редактирование этого файла в текстовом редакторе и добавление кода для анимации выделенного векторного объекта.
SVG-спрайты.
Спрайт, в рамках веб-разработки – это файл с графическими объектами, полученный в результате объединения нескольких графических файлов.
На web-страницах кроме CSS-спрайтов, созданных в растровом редакторе, могут быть использованы и SVG-спрайты, но в отличие от растровых спрайтов, собственных инструментов для создания SVG-спрайта в Inkscape нет.
Однако, можно создать макет будущего спрайта как единое изображение в векторном редакторе и сохранить в формате svg, а затем вставить спрайт в разметку html-файла.
Способ описан в статье Osvaldas Valutis1 и состоит в следующем: «при срабатывании javascript происходит проверка: спрайт уже записан в localStorage? Если да, он берется оттуда и вставляется на страницу. Если нет, файл скачивается, записывается в localStorage и потом вставляется на страницу.»
1 Статья “Caching SVG Sprite in localStorage" http://osvaldas.info/caching-svg-sprite-in-localstorage
1
Листинг кода SVG-спрайта:
(function(window, document) {
'use strict';
var file = 'img/sprite.svg', // путь к файлу спрайта на сервере
revision = 1; // версия спрайта
if (!document.createElementNS || !document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect) return true;
var isLocalStorage = 'localStorage' in window && window\['localStorage'\] !== null,
request,
data,
insertIT = function() { document.body.insertAdjacentHTML('afterbegin', data);
},
insert = function() {
if (document.body) insertIT();
else document.addEventListener('DOMContentLoaded', insertIT); };
if (isLocalStorage && localStorage.getItem('inlineSVGrev') == revision) { data = localStorage.getItem('inlineSVGdata');
if (data) { insert(); return true;
}
}
try {
request = new XMLHttpRequest(); request.open('GET', file, true); request.onload = function() {
if (request.status >= 200 && request.status < 400) {
2
data = request.responseText;
insert();
if (isLocalStorage) {
localStorage.setItem('inlineSVGdata', data);
localStorage.setItem('inlineSVGrev', revision);
}
}
}
request.send(); } catch (e) {}
}(window, document));
Примеры.
Пример 1. Создайте анимацию круга.
1.Создайте новый документ. Нарисуйте цветной круг со следующими параметрами: размер – произвольный, цвет заливки – бирюзовый, цвет контура – черный.
2.Сохраните полученное изображение в inkscape в виде файла в формате SVG.
3.Откройте созданный файл 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#
3
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
4
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>
4.Упростите файл, удалив все необязательные параметры для анимации, а также изменив ширину и высоту рисунка, задав новые значения ширины и высоты изображения: width=1500 height=1500. Начальное положение нарисованного круга: cx=200 cy=200. Идентификатор круга (ID) изменим со значения по умолчанию на id=BlueCircle.
5
<?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>
5.Добавим в файл, скрипт, который будет задавать движение между тегами <svg> и <g>, а также вызов этого скрипта внутри тега <svg> –
onload=Start(evt).
<?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>
6
<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
7
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>
Итоговый html-файл будет выглядеть следующим образом:
<?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;
8
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>
На сайте всегда присутствуют элементы веб-дизайна, которые могут быть как статичными, так и анимированными, поэтому используя возможности скриптов, можно анимировать любой объект, сохраненный в виде SVG-файла:
–кнопки;
–иконки;
–пиктограммы;
–баннеры.
9
Пример 2. Создайте следующий svg-спрайт:
1.Создайте новый документ.
2.Выберите инструмент Рисовать прямоугольники и квадраты, создайте прямоугольник оранжевого цвета с красной обводкой и толщиной обводки 2 мм.
3.Добавьте текстовую надпись белого цвета. Используя инструмент Выделить и трансформировать объекты, увеличьте ее размер так, чтобы надпись занимала 2/3 площади прямоугольника.
4.Выделите прямоугольник, используя инструмент Выделить и трансформировать объекты, затем, удерживая клавишу Shift, выделите текстовую надпись.
5.Продублируйте прямоугольник с надписью, используя команду Правка →Дублировать 2 раза. В итоге должно получиться 3 одинаковых прямоугольников с текстовой надписью.
6.На второй и третьей копии измените содержание текстовых надписей, используя инструмент Создать и править текстовые объекты.
7.Выделите все объекты: и прямоугольники, и текстовые надписи с помощью инструмента Выделить и трансформировать объекты.
8.Продублируйте прямоугольники с надписями, используя команду Правка
→Дублировать.
9.Вторую копию разместите под первой, используя инструмент Выделить и трансформировать объекты. Измените цвет прямоугольников с оранжевого на фиолетовый, используя команду.
10.Измените цвет текстовых надписей на копии прямоугольников с белого на синий.
11.Выделите прямоугольник, используя инструмент Выделить и трансформировать объекты, затем, удерживая клавишу Shift, выделите текстовую надпись.
12.Используя команду Объект →Сгруппировать, сгруппируйте прямоугольник с текстовой надписью.
13.Повторите пункты 11 и 12 для оставшихся не сгруппированных объектов.
14.Сохраните полученный файл в формате html.
10