Масштабируемая векторная графика
[+]
Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1768 / 346 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Тема: Компьютерная графика
Специальности: Программист
Теги: arc, baseline, css, flash, glyph, html, marker, stroke, SVG, sweep, x-axis, анимация, браузеры, графика, паттерн, паттерны, поддержка, радиальный градиент, форматы, цвета, шрифты, элементы
Лекция 11:

Анимация
A
|
версия для печати
< Лекция 10 || Лекция 11: 123456 || Лекция 12 >

Анимация нескольких трансформаций

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

Таблица 11.10. Анимация нескольких трансформаций.
№ Код Описание
11.10.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="260" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1500 3000">
<title> Лекция 11. Анимация </title>
     <desc>
          Пример animateTransformMulti.svg
     </desc>

<g>
          <g>
          <circle cx="500" cy="400"  r="300" 
                fill="lightskyblue"
                stroke="blue" stroke-width="30"/>
          <ellipse cx="500" cy="500"  rx="150" ry="100" fill="none" 
         stroke="blue" stroke-width="30"/>
          <rect x="300" y="370" width="400" height="130"  fill="lightskyblue"/>
          <ellipse cx="350" cy="300"  rx="100" ry="50" fill="white" 
         stroke="blue" stroke-width="30"/>
          <ellipse cx="650" cy="300"  rx="100" ry="50" fill="white" 
         stroke="blue" stroke-width="30"/>
          <circle cx="350" cy="300"  r="25" fill="black"/>
          <circle cx="650" cy="300"  r="25" fill="black"/>
          <!--Увеличение фигуры в два раза -->
          <animateTransform attributeName="transform" type="scale" 
         from="1" to="2" begin="0" dur="1s"      fill="freeze"/>
          </g>
     <!-- Вращение фигуры относительно нового центра с координатами 1000,800, 
             полученных в результате удвоения старых: 
             пcx="500"*2  cy="400"*2 -->
<animateTransform attributeName="transform" attributeType="XML" type="rotate" 
         from="0, 1000, 800"
to="360, 1000, 800" begin="1" dur="1s"
   repeatCount="indefinite"/>
</g>
     <g>
          <g>
               <text x="-900" y="2000" style="fill:yellow; stroke:red;
          font-family:Times New Roman; font-size:500;">
      SVG - графика
          <!-- Изменение цвета текста -->
          <animateColor attributeName="fill" 
         from="yellow" to="red" begin="2s" dur="2s"
                     repeatCount="indefinite"/>

          </text>
          <!-- Увеличение ширины  текста в 1,2 раза -->
          <animateTransform attributeName="transform" type="scale" 
         from="1,1" to="1.2,1" begin="2" dur="1s"
          repeatCount="indefinite"/>

          </g>
          <!-- Увеличение высоты  текста в 1,2 раза -->
          <animateTransform attributeName="transform" type="scale" 
         from="1,1" to="1,1.2" begin="2" dur="1s"
                     repeatCount="indefinite"/>
</g>

</svg>
Листинг 11.10.1. Пример animateTransformMulti.svg
При загрузке ролика мы видим текст и увеличивающуюся в течении секунды группу объектов. В течении следующей секунды группа начинает вращаться, а спустя еще одну секунду начинает увеличиваться текст с одновременным изменением всего цвета.
Вид в браузере

Элемент set. Анимация по ссылке

Элемент set позволяет изменять анимируемые свойства не плавно, а скачком:

<ellipse cx="100" cy="50"  rx="60" ry="40" fill="lightpink" 
         stroke="lightcoral" stroke-width="4">
<set attributeName="ry" to ="20" 
         begin="1s" dur="2s"/>
</ellipse>

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

<ellipse id="myEllipse" cx="100" cy="150"  rx="60"
ry="40" fill="yellow" stroke="orange" stroke-width="4"/>
<set  xlink:href="#myEllipse" attributeName="ry" to ="20"
begin="1s" dur="2s"/>

Этот способ, впрочем, может применяться для всех видов анимации. В табл. 11.11 приводятся примеры элемента set.

Таблица 11.11. Элемент set.
№ Код Вид в браузере
11.11.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример set1.svg
     </desc>

<rect x="5" y="5" width="190" height = "190" 
      fill = "none" stroke="blue" stroke-width="2"/>

     <!--Анимация при встраивании атрибута set внутри тега ellipse-->
     <ellipse cx="100" cy="50"  rx="60" ry="40" 
              fill="lightpink" stroke="lightcoral" stroke-width="4">
     <set attributeName="ry" to ="20" 
         begin="1s" dur="2s"/>
     </ellipse>

     <!--Анимация c применением ссылки-->
     <ellipse id="Myellipse" cx="100" cy="150" rx="60" ry="40" 
              fill="yellow" stroke="orange" stroke-width="4"/>     
     <set  xlink:href="#Myellipse" attributeName="ry" to ="20" 
         begin="1s" dur="2s"/>

</svg>
Листинг 11.11.1. Пример set1.svg
Описание
Два эллипса – розовый и желтый в течении секунды после загрузки отображаются в исходном виде. Далее, в течении двух секунд происходит изменение их вертикальных радиусов. Для розового эллипса анимация применяется непосредственно, для желтого – при помощи ссылки.
№ Код Вид в браузере
11.11.2 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="250" height="140"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация </title>
     <desc>
     Пример set2.svg
     </desc>

     <rect x="5" y="5" width="240" height = "130" fill = "none"
      stroke="green" stroke-width="2"/>
