JavaScript animatie

(1)

1 mei 2016

JavaScript animatie

beweging

(2)

1 februari 2016 Bakker 2016

(3)

<!DOCTYPE HTML>

<html>

<head>

scene.add( skyBox );

href="/files/tutorial/browser/animation/animate.css">

function move(elem) { var left = 0 function frame() {

left++ // update parameters

elem.style.left = left + 'px' // show frame if (left == 100) // check finish condition clearInterval(id)

}

var id = setInterval(frame, 10) // draw every 10ms }

</script>

</head>

<body>

</div>

</body>

</html>

(4)

1 februari 2016 Bakker 2016 delay

Tijd tussen frames (in ms, 1/1000 second). Bijvoorbeeld, 10ms

duration

De uitvoertijd per een animatie moet (in ms) bijvoorbeeld 1000ms

start

De starttijd van de animatie; start = new Date.

timePassed

De tijd die verlopen is vanaf de start van de animatie

progress

Voortgang in animatie tijd dat al gepasseerd is. Op een frame bepaald als timePassed/duration.

Schaal is van 0 tot 1.

Bijvoorbeeld progress = 0.5 betekent dat de halve duration gebruikt is.

delta(progress)

Een functie welke de huidige animatie progressie weergeeft.

Bijvoorbeeld; De height property loopt van

Parameters beweging

(5)

Parameters beweging

(6)

Parameters beweging

(7)

Parameters beweging

(8)

Parameters beweging

(9)

Parameters beweging

(10)

Parameters beweging

(11)

(12)

Parameters beweging

(13)

Parameters beweging

(14)

Parameters beweging

(15)

Plotter

(16)

Totaal lineair

<!DOCTYPE HTML>

<html>

<head>

function move(elem) { var left = 0

function frame() {

left++ // update parameters

elem.style.left = left + 'px' // show frame // hier worden attributen aangepast

if (left == 100) // check finish condition clearInterval(id)

}

var id = setInterval(frame, 10) // draw every 10ms }

</script>

</head>

<body>

</div>

</body>

</html>

(17)

Totaal functies

<!DOCTYPE HTML>

<html>

<head>

<script src="animate.js"></script>

<script src="move.js"></script>

<script src="delta.js"></script>

<script src="step.js"></script>

</head>

<body>

<div class="example_block">LIN</div>LINEAIR

</div>

<div class="example_block">BOTS</div>BOTS of BOUNCE

</div>

<div class="example_block">ELASTIC</div>ELASTISCH

</div>

<div class="example_block">QUAD</div>EXPONENTIEEL of QUAD

</div>

</body>

</html>

(18)

De bewegingen

(19)

Animate.js

Move.js

(20)

delta.js

(21)