zarocknz / javascript-winwheel

Create spinning prize wheels on HTML canvas with Winwheel.js
http://dougtesting.net
MIT License
524 stars 362 forks source link

Manually stop the wheel #89

Closed DimpleApptrait closed 4 years ago

DimpleApptrait commented 4 years ago

I do have start and stop button and on top using the stopAnimation function which stops the wheel same movement. Is there any way to stop the wheel with animation? I tried to slow the wheel by setting the spin property. But it didn't work.

function stopWheel() { theWheel.pauseAnimation(); theWheel.animation.spins = theWheel.animation.spins - 1; theWheel.resumeAnimation(); console.log("Spin count :" + theWheel.animation.spins); if(theWheel.animation.spins > 0) { setTimeout(stopWheel, 1000) } else { theWheel.stopAnimation(false); wheelSpinning = false; } }

zarocknz commented 4 years ago

Hi,

Winwheel.js uses TweenMax.js from Greensock for the animations. When the startAnimation() function is called Winwheel.js configures the TweenMax animation properties using the properties of the wheel and then plays the animation.

Pausing the animation and adjusting a property of the Winwheel does not change the animation configuration. You will need to stop the animation completely with theWheel.stopAnimation(), change the properties such as the number of spins, and then start the animation again.

For example..

function stopWheel() {
    theWheel.stopAnimation();
    theWheel.animation.spins = theWheel.animation.spins - 1;
    theWheel.startAnimation();
}

Regards, DouG