Animasjoner

Hva

Vi kan animere geometrien ved hjelp av animasjonselementer. I modulen Rotasjon ser vi litt nærmere på hvordan vi kan plante animasjoner i SVG-DOM. Nedenfor finner du noen grunnleggende eksempler.

Microsoft IE henger ikke med på de løsningens om er laget i dette materialet.

Vi forholder oss til følgende animasjonselementer som kan plasseres inne i et grunnelement(rect,circle osv.) eller i et g(ruppe)-element:

animate. For å animere en bestemt attributt.
animateTransform. For å animere transformasjoner som skalering og rotasjon
animateMotion. For å animere at elementet følger en path

Hver av disse har en rekke attributter for å styre animasjonen. Vi kommer ikke innom alle mulige variater, men har ambisjoner om å vise hovedtrekkene og peke på noen ikke helt opplagte effekter (eller mange på sådanne). Denne delen av SVG er relativt komplisert.

animate

Et enkelt eksempel:

<svg id="svg0" width="400" height="60" style="background:beige"
     viewPort="0 0 400 60" version="1.1">    
    <circle cx="20" cy="30" r="20" fill="red">
        <animate  
                 attributeType="XML"
                 attributeName="cx"
                 from="20"
                 to="350"
                 dur="30s"
                 repeatCount="indefinite"
                 begin="5s"/>
    </circle>    
</svg>

Attributtene er i hovedsak selvforklarende: Vi vil at animasjonen skal starte 5s etter at siden er lastet, at den skal vare i 30s og flytte sirkelen fra cx=20 til cx=3050, og dette skal holde på i "evig" tid. Merk at attributeType kan ha verdiene XML, CSS eller auto.

Vi forsøker å kontrollere animasjonen med Javascript:

<svg id="svg1" width="400" height="60" style="background:beige"
     viewPort="0 0 400 60">    
    <circle cx="20" cy="30" r="20" fill="red">
        <animate id="a1" attributeType="XML"
                 attributeName="cx"
                 to="20"
                 dur="3s"
                 repeatCount="1"
                 begin="indefinite"
                 fill="freeze"/>
    </circle>    
</svg>

Merk at attributten fill sørger for at elementet forblir der animasjonen slutter.

Javascriptkoden er slik:

function goTo(newx){
    var ae=document.getElementById("a1");
    ae.setAttribute("from",ae.getAttribute("to"));
    ae.setAttribute("to",""+newx);
    ae.beginElement();
}

animateTransform

Et enkelt eksempel:

<svg id="svg2" width="150" height="150" style="background:beige"
     viewPort="0 0 150 150">
    
    <rect x="50" y="50" width="50" height="50" fill="red">
        <animateTransform 
                 attributeType="XML"
                 attributeName="transform"
                 type="rotate"
                 from= "0 75 75"
                 to=   "360 75 75"
                 dur=  "3s"
                 repeatCount="indefinite"
                 begin="0s"
                 />
    </rect>    
</svg>

Attributtene to of from angir at vi skal animere fra 0 til 360 grader om punktet 75,75. (Du kan få ganske pussige effekter dersom du leker med grader og har forskjellig rotasjonssentrum i from og to.)

Vi forsøker å konytrollere denne transformasjonen med Javascript.

<svg id="svg2" width="400" height="150" style="background:beige"
     viewPort="0 0 400 150" >
    
    <text id="t1" x="150" y="80"       
          font-family="Verdana" font-size="20" 
          text-anchor="middle"
          fill="blue" stroke="none">
          <animateTransform id="ta1" 
                 attributeType="XML"
                 attributeName="transform"
                 type="rotate"
                 from= "0 150 80"
                 to=   "0 150 80"
                 dur=  "2s"
                 repeatCount="1"
                 begin="indefinite"
                 fill="freeze"
                 />
                 Dette er teksten
    </text>    
</svg>

Javascriptkoden er slik:

function rotateT(addV){
    var ta=document.getElementById("ta1");
    var fromvals=ta.getAttribute("from").split(" ");
    var tovals=ta.getAttribute("to").split(" ");
    ta.setAttribute("from",ta.getAttribute("to"));
    var newV=parseInt(tovals[0])+addV;
    ta.setAttribute("to",""+newV+' '+tovals[1]+' '+tovals[2]);
    ta.beginElement();
}

animateMotion

Her definerer vi en path og vi lar et element følge denne stien.

<svg id="demo4" width="200" height="200"  viewBox="0 0 200 200" 
     style="background:beige" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- The epath we will follow-->
    <path id="path1" d="M10,190 C 70,-10 130,-10 190,190"
        fill="none" stroke="blue" stroke-width="2"  />    
    <!-- moving circle -->
    <circle cx="" cy="" r="10" fill="red">
        <animateMotion dur="10s" repeatCount="indefinite">
           <mpath xlink:href="#path1"/>
        </animateMotion>
    </circle>
</svg>

Programmert

Vi kan selvsagt også lage våre egne animasjoner ved hjelp av tidsstyring med Javascript

<svg id="svg1" width="400" height="100" viewPort="0 0 400 100" 
    style="background:beige">    
    <circle id="circle1" cx="50" cy="50" r="20" fill="red">
    </circle>    
</svg>

Javascriptkoden er slik:

var timerFunction = null;
var dx=2;
var dt=20;//ms
function startAnimation() {
    if(timerFunction == null) {
        timerFunction = setInterval(step, dt);
    }
}
function stopAnimation() {
    if(timerFunction != null){
        clearInterval(timerFunction);
        timerFunction = null;
    }
}
function step() {
    var circle = document.getElementById("circle1");
    var x = circle.getAttribute("cx");
    var newX = dx + parseInt(x);
    // change direction
    if((newX > 380)||(newX < 20) )
        dx = -dx;
    newX+=dx;        
    circle.setAttribute("cx", newX);
}