search

zarocknz / javascript-winwheel

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

Is there a option to animate pointer on Fortune wheel ? #72

Open AshokRamaraja opened 5 years ago

AshokRamaraja commented 5 years ago

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.

shankara-subramani commented 4 years ago

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

Please help.

zarocknz commented 4 years ago

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.

masoumii commented 11 months ago

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.