Введение в SVG 2D of HTML5: 11-USER Interaction (анимация) Введение и приложение

SVG имеет хорошую интерактивность пользователя, например:

1. SVG может реагировать на большинство событий DOM2.

2. SVG может хорошо захватить движение мыши пользователя через курсор.

3. Пользователи могут легко достичь масштабирования и других эффектов, установив значение свойства ZoomandPan элемента SVG.

4. Пользователи могут легко объединить анимацию и события, чтобы завершить некоторые сложные эффекты.

Прикрепляя события к элементам SVG, мы можем легко выполнить некоторые интерактивные задачи, используя язык сценариев. SVG поддерживает большинство событий DOM2, таких как онфокусин, Onfocusou, Onclick, Onmousedown, Onmouseup, Onmousemove, Onmouseout, Onload, OnResize, Onscroll и другие события. В дополнение к этому, SVG также предоставляет уникальные события, связанные с анимацией, такие как: Onroom, Onbegin, Onend, OnrePeat и т. Д.

Все знакомы с инцидентом, поэтому я не буду говорить об этом.

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

1. Используйте элементы анимации SVG. Это будет выделено ниже.

2. Используйте сценарий. Использование операций DOM для запуска и управления анимацией уже является зрелой технологией, и есть небольшой пример ниже.

3. Смайт (синхронизированный мультимедийный язык интеграции). Если вы заинтересованы, пожалуйста, см.

<svgviewbox = "0 0 800 300"

xmlns = "http://www.w3.org/2000/svg" версия = "1.1">

<cess> Основные элементы анимации </desc>

<rect x = "1" y = "1"

Fill = "none" uckle = "blue" withidth = "2" />

<!-анимация положения и размера прямоугольника->

<rect id = "rectElement" x = "300" y = "100"

Fill = "RGB (255,255,0)">

<animate attributeName = "x" attributeType = "xml"

begin = "0s" dur = "9s" fill = "freeze" от = "300" до = "0" />

<animate attributeName = "y" attributeType = "xml"

begin = "0s" dur = "9s" fill = "freeze" от = "100" до = "0" />

<animate attributeName = "width" attributeType = "xml"

begin = "0s" dur = "9s" fill = "freeze" от = "300" до = "800" />

<animate attributeName = "height" attributeType = "xml"

begin = "0s" dur = "9s" fill = "freeze" от = "100" до = "300" />

</rect>

<!-Создайте новое пространство координат пользователя, поэтому текст начинается с нового (0,0), а последующие преобразования предназначены для новой системы координат->

<g transform = "transtate (100,100)">

<!- ​​Следующее используется для анимирования видимости, а затем использует анимацию,

Animate и AnimateTransform Выполняют другие типы анимации ->

<text id = "textElement" x = "0" y = "0"

font-family = "verdana" font-size = "35.27" Visibility = "hidden">

Это жива!

<set attributeName = "видимость" attributeType = "css" to = "visible"

begin = "3s" dur = "6s" fill = "freeze" />

<animatemotion path = "m 0 0 l 100 100"

begin = "3s" dur = "6s" fill = "freeze" />

<animate attributeName = "fill" attributeType = "css"

от = "rgb (0,0,255)" до = "rgb (128,0,0)"

begin = "3s" dur = "6s" fill = "freeze" />

<animateTransform attributeName = "transform" attributeType = "xml"

type = "utate" от = "-30" до = "0"

begin = "3s" dur = "6s" fill = "freeze" />

<animateTransform attributeName = "transform" attributeType = "xml"

type = "scale" from = "1" to = "3" Apreck = "sum"

begin = "3s" dur = "6s" fill = "freeze" />

</text>

</g>

</svg>

Поместите этот код в тело HTML -документа и запустите его, чтобы узнать влияние анимации.

Xlink: href

Это должно быть очень знакомо, указывая на элементы, которые выполняют анимацию. Этот элемент должен быть определен в текущем фрагменте документа SVG. Если этот атрибут не указан, анимация будет применена к его родительскому элементу.

attributeName = <attributeName>

Это свойство определяет свойства для применения анимации. Если это свойство имеет пространство имен (не забывайте, SVG, по сути, является документом XML), это также должно быть добавлено это пространство имен. Например, в следующем примере Xlink дается различный псевдоним. Здесь, когда Animate указывает атрибут, включено пространство имен:

