Javascript animatie en bewegingen

(1)

Roc Zadkine

(2)

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

(3)

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

(4)

Projekt : AO4 27-5-2016

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 varid = 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.

(5)

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>

</body>

</html>

(6)

Projekt : AO4 27-5-2016

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%

progress = 1 -> height = 100%

(7)

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:

 progress = 0 -> height = 0%

 progress = 0.2 -> height = 4%

 progress = 1 -> height = 100%

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

functionstep(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.

(8)

Projekt : AO4 27-5-2016

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)

}

(9)

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:

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

<divclass="example_block"></div>

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

(10)

Projekt : AO4 27-5-2016

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

functionlinear(progress) {

returnprogress }

Voorbeeld:

<divonclick="move(this.children[0], linear)"class="example_path">

<divclass="example_block"></div>

</div>

(11)

4.2 Power of n

delta is progress in n-th degree.

De kwardraat functie

functionquad(progress) { returnMath.pow(progress, 2) }

Graph for the quadrantic function:

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

(12)

Projekt : AO4 27-5-2016

4.3 Circelbeweging of sinusbeweging

Functie gebruik; waarbij de beweging een golfbeweging krijgt.

functioncirc(progress) {

return1 - 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:

functionback(progress, x) {

returnMath.pow(progress, 2) * ((x + 1) * progress - x) }

Graph for x = 1.5:

(13)

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.

functionelastic(progress, x) {

returnMath.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) }

} }

(14)

Projekt : AO4 27-5-2016

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)

(15)

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)

(16)

Projekt : AO4 27-5-2016

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

(17)

6. De plotter

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

<html>

<head>

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)

(18)

Projekt : AO4 27-5-2016

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) + ')' }

}) }

(19)

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

(20)

Projekt : AO4 27-5-2016

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>

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

</div>

(21)

10. Bijlagen

Move lineair

<!DOCTYPE HTML>

<html>

<head>

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>

(22)

Projekt : AO4 27-5-2016

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)}}