Gå til innhold

Hvordan får jeg stoppet JavaScript-animasjonen min?

Rognalf

Anbefalte innlegg

Rognalf

Rognalf

Skrevet
Skrevet (endret)

Hei igjen! Jeg har prøvd å følge en JavaScript-animasjonstutorial ( http://www.schillmania.com/content/projects/javascript-animation-1/ ) og endt opp med et objekt som fortsetter bortover i det uendelige: http://www.stud.hig.no/~080521/jsanimasjon/js.html (klikk den store gule sirkelen)

 

Jeg har prøvd forskjellige løsninger, som for eksempel "hvis sirkelens venstreposisjon er mindre enn 1000px, utfør animasjonen", men dette gjør at den kun beveger seg ett hakk. Såvidt jeg har sett nevner ikke tutorialen noe om hvordan man stopper eller begrenser et element som er animert med denne metoden.

 

function animation() {
   circle.style.left = parseInt(circle.style.left)+20+'px';
   circle.style.top = parseInt(circle.style.top)+5+'px';
   circle.style.padding = parseInt(circle.style.padding)+1+'px';
   circle.innerHTML = "WEEE!"
   setTimeout(animation,20);
 }

Endret av Rognalf
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

Hva med å bruke setInterval i stedet for å bruke setTimeout, da kan du bruke clearInterval som vil stoppe animasjonen ;)

 

Samtidig burde du skille javascript og HTML, altså ikke bruker "onclick=animation()" i HTML dokumentet.

 

 

Her er løsningen min, helt sikkert ikke den beste. Prøv helst selv først da ;)

 

 

INDEX.HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <script src="anim.js" type="text/javascript"></script>
 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
 <title>JavaScript</title>

 <style type="text/css">
div#circle {
	background-color: yellow;
	-moz-border-radius: 500px;
	width: 400px;
	height: 400px;
	border: 10px solid black;
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 4em;
	color: white;
}
</style>
</head>

<body>
<a href="#" id="stop">STOP ANIMATION</a>
<a href="#" id="reset">RESET</a>
   <div id="circle"></div>
</body>

</html>

 

ANIM.JS

// Globale variabler, så de kan brukes av alle funksjonene.
var circle,
stopBtn,
resetBtn,
intv;


// Bruker window.onload i stedet for at man bruker javascript i HTML.
window.onload = function() {
// Elementene
circle = document.getElementById("circle");
stopBtn = document.getElementById("stop");
resetBtn = document.getElementById("reset");

// Plasserer sirkelen og legger på rett style.
reset();

// Event Handlers i stedet for å bruke javascript funksjoner i HTML.
       // Husk å bruk referanser til funksjoner i stedet for inkludere "()", for ellers

circle.onclick = startAnimation;
stopBtn.onclick = stopAnimation;
resetBtn.onclick = reset;
}

function startAnimation() {
// Gir setInterval en ID ved å plassere den i en variabel.
intv = setInterval("animation()", 20);
}

function animation() {
circle.style.left = parseInt(circle.style.left)+20+'px';
circle.style.top = parseInt(circle.style.top)+5+'px';
circle.style.padding = parseInt(circle.style.padding)+1+'px';
circle.innerHTML = "WEEE!";
}

function stopAnimation() {
// Stopper setInterval funksjonen, ergo, animasjonen stopper.
clearInterval(intv);
}

function reset() {
circle.style.left = '10px';
circle.style.top = '20px';
circle.style.padding = '50px';
circle.innerHTML = "Sjaa paa meg!";
}

 

 

Lenke til kommentar
Rognalf

Rognalf

Skrevet
  • Forfatter
Skrevet

Hvis jeg bruker setInterval akselererer sirkelen noe voldsomt og krasjer nettleseren hvis jeg ikke oppdaterer i tide. Aller helst skulle jeg også sett at animasjonen stanser av seg selv etter en viss avstand eller tid. Jeg kan nok sikkert bruke "overflow-x: hide" på body i CSSen, men jeg vet ikke om det løser problemet.

 

Jeg har forøvrig all JS separat fra HTML i det lokale eksemplet mitt, men takk allikevel for et grundig forslag.

 

Et spørsmål dog: Hva er forskjellen mellom

intv = setInterval("animation()", 20);

og

var intv = setInterval("animation()", 20);?

 

Når skal man egentlig bruke "var"?

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...