javascript-winwheel icon indicating copy to clipboard operation
javascript-winwheel copied to clipboard

Is there a option to animate pointer on Fortune wheel ?

Open AshokRamaraja opened this issue 5 years ago • 3 comments

I want to try animate the pointer when the wheel starts rotating. Pointer needs to tick each time it passes through each segment. I am planning to use the pointer as separate image. Kindly share your thoughts.

AshokRamaraja avatar Apr 23 '19 02:04 AshokRamaraja

I need this too. Is there anyway to achieve this?

Please help.

shankara-subramani avatar Dec 07 '19 04:12 shankara-subramani

There is no one-line option for this. But it should be possible combining a couple of existing features with some custom code...

You will need to draw the pointer on the canvas, please see this tutorial: http://dougtesting.net/winwheel/docs/tut10_pointers_and_backgrounds in particular the "Draw a triangle or other shape on the canvas" section. Create a function to draw your pointer.

Then use the feature explained in this tutorial http://dougtesting.net/winwheel/docs/tut19_playing_sounds_and_music "'Tick' sounds with callbackSound" and in the playSound() function set a variable so your code which draws the pointer draws it differently. For example as if it has been bumped by one of the pins. Then reset this variable after 1 second or so.

From there you can experiment with improving the animation, perhaps by animating the rotation of the pointer so it appears to swing out from the pin and then back to straight.

zarocknz avatar Dec 07 '19 11:12 zarocknz

I just added a custom img and positioned it absolute on top of the wheel, then used the callBackSound method to animate the pointer up and down based on how often pins touch the pointer.

masoumii avatar Dec 13 '23 08:12 masoumii