Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
JavaScript animatie beweging 1 mei 2016
2
Bakker 2016 1 februari 2016
3
<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
![<div onclick= move(this.children[0]) class= example_path >](http://slideplayer.nl/slide/16234733/95/images/3/%3Cdiv+onclick%3D+move%28this.children%5B0%5D%29+class%3D+example_path+%3E.jpg "<!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 februari")
4
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
5
Parameters beweging Bakker 2016 1 februari 2016
6
Parameters beweging Bakker 2016 1 februari 2016
7
Parameters beweging Bakker 2016 1 februari 2016
8
Parameters beweging Bakker 2016 1 februari 2016
9
Parameters beweging Bakker 2016 1 februari 2016
10
Parameters beweging Bakker 2016 1 februari 2016
11
Bakker 2016 1 februari 2016
12
Parameters beweging Bakker 2016 1 februari 2016
13
Parameters beweging Bakker 2016 1 februari 2016
14
Parameters beweging Bakker 2016 1 februari 2016
15
Plotter Bakker 2016 1 februari 2016
16
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
17
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
18
De bewegingen Bakker 2016 1 februari 2016
19
Animate.js Move.js Bakker 2016 1 februari 2016
20
delta.js Bakker 2016 1 februari 2016
21
step.js Bakker 2016 1 februari 2016
Verwante presentaties