<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<Title> демонстрация разрешения пространств имен для анимации </title>

<g xmlns: a = "http://www.w3.org/1999/xlink">

<animate attributeName = "a: href" xlink: href = "#foo" dur = "2s" to = "two.png" fill = "freeze"/>

</g>

<g xmlns: b = "http://www.w3.org/1999/xlink" xmlns: xlink = "http://example.net/bar">

<Image xml: id = "foo" b: href = "one.png" x = "35" y = "50"/>

</g>

</svg>

attributeType = css | XML | Авто (значение по умолчанию)

Это свойство определяет пространство имен, где принимаются значения свойства. Значения этих значений следующие:

CSS: атрибут, указанный от имени атрибута, является атрибутом CSS.

XML: атрибут, указанный AttributeName, является атрибутом в пространстве имен по умолчанию XML (обратите внимание, что документ SVG по сути является документом XML).

Auto: Это означает сначала поиск атрибута, указанного AttributeName в атрибуте CSS. Если это не найдено, он будет искать атрибут в пространстве имен XML по умолчанию.

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

begin = legn-valist-list

Это свойство определяет время начала анимации. Это может быть серия временных значений, разделенных полуколонами. Это также может быть какое -то другое значение, которое запускает начало анимации. Например, события, ярлыки и т. Д.

dur = plock-value | СМИ | неопределенный

Определяет продолжительность анимации. Может быть установлен на значение, отображаемое в формате часов. Это также может быть установлено на следующие два значения:

Media: указывает, что время анимации является продолжительностью внутреннего мультимедийного элемента.

Неопределенный: укажите время анимации, чтобы быть бесконечным.

Формат часов относится к следующим форматам юридической стоимости:

: 30: 03 = 2 часа, 30 минут и 3 секунды

: 00: 10,25 = 50 часов, 10 секунд и 250 миллионов секунд

: 33 = 2 минуты и 33 секунды

: 10,5 = 10,5 секунд = 10 секунд и 500 миллионов секунд

.2h = 3,2 часа = 3 часа и 12 минут

мин = 45 минут

S = 30 секунд

MS = 5 миллионов секунд

.467 = 12 секунд и 467 миллионов секунд

.5s = 500 миллионов секунд

: 00.005 = 5 миллионов секунд

END = LEAN-VALE-LIST

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

мин = стоимость часов | СМИ

max = value часов | СМИ

Устанавливает максимальное и минимальное значение продолжительности анимации.

перезапуск = всегда | Когда Неснационально | никогда

Установите анимацию, чтобы начать в любое время. Всегда означает, что анимация может начаться в любое время. Когда вы можете начать, вы можете начать только после того, как нет воспроизведения, например, предыдущий воспроизведение заканчивается. Никогда не означает, что анимация не может быть запущена снова.

RepeatCount = числовое значение | неопределенный

Установите количество раз, когда анимация повторяется. Неопределенный обозначает бесконечное повторение.

RepeatDur = Plock-Value | неопределенный

Устанавливает общее время анимации повторного. Неопределенный обозначает бесконечное повторение.

заполнить = заморозить | удалить (по умолчанию)

Устанавливает состояние элемента после завершения анимации. Замораживание означает, что элемент остается в последнем состоянии анимации после окончания анимации. Удаление означает, что элемент возвращается в состояние перед анимацией после окончания анимации, которая является значением по умолчанию.

Категория 3: Определите атрибуты значений анимации

Эти свойства определяют значение выполненных свойств. Фактически, некоторые алгоритмы, которые определяют ключевые кадры и интерполяцию.

CalcMode = дискретный | Линейный (по умолчанию) | шаг | сплайн

Определить метод интерполяции анимации: дискретный: дискретный, без интерполяции; Линейная: линейная интерполяция; Шаг: интерполяция размера шага; Сплайн: сплайновая интерполяция. По умолчанию линейно (линейная интерполяция), но если атрибут не поддерживает линейную интерполяцию, будет использоваться дискретная интерполяция.

values ​​= <sist>

Определяет список значений для анимационных ключевых кадров, разделенных полуколонами. Поддержка векторного значения.

KeyTimes = <Sist>