<text x="10" y="50" style="fill:yellow; stroke:red;
font-family:Times New Roman; font-size:60; visibility:hidden;">
      SVG

<set attributeName="visibility" attributeType="CSS"
to="visible" begin="1s" fill="freeze"/>

</text>

<text x="10" y="110" style="fill:yellow; stroke:red;
font-family:Times New Roman; font-size:60; visibility:hidden;">
      графика

<set attributeName="visibility" attributeType="CSS"
to="visible" begin="2s" fill="freeze"/>

</text>

</svg>
Листинг 11.11.2. Пример set2.svg
Описание
Последовательное появление текста. Атрибут visibility элемента text отвечает за отображение текста в SVG – документе.

Анимация фильтров

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

Таблица 11.12. Анимация фильтров.
Вид анимации Фильтр animate set animateColor animateTransform
feBlend + + – –
feColorMatrix + + – –
feComponentTransfer + + – –
feComposite + + – –
feConvolveMatrix + + – –
feDiffuseLighting + + + –
feDisplacementMap + + – –
feDistantLight + + – –
feFlood + + + –
feGaussianBlur + + – –
feImage + + – +
feMerge + + – –
feMorphology + + – –
feOffset + + – –
fePointLight + + – –
feSpecularLighting + + + –
feSpotLight + + – –
feTile + + – –
feTurbulence + + – –

Большая часть фильтров поддерживает лишь два вида анимации: set и animate. Для числовых значений, способных изменяться в определенных пределах, используется анимация animate. Для дискретных значений, например названий операторов, используется анимация set. В этом случае изменения происходят скачком.

Таблица 11.12.
№ Код Вид в браузере
11.12.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateFilter1.svg
     </desc>

<defs>
          <filter id="myfeGaussianBlur">
               <feGaussianBlur in="SourceGraphic" stdDeviation="0">
               <animate attributeName="stdDeviation" 
         from="0" to="15" dur="10s"
                       repeatCount="indefinite"/>
               </feGaussianBlur>
          </filter>
     </defs>
     <g id="myImage" style="fill:red;stroke:none" filter="url(#myfeGaussianBlur)">
          <rect x="30" y="30" width="140" height="40"/>
     </g>


</svg>
Листинг 11.12.1. Пример animateFilter1.svg
Описание
Анимация animate атрибута stdDeviation фильтра feGaussianBlur
№ Код Описание
11.12.2 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateFilter2.svg
     </desc>

<defs>
          <filter id="myFilter" filterUnits="userSpaceOnUse"
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="over">
     <set attributeName="operator" to ="in" 
         begin="2s" dur="2s"/>
     <set attributeName="operator" to ="out" 
         begin="prev.end" dur="2s"/>
     <set attributeName="operator" to ="atop" 
         begin="prev.end" dur="2s"/>
     <set attributeName="operator" to ="xor" 
         begin="prev.end" dur="2s"/>
</feComposite>
</filter>

<image id="MyImage1" x="10" y="10" width="186" height="125" 
         xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10" width="186" height="125" 
         xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)"/>

</svg>
Листинг 11.12.2. Пример animateFilter2.svg
Анимация set атрибута operator фильтра feComposite.
Вид в браузере.
№ Код Вид в браузере
11.12.3 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateFilter3.svg
     </desc>

<defs>
          <filter id="myFilter" filterUnits="userSpaceOnUse"
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' result='pict2'>
<animateColor attributeName="flood-color" 
         from="red" to="yellow" begin="2s" dur="8s" fill="freeze"/>
</feFlood>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<image id="MyImage1" x="10" y="10" width="186" height="125" 
         xlink:href="sea1.jpg"/>


</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)"/>

</svg>
Листинг 11.12.3. Пример animateFilter3.svg
Описание
Анимация animateColor атрибута flood-color фильтра feFlood.
№ Код Описание
11.12.4 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateFilter4.svg
     </desc>

<defs>
     <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feImage xlink:href="sun.png" x="20" y="20"
               width="372" height="250" 
               opacity="1.0" result="myImage3">
        <animateTransform attributeName="transform" 
                    attributeType="XML" type="translate"
                    from="20,20" to="250,20" 
                    begin="1s" dur="6s" fill="freeze"/>
      </feImage>
      <feImage xlink:href="#Picture4" result="myImage4"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
        <feMergeNode in="myImage3"/>
        <feMergeNode in="myImage4"/>
      </feMerge>
    </filter>
    <image id="Picture1" 
         xlink:href="sea1.jpg" x="20" y="20"
      width="372" height="250" opacity="1.0"/>
    <image id="Picture2" 
         xlink:href="sea2.jpg" x="20" y="20"
      width="372" height="250" opacity="0.5"/>

     <image id="Picture4" 
         xlink:href="boat.png" x="20" y="20"
      width="372" height="250" opacity="1.0"/>
  </defs>

 <rect   x="20" y="20" width="372" height="250"
      style="filter: url(#merge)"/>



</svg>
Листинг 11.12.4. Пример animateFilter4.svg
Анимация animateTransform типа translate фильтра feImage.
Вид в браузере
Дальше >>
< Лекция 10 || Лекция 11: 123456 || Лекция 12 >

Вопросы и ответы

вопросов: 0