JavaScript animatie beweging 1 mei 2016
Bakker 2016 1 februari 2016
<div onclick="move(this.children[0])" class="example_path"> <!DOCTYPE HTML> <html> <head> scene.add( skyBox ); href="/files/tutorial/browser/animation/animate.css"> <script> 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 onclick="move(this.children[0])" class="example_path"> <div class="example_block"></div> </div> </body> </html> Bakker 2016 1 februari 2016
Parameters beweging 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 Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Parameters beweging Bakker 2016 1 februari 2016
Plotter Bakker 2016 1 februari 2016
Totaal lineair <!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" href="animate.css"> <script> 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 onclick="move(this.children[0])" class="example_path"> <div class="example_block"></div> </div> </body> </html> Bakker 2016 1 februari 2016
Totaal functies <!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" href="animate.css"> <script src="animate.js"></script> <script src="move.js"></script> <script src="delta.js"></script> <script src="step.js"></script> </head> <body> <div onclick="move(this.children[0], linear)" class="example_path"> <div class="example_block">LIN</div>LINEAIR </div> <div onclick="move(this.children[0], bounce)" class="example_path"> <div class="example_block">BOTS</div>BOTS of BOUNCE <div onclick="move(this.children[0], elastic)" class="example_path"> <div class="example_block">ELASTIC</div>ELASTISCH <div onclick="move(this.children[0], quad)" class="example_path"> <div class="example_block">QUAD</div>EXPONENTIEEL of QUAD </body> </html> Totaal functies Bakker 2016 1 februari 2016
De bewegingen Bakker 2016 1 februari 2016
Animate.js Move.js Bakker 2016 1 februari 2016
delta.js Bakker 2016 1 februari 2016
step.js Bakker 2016 1 februari 2016