Определяет временной список анимационных ключевых кадров, разделенных полуколонами. Это соответствует значениям один за другим. Это значение влияет на алгоритм интерполяции. Если это линейная и сплайновая интерполяция, первое значение ключей должно быть 0, а последнее значение должно быть 1. Для дискретной неинтерполяции первое значение ключей должно быть 0. Для интерполяции размера шага очевидно, что ключи не требуются. И если продолжительность анимации установлена ​​на неопределенность, ключи игнорируются.

keysplines = <sist>

Это свойство определяет контрольную точку, когда интерполяция сплайна (интерполяция Betzel) и, очевидно, работает только в том случае, если режим интерполяции выбран в качестве сплана. Значения в этом списке варьируются от 0 до 1.

от = <значения>

to = <значение>

by = <значение>

Определяет значения начала, конец и шаг атрибута анимации. ПРИМЕЧАНИЕ ЗДЕСЬ: Если значения уже сформулировали соответствующие значения, любое из/до/по значению будет проигнорировано.

Иногда очень полезно установить соответствующее значение вместо абсолютного значения, но дополнительное значение, использование аддитивного свойства может достичь этой цели.

Additive = reply (значение по умолчанию) | сумма

Это свойство контролирует, является ли анимация постепенной. Сумма означает, что анимация будет иметь большее значение атрибута или другие анимации с низким приоритетом. Замена - это значение по умолчанию, указывающее, что анимация будет перезаписать соответствующее значение атрибута или другие анимации с низким приоритетом. Смотрите небольшой пример:

<rect ...>

<animate attributeName = "width" от = "0px" to = "10px" dur = "10s"

Additive = "sum"/>

</rect>

Этот пример демонстрирует эффект анимации увеличения ширины прямоугольника.

Иногда это также очень полезно, если повторные результаты анимации наложены, а использование собственности может достичь этой цели.

Accumulate = none (по умолчанию) | сумма

Это свойство контролирует, является ли эффект анимации кумулятивным. Ни один из них не является значением по умолчанию, указывающим, что дубликаты анимации не накапливаются. Сумма означает, что повторные эффекты анимации накапливаются. Для единой анимации это свойство не имеет значения. Смотрите небольшой пример:

<rect ...>

<animate attributeName = "width" от = "0px" to = "10px" dur = "10s"

дополнительное = "sum" accumulation = "sum" repeatCount = "5"/>

</rect>

Этот пример демонстрирует, что длина прямоугольника увеличивается в каждой итерации.

SVG предоставляет следующие элементы анимации:

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

Это аббревиатура одушевленного элемента и поддерживает все типы атрибутов, особенно когда одушевленные атрибуты (такие как видимость). Набор элемент неинкрементен, а соответствующие атрибуты недействительны. Указанный тип конечного значения анимации должен соответствовать типу значения атрибута.

Лу Джин Анимационные Элементы. Большинство свойств этого элемента такие же, как и выше, и только следующие немного разные различия:

CalcMode = дискретный | линейный | шаг | сплайн

Значение по умолчанию этого свойства отличается, и значение по умолчанию в этом элементе развивается.

path = <path-data>

Путь движущегося элемента анимации такой же, как и формат значения атрибута элемента пути.

КЛАБОНТЫ = <Список номеров>

Значение этого свойства представляет собой серию значений с плавающей запятой, заданной полуколонами, а диапазон значений каждого значения составляет 0 ~ 1. Эти значения представляют собой расстояние, на котором перемещается соответствующий момент времени, указанный атрибутом KeyTimes. Конкретное расстояние здесь определяется самим браузером.

utate = <число> | Авто | Автозверный

Это свойство определяет угол, под которым элемент вращается при перемещении. Значение по умолчанию составляет 0, число представляет угол вращения, а Auto представляет тело животного, вращающееся в направлении дорожного силы. Auto-reverse указывает направление, в котором рулевое управление противоположно направлению движения.

Кроме того, значения элемента анимации от, от, до, значения состоит из пары координат; Значение x и значение y разделяются запятыми или пространствами, и каждая пара координат разделена с помощью полуколона, такого как от = 33, 15, что означает, что начальная точка x координата составляет 33, а координата Y составляет 15.

