Jeg har brukt et polygon med et animateTransform som barn.
Sirkelen i midten ligger utenfor transformasjonen.
Parameterne angir at vi skal animere et XML-element. Altrnativet er å bruke CSS.
Mer om dette senere. Vi har dessuten sagt at vi skal gjøre en rotasjon
fra 0 til 360 grader om punktet 0,0.
En rotasjon skal ta 10s og dette skal pågå til evig tid.
Starte en animasjon
Klikk på en av de røde propellbladene for å (re)starte animasjonen
Jeg tar utgangspunkt i eksempelet uten animasjonsnode.
Planen er å plante en slik node når jeg skal starte animasjonen.
Jeg kan gjøre dette på to måter: Jeg kan bruke innerHTML eller jeg kan konstruere en node med nødvendige attributter og egenskaper.
innerHTML
Dette kan vi gjøre svært enkelt med følgende javascript.
_demo3.js
// start animation
// parameter is csspath to polygon
var isOn3=false;
function startAnimation3(polyselect){
if(isOn3)
return;
isOn3=true;
var T='<animateTransform \
attributeType="XML"\
fill="freeze"\
attributeName="transform" type="rotate"\
from="0 0 0" to="360 0 0"\
dur="10s" repeatCount="indefinite"/>';
var poly=document.querySelector(polyselect);
poly.innerHTML+=T;
}
Konstruere element
Alternativet er å konstruere en node. Dette er litt mer involvert enn det
vi finner når vilage HTML-noder generelt.
Den noden vi bruker må være av en spesiell (SVG) typefor
at den skal ha de egenskapene vi trenger
Dette kan vi gjøre med følgende javascript.
_demo4.js
// parameter is csspath to polygon
var isOn4=false;
function startAnimation4(polyselect){
if(isOn4)
return;
isOn4=true;
var aelt = document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform');
aelt.setAttribute('attributeType','XML');
aelt.setAttribute("attributeName","transform");
aelt.setAttribute("type","rotate");
aelt.setAttribute("from","0 0 0");
aelt.setAttribute("to","360 0 0");
aelt.setAttribute("dur","10s");
aelt.setAttribute("repeatCount","indefinite");
aelt.setAttribute("fill","freeze");
var poly=document.querySelector(polyselect);
poly.appendChild(aelt);
aelt.beginElement();// start animation
}
Skru animasjon av og på
Det er rimelig klart at vi kan slå av animasjoner etter de samme resonnementene som vi har brukt over,
rett og slett ved å fjerne animasjonselementet.
Det blir imidlertid litt mer krevnede dersom vi skal kunne restarte animasjonen
på samme sted som vi stoppet den. Jeg har vridd til en løsning der jeg bruker Javascript til å huske
status på rotasjonen. Det er mangeandre måter å angripe dette på og
den løsningen du finner her er ikke neppe vanntett og muligens litt sårbar for
endringer i SVG-spesifikasjonen.
// must keep track of active time
var stopTime=0;
var startTime=0;
var accumTime=0;
// status
var isTurning=false;
// want to start animation
// parameter is csspath to animation element
function startAnimation(aniselect){
// not double
if(isTurning)
return;
isTurning=true;
var ani=document.querySelector(aniselect);
// how many angles have we rotated, in all
var rotationTime=parseFloat(ani.getAttribute("dur"));
var vWalked=360*accumTime/rotationTime;
while(vWalked > 360)
vWalked-=360;
// we start there and add 360
var fromvalue=''+vWalked+' 0 0';
var tovalue=''+(vWalked+360)+' 0 0';
// set attributes
ani.setAttribute("from",fromvalue);
ani.setAttribute("to",tovalue);
// start it
ani.beginElement();
startTime=ani.getCurrentTime();
}
// want to stop animation
// parameter is csspath to animation element
function stopAnimation(aniselect){
if(!isTurning)
return;
isTurning=false;
var ani=document.querySelector(aniselect);
// stop it
ani.endElement();
stopTime=ani.getCurrentTime();
accumTime+=stopTime-startTime;
}
