Winwheel.js class reference: Animation


The animation class contains the properties used in Winwheel animations. A Winwheel object will only have one animation property of this class.


The properties of an animation are normally set in the JSON structure passed to the Winwheel object at time of its creation. They accessed via the animation property of the Winwheel, for example Winwheel.animation.type = 'spinToStop';


One of Winwheel.js features is you can add any additional properties you require to an object of the animation class including passing them in the JSON structure at time of creation, which may be handy if you are creating your own custom animations.


Note! Winwheel.js requires GreenSock's TweenMax.js in order to animate. This is not included in the Winwheel.js download so before the animations will work you need to download or otherwise include it in your HTML page.


Properties


Note that in most cases to use the built in spinning animations you only need to set the type, duration, and maybe the direction as there are what I think sensible defaults for the other properties which make up the animation. It's only for custom animations you will need to specify most of the properties yourself.


For examples of the use of these properties please refer to tutorials #11 Animation Introduction and Spinning Basics and in particular #12 Animation - More Details which looks at these in detail.


Name Description Default
type The type of animation. Supported types are: spinOngoing (continuous), spinToStop, spinAndBack, custom. spinOngoing
direction Used for spinning animations, the direction of spin 'clockwise' or 'anti-clockwise'. clockwise
propertyName The name of the winning wheel property to be affected by the animation. For spinning style animations this will be rotationAngle, for custom animations you could set this to something else for example outerRadius if you wanted to animate the size of the wheel.

GreenSock's TweenMax.js can animate any numeric property over time. 		null
propertyValue The value the property is to be set to at the end of the animation. For example, in a custom animation of the size of the wheel with outerRadius as the propertyName, if you want the the value of that to be 300 at the end of the animation then set propertyValue here to 300. null
duration The time the animation should take in seconds. For example if you want the animation to take 5 seconds then specify 5. 10
yoyo Set this to true if at the end of the animation you want the animation to reverse itself and return things to how they were at the beginning. false
repeat The number of times the animation is to repeat. -1 will cause the animation to repeat forever. If left null, this is set differenly for each type of animation. For spinToStop this is 0, spinOngoing is -1 (repeat forever), and spinAndBack is 1 which allows the animation to reverse. null
easing The easing function to use over the course of the animation. To see the available easing functions and get help picking one you can use GreenSock's Ease Visualizer. If left null, this is another property set to different values depending on the type of animation selected. spinOngoing is Linear.easeNone, spinToStop is Power3.easeOut, and spinAndBack is Power2.easeInOut null
stopAngle Used in spinToStop type animation. Numeric value 0-360 of where the wheel is stop at after spinning. null
spins Used in spinToStop animation. The number of complete 360 degree rotations the wheel is to make, i.e. a value of 10 will see the wheel spin completely around 10 times before stopping at the stopAngle specified by the property above. null
clearTheCanvas If set to true the canvas will be cleared before the wheel is re-drawn, false it will not. Null the animation will abide by the value of this property for the parent wheel object. Only might be set to false if you are drawing other things on the canvas which need to appear behind the wheel while it is spinning. null
callbackFinished JavaScript function to callback when the animation has finished. For example if you want to alert the user to the prize they have won, play a sound, or perform another action when the spinning has stopped you would create a function and then specify its name here. Returns the segment indicated under the pointer on the wheel so you can do something with that information, such as inform the user what prize they have won. null
callbackBefore Function to callback before the wheel is drawn each animation loop. Handy if you want to draw things on the canvas before the wheel is rendered you can put that code in a function and get it called from the wheel's animation loop. For example you might have a wheel background to rendered on the canvas. null
callbackAfter Function to callback after the wheel is drawn each animation loop. Useful if you have things to draw on top of the canvas for example prize pointers. null
callbackSound Function to callback during the animation if a sound (such as a "tick" sound) should be triggered because a segment or pin has passed the pointer. Used in conjunction with the property below.

See tutorial #19 Playing Sounds and Music for an example. 		null
soundTrigger The type of thing which the callbackSound feature above checks to determine if the sound should be triggered. Options are: "segment" (the default), and "pin" (some Pins need to defined for the wheel before this option will work).

See tutorial #19 Playing Sounds and Music for an example. 		segment


Methods


Constructor

Creates an object of the Animation class.


	 Winwheel.animation = new Animation(JSON options);

Normally you do not call the animation constructor directly, but instead specify the properties of it in the structure passed to the Winwheel object constructor. It then sends these on to the Animation constructor when creating one for itself. For example... 

<script>
    let theWheel = new Winwheel({
        'numSegments'  : 4,
        'segments'     :
        [
            {'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
            {'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
            {'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
            {'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
        ],
		'animation' :                   // Specify animation properties.
        {
            'type'     : 'spinToStop',
            'duration' : 5,
            'spins'    : 8
        }
    });
</script>


Previous:
< Segment Class Reference 		Next:
Pointer Guide Class Reference >