Существует два способа указать путь движения: один состоит в том, чтобы напрямую присвоить значение атрибуту Path, а другой - указать путь для использования элемента MPATH в качестве дочернего элемента AnimateMotionD. Если вы используете оба метода, элемент MPATH имеет высокий приоритет. Оба метода имеют более высокий приоритет, чем значения, от, к.

Смотрите небольшой пример:

<? XML версия = "1.0" STANDALONE = "Нет"?>

<! Doctype svg public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svgviewbox = "0 0 500 300"

xmlns = "http://www.w3.org/2000/svg" версия = "1.1"

xmlns: xlink = "http://www.w3.org/1999/xlink">

<rect x = "1" y = "1"

Fill = "none" uckle = "blue" withidth = "2" />

<path id = "path1" d = "M100,250 C 100,50 400,50 400 250"

fill = "none" chrke = "blue" withidth = "7.06"/>

<circle cx = "100" cy = "250" r = "17,64" fill = "blue"/>

<circle cx = "250" cy = "100" r = "17,64" fill = "blue"/>

<circle cx = "400" cy = "250" r = "17,64" fill = "blue"/>

<path D = "M-25, -12,5 L25, -12,5 л 0, -87,5 Z"

fill = "Желтый" rosck = "red" withidth = "7.06">

<animatemotion dur = "6s" repeatCount = "Неопределенный" rotate = "auto">

<mpath xlink: href = "#path1"/>

</animatemotion>

</path>

</svg>

Цветные элементы анимации. Это устаревший элемент, и в основном все функции могут быть заменены на оживление, поэтому не используйте его.

Преобразовать анимационные элементы. Взгляните на некоторые специальные свойства:

type = translate | масштаб | Вращать | Skewx | укороченный

Это свойство указывает тип преобразования, а перевод является значением по умолчанию.

Значения от, по и соответствующие параметрам преобразования, что согласуется с преобразованием, упомянутым выше. Значения представляют собой набор значений, разделенных в полуколоне.

Элементы и свойства, которые поддерживают эффекты анимации

В основном все графические элементы (путь, прямо, эллипс, текст, изображение ...) и элементы контейнера (SVG, G, DEFS, использование, переключатель, Clippath, Mask ...) Поддержка анимация. В основном большинство свойств поддерживают эффекты анимации. Для получения подробных инструкций, пожалуйста, обратитесь к официальной документации.

Анимация SVG также может быть завершена с помощью сценариев. Подробное содержание DOM будет представлено позже. Вот краткий пример:

<? XML версия = "1.0" STANDALONE = "Нет"?>

<! Doctype svg public "-// w3c // dtd svg 1.1 // en"

"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">

<svg viewbox = "0 0 400 200"

xmlns = "http://www.w3.org/2000/svg"

OnLoad = "startAnimation (evt)" version = "1.1">

<script type = "application/ecmascript"> <! [cdata [

var TimeValue = 0;

var timer_increment = 50;

var max_time = 5000;

var text_element;

функция startAnimation (evt) {

text_element = evt.target.ownerDocument.getElementById ("textElement");

ShowandGrowElement ();

}

функция ShowandGrowElement () {

TimeValue = TimeValue + Timer_Increment;

if (timevalue> max_time)

возвращаться;

// масштабируйте текстовую строку постепенно, пока она не станет в 20 раз больше

ScaleFactor = (TimeValue * 20.) / max_time;

text_element.setattribute ("transform", "Scale (" + ScaleFactor + ")");

// Сделать строку более непрозрачной

opacityFactor = TimeValue/max_time;

text_element.setattribute ("непрозрачность", непрозрачность);

// Позвоните ShowandGrowElement снова <imer_increment> миллионы второго секунды спустя.

SetTimeout ("ShowAndGrowElement ()", Timer_Increment)

}

window.showandgrowelement = showandgrowelement

]]> </script>

<rect x = "1" y = "1"

fill = "none" chrke = "blue" withidth = "2"/>

<g transform = "transtate (50,150)" fill = "red" font-size = "7">

<Text Id = "TextElement"> SVG </text>

</g>

</svg>

Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Центр разработки: https://developer.mozilla.org/en/svg

Популярная ссылка: http://www.chinasvg.com/

Официальный документ: http://www.w3.org/tr/svg11/

SVG Анимационная технология: http://msdn.microsoft.com/zh-cn/library/gg589525(v=vs.85).aspx