Winwheel.js tutorial: #12 Spinning a Wheel - More Details
//++ This tutorial to be completed. In the meantime perahps look at the Animation class reference for some more details.
In this tutorial we will go in to more details of the animation properties and options for spinning a wheel and then do something to alert the user of the prize they have won when the spinning stops.
All GreenSock animations happen over time, so one thing you will always set is the duration of the animation via the duration parameter. The value is in seconds and can be a whole or decimal number.
Animation Types and Properties
There are a number of properties which control the animation, many you don't normally need to worry about because for each Type of animation there are sensible defaults and you would just specify one or two of these, but I will detail all of them here.
There are currently 4 animation types built in to Winwheel Library, use the type property to specify which one you want to use...
- spinOngoing - the wheel keeps spinning forever unless the animation is specifically paused or stopped
- spinToStop - the wheel spins over time to a stop, normally starting fast then slowing before stopping
- spinAndBack - the wheel spins in one direction and then back in other direction, possibly repeating
- custom - by itself this option does nothing; you must set at least one animation parameter besides the duration
As well as these main "Types" of animation, there are a number of other animation parameters that you should or could set which will affect how the animation works, these are...
- spins - the number of times the wheel is to rotate past 360 degrees
- repeat - times the animation is to repeat, set to -1 for animation to repeat forever
- easing - the easing function to use to slow or speed up the animation over time or keep it constant
- direction - clockwise or anti-clockwise (only used for spinning animations)
- stopAngle - the exact angle around the wheel to stop at (not used for spinOngoing type)
- yoyo - if set to true the animation will reverse back to the start after completing
- propertyName - for all spin animation types this is set to rotationAngle, for custom animations you could set this to any numeric property of the wheel, for example the outerRadius, centerX, centerY, to animate that aspect of the wheel.
Property defaults for each animation type
Lets have a look at what the defaults are for each of the animation types so you can get a feel for how the properties are used, you could then experiment with different values for them in your project and see how it affects the animation.
//++ to complete.
Spin to stop
Spin and Back
Spin ongoing
Custom (none are set, but what you could do - outer radius thing).
| < #11 Animation Introduction and Spinning Basics | #13: Getting the segment (prize) pointed to > |