If we have the full animation state specified for every animation step then one of the easiest things we can do is to change the speed of the animation by changing the increment, which is shown below.
Clicking on any of the speed buttons sets the animation increment by calling the setSpeed(speed) function at the bottom of the listing. Note that the current direction of animation, forwards or backwards, has to be preserved as well.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
var animationStep = 0; function doSomeStuffSetStep(step) { var numstep = Number(step); animationStep = numstep; doSomeStuff(numstep); } doSomeStuff(animationStep); //0 bcInitializeSlider(animationStep); //0 var animationIncrement = 1; //speed = 1 var requestId; function animateSomeStuff() { if ((animationStep >= 0) && (animationStep <= bcFinalActivity)) { doSomeStuff(animationStep); bcUpdateSlider(animationStep); } if ((animationStep < 0) || (animationStep > bcFinalActivity)) { if (animationStep > bcFinalActivity) { animationStep = bcFinalActivity; } else if (animationStep < 0) { animationStep = 0; } doSomeStuff(animationStep); bcUpdateSlider(animationStep); cancelAnimationFrame(requestID); } else { animationStep += animationIncrement; } requestId = window.requestAnimationFrame(animateSomeStuff); } animateSomeStuff(); function rerunClick() { animationStep = 0; doSomeStuff(animationStep); bcUpdateSlider(animationStep); animationIncrement = Math.abs(animationIncrement); animateSomeStuff(); } function backwardsClick() { animationStep = bcFinalActivity; doSomeStuff(animationStep); bcUpdateSlider(animationStep); animationIncrement = -Math.abs(animationIncrement); animateSomeStuff(); } function pauseClick() { cancelAnimationFrame(requestId); } function continueClick() { animateSomeStuff(); } function setSpeed(speed) { var mult = 1; if (animationIncrement < 0) { mult = -1; } animationIncrement = speed * mult; } |