javascript animatie en bewegingen · animaties kunnen uitvoeren. de basis van animaties in...

Roc Zadkine

Javascript animatie en bewegingen

Door: K.Bakker

versie 2.0

Klant : Zadkine College Pagina 1 van 22 Projekt : AO4 27-5-2016

Onderwerp : javascript animaties

Dokument : werkboek_1_javascript_animaties_ned_v2.doc

mei 2016

distributielijst

versie historie

versie datum auteur Opmerkingen

1.0 2-2-2016 k.bakker




inhoudsopgave

1. Animatie 3

1.1 Voorbeeld 4

2. Animaties en de bewegingen 5

3. De algemene constructie van het animatie script 7

3.1 Voorbeeld 8

4. De bewegingen in wiskundige berekeningen. 9

4.1 Linear delta 9

4.2 Power of n 10

4.3 Circelbeweging of sinusbeweging 11

4.4 De boog beweging 11

4.5 Bots beweging (bounce) 12

4.6 Elastische beweging 12

5. easeIn, easeOut, easeInOut functies 13

5.1 easeOut 13

5.2 easeInOut 14

6. De plotter 16

7. Animatie kleur effecten 17

8. Maak een animatie waarbij een bal stuitert op de grond en doorrolt. 18

9. CSS transities 19

10. Bijlagen 20




1. Animatie

Een animatie vereist meestal een zogenaamd raamwerk, framework, waarbij het framework de animatie

uitvoert die geprogrammeerd is.

Het is echter ook mogelijk om een animatie te maken met alleen JavaScript , we noemen dit plain of pure

JavaScript. De techniek van een JavaScript is essentieel om te begrijpen hoe frameworks complexe

animaties kunnen uitvoeren.

De basis van animaties in JavaScript

Een JavaScript animatie is gebaseerd op het veranderen van de DOM element stylen van het canvas object.

Deze manipulaties gebeuren in volgorde en hebben een timings effect. Je krijgt dan het effect zoals in een

tekenfilm.

1 var id = setInterval(function() {

2 /* show the current frame */

3 if (/* finished */) clearInterval(id)

4 }, 10)

In bovenstaande code wordt door de functie setInterval een functie opgeroepen. Dit gebeurt om de 10 ms dus 100 frames

per seconde. Deze timings functie is ruim voldoene om beweging te simuleren. Het is niet verstandig om dit te verkorten

aangezien de CPU dan onnodig belast wordt. Een vertraging van 40 ms leidt al tot een snelheid van 24 frames per seconde

hetgeen dezelfde snelheid is als een film in de bioscoop.

`setInterval` in plaats van `setTimeout`

Het ligt voor de hand om een pauze te programmeren met setTimeout.

Deze oplossing is echter niet zuiver aangezien het JavaScript ook een bepaalde tijd nodig heeft om de opdrachten uit te

voeren. Door de timeout functie zou de frequentie van de frame update niet zuiver zijn. De functie setInterval zorgt ervoor

dat de gehele functie op vaste tijdstippen wordt uitgevoerd.




1.1 Voorbeeld

Hierbij wordt het element verplaatst door element.style.left van 0 tot 100px. De verplaatsing is 1px per

10ms.

<!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>




2. Animaties en de bewegingen

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 0% naar 100%.

Er volgt een linaire waarde toename.

Waarden:

progress = 0 -> height = 0%

progress = 0.2 -> height = 20%







Bij niet lineaire toename maar een exponentiele , dus langzame progressie en op het einde een versnelde

toename. Hierdoor is de hoogte op de helft van de tijd bijvoorbeeld 25%.

Waarden:






delta(progress) is de functie die de tijdwaarde van progress koppelt aan de aan de animatie progresse ‘delta’

De animatie progressie is niet de waarde van ‘height’ maar een getal tussen 0 en 1.

step(delta) Deze functie neemt de waarde van delta en past dit toe.

Voor het voorbeeld van de property height

function step(delta) {

elem.style.height = 100*delta + '%'

}

Opsomming van de parameters:

delay is de setInterval waarde

duration is de tijdsduur van de animatie.

progress is de voortgang of progressie van 0 tot 1.

delta bepaalt de voortgang of het verschil in voortgang.

step geeft de opdracht voor de uitvoering.




3. De algemene constructie van het animatie script

Het object opts bevat de animatie beweging opties:

delay

duration

functie delta

functie step

function animate(opts) {

var start = new Date

var id = setInterval(function() {

var timePassed = new Date – start

var progress = timePassed / opts.duration

if (progress > 1) progress = 1

var delta = opts.delta(progress)

opts.step(delta)

if (progress == 1) {

clearInterval(id)

}

}, opts.delay || 10)

}




3.1 Voorbeeld

De functie move() geeft de uitvoering over aan animate waarbij alle benodigde parameters doorgegeven worden. ( delay , duration , delta , step ) delta = function(p) {return p}

Betekent dat de animatie voortgang is constant over de uitvoeringstijd van de animatie. step Gebruikt een mapping van 0..1, teruggegeven door delta op een interval van 0..to.

Dit wordt door gegeven aan de verschuiving op het object element.style.left.

Gebruik:

<div onclick="move(this.children[0], function(p) {return p})" class="example_path">


</div>

Maths is de functie in de voortgang van delta De animatie is een opeenvolging van veranderingen in de properties volgens een bepaalde regel. In dit geval

is delta de regel.

Verschillende waarden van delta maken de veranderingen ,en dus bewegingen, dynamischer in sneheid,

versnelling of vertraging.

01 function move(element, delta, duration) {

02 var to = 500

03

04 animate({

05 delay: 10,

06 duration: duration || 1000, // 1 sec by default

07 delta: delta,

08 step: function(delta) {

09 element.style.left = to*delta + "px"

10 }

11 })

12




4. De bewegingen in wiskundige berekeningen.

Wiskundige berekeningen worden dan ook geplaatst in de functie van delta.

In het voorbeeld wordt de beweging bepaald door verschillende berekeningen van delta.

4.1 Linear delta

function linear(progress) {

return progress

}

Voorbeeld: <div onclick="move(this.children[0], linear)" class="example_path">


</div>




4.2 Power of n

delta is progress in n-th degree.

De kwardraat functie

function quad(progress) {

return Math.pow(progress, 2)

}

Graph for the quadrantic function:

Als de factor n verhoogd wordt zal de snelheid accelereren. Voorbeeld van n = 5.




4.3 Circelbeweging of sinusbeweging

Functie gebruik; waarbij de beweging een golfbeweging krijgt.

function circ(progress) {

return 1 - Math.sin(Math.acos(progress))

}

4.4 De boog beweging

Genoemd naar de beweging van een pijl in een boog die eerst teruggaat en dan versneld

beweegt.

Functie:

function back(progress, x) {

return Math.pow(progress, 2) * ((x + 1) * progress - x)

}

Graph for x = 1.5:




4.5 Bots beweging (bounce)

Stel je voor dat een bal valt op de grond. De bal valt dan en botst weer terug naar boven door de

veerwerking totdat de energie in de veer opgebruikt is door de zwaartekracht.

bounce functie doet exact het ongekeerde maar heeft hetzelfde effect.

4.6 Elastische beweging

Deze functie is afhankelijk van een parameter x. Waarbij x de lengte van de veerweg aangeeft.

function elastic(progress, x) {

return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*x/3*progress)

}

Grafiek voor x=1.5:

function bounce(progress) {

for(var a = 0, b = 1, result; 1; a += b, b /= 2) {

if (progress >= (7 - 4 * a) / 11) {

return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2)

}

}

}




5. easeIn, easeOut, easeInOut functies

Een JavaScript framework voorziet meestal in een pakket aan delta functies.

Dat wordt dan gebruikt als “easeIn” of easeOut naar behoefte van de toepassing.

5.1 easeOut deltaEaseOut = 1 - delta(1 - progress)

Voorbeeld van een Bounce beweging in “easeOut” mode:

De easeOut beweging in grafiek vorm:

Het rode (onder) is de easeIn (normal) beweging , de groene of bovenste is de easeOut (time-reversed).

function bounce(progress) {

for(var a = 0, b = 1, result; 1; a += b, b /= 2) {

if (progress >= (7 - 4 * a) / 11) {

return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);

}

}

}

function makeEaseOut(delta) {

return function(progress) {

return 1 - delta(1 - progress)

}

}

var bounceEaseOut = makeEaseOut(bounce)




5.2 easeInOut

Een andere mogelijkheid is het delta effect met easeInOut.

De code om de waarde van delta aan te passen:

The code which transforms the delta:

if (progress <= 0.5) { // the first half of the animation) return delta(2 * progress)

} else { // the second half return (2 - delta(2 * (1 - progress))) }

function makeEaseInOut(delta) {

return function(progress) {

if (progress < .5)

return delta(2*progress) / 2

else

return (2 - delta(2*(1-progress))) / 2

}

}

bounceEaseInOut = makeEaseInOut(bounce)




Deze transformatie voegt feitelijk twee bewegingen samen van de grafieken easeIn en easeOut .




6. De plotter

Om het effect van de bewegingen te verduidelijken is een plotter-script geschreven waarmee je kunt

experimenteren .

<html> <head> <script src="delta.js"></script> <script> function prepare(canvas) { var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight) // clear canvas ctx.beginPath() // zero point is 20px from left, middle vertically // max is distance to 1 from zero. var zeroX = 20, zeroY = canvas.offsetHeight/2 var max = canvas.offsetWidth-zeroX-7 ctx.lineWidth = 1 ctx.font = 'normal 14px sans-serif' ctx.strokeStyle = '#000' ctx.strokeText('0', zeroX-15, zeroY+5) ctx.strokeText('1', zeroX+max, zeroY+5) ctx.strokeText('-1', zeroX-17, zeroY+max-8) ctx.strokeText('1', zeroX-15, zeroY-max+15) ctx.strokeStyle = '#808080' // arrow right ctx.moveTo(zeroX, zeroY) ctx.lineTo(zeroX+max, zeroY) ctx.lineTo(zeroX+max-5, zeroY-5) ctx.moveTo(zeroX+max, zeroY) ctx.lineTo(zeroX+max-5, zeroY+5) // arrow up ctx.moveTo(zeroX, zeroY) ctx.lineTo(zeroX, zeroY-max) ctx.lineTo(zeroX+5, zeroY-max+5) ctx.moveTo(zeroX, zeroY-max) ctx.lineTo(zeroX-5, zeroY-max+5) // arrow down ctx.moveTo(zeroX, zeroY) ctx.lineTo(zeroX, zeroY+max) ctx.lineTo(zeroX+5, zeroY+max-5) ctx.moveTo(zeroX, zeroY+max) ctx.lineTo(zeroX-5, zeroY+max-5) ctx.closePath() ctx.stroke() } function draw(canvas, f, color) { var ctx = canvas.getContext("2d"); var zeroX = 20, zeroY = canvas.offsetHeight/2 var max = canvas.offsetWidth-zeroX-7




7. Animatie kleur effecten

De functie highlight veroorzaakt een kleuren verandering in de animatie.

function highlight(elem) {

var from = [255,0,0], to = [255,255,255]

animate({

delay: 10,

duration: 1000,

delta: linear

step: function(delta) {

elem.style.backgroundColor = 'rgb(' +

Math.max(Math.min(parseInt((delta * (to[0]-from[0])) + from[0], 10), 255), 0) + ',' +

Math.max(Math.min(parseInt((delta * (to[1]-from[1])) + from[1], 10), 255), 0) + ',' +

Math.max(Math.min(parseInt((delta * (to[2]-from[2])) + from[2], 10), 255), 0) + ')'

}

})

}




8. Maak een animatie waarbij een bal stuitert op de grond en doorrolt.




9. CSS transities

Bijvoorbeeld verander de kleur met CSS color met een tijdsduur van 2s.

Werkt overigens niet altijd in iedere browser.

Gebruik

.animated {

transition-property: background-color;

transition-duration: 2s;

}

<style>

.animated {

transition: background-color 2s;

-webkit-transition: background-color 2s;

-o-transition: background-color 2s;

-moz-transition: 2s;

}

</style>

<div class="animated" onclick="this.style.backgroundColor='red'">

<span style="font-size:150%">Click to animate (no IE, no

FF<4)</span>

</div>




10. Bijlagen

Move lineair

<!DOCTYPE HTML> <html> <head> <link type="text/css" rel="stylesheet" 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>




Delta.js bewegingsfuncties

function elastic(progress){return Math.pow(2,10*(progress-1))*Math.cos(20*Math.PI*1.5/3*progress)}

function linear(progress){return progress}

function quad(progress){return Math.pow(progress,2)}

function quint(progress){return Math.pow(progress,5)}

function circ(progress){return 1- Math.sin(Math.acos(progress))}

function back(progress){return Math.pow(progress,2)*((1.5+ 1)*progress- 1.5)}

function sin(progress){return Math.sin(Math.PI*progress*2); }

function bounce(progress){for(var a=0,b=1,result;1;a+=b,b/=2){if(progress>=(7- 4*a)/ 11) {

return-Math.pow((11- 6*a- 11*progress)/ 4, 2) + Math.pow(b, 2);

}}}

function makeEaseInOut(delta){return function(progress){if(progress<.5)

return delta(2*progress)/ 2

else

return(2- delta(2*(1-progress)))/ 2

}}

function makeEaseOut(delta){return function(progress){return 1- delta(1- progress)}}

javascript animatie en bewegingen · animaties kunnen uitvoeren. de basis van animaties in...

Documents