dougTesting.net : Winwheel.js tutorial: #11 Animation Introduction and Spinning Basics

Winwheel.js tutorial: #11 Animation Introduction and Spinning Basics

In this tutorial I will cover the most common sort of animation you will want to do with your winning wheel; spinning it to a stop, and explain the basics of the animation system.

Animation System Overview

The animation system in the Winwheel library uses Greensock's Animation Platform which is a powerful animation system with many features including an animation loop using requestAnimationFrame() time based animations, and "easing" which allows for nice spinning slowdown effects.

I have created a wrapper around the GreenSock animation functions so you can simply set a few values for the animation in the parameters passed to the Winwheel constructor and then call the startAnimation() function when it is time to spin the wheel. More advanced users wanting to do complex animations may wish to learn how GreenSock's animation platform works, but for just spinning a wheel continuously or to a stop it's pretty easy using the Winwheel animation properties.

Note that the Greensock animation platform is not part of Winwheel library and you must download and include the file(s) in your web page separately in order for Winwheel Library to use it. Please see more about the Greensock Animation platform below.

Including the Greensock Animation Platform

You need to download or include via the GreenSock CDN TweenMax.js as this contains the full suite of animation tools such as all the easings and also the ability to YoYo and do other cool things. The TweenLight version does not contain all of the things we want to use when spinning or otherwise animating the winning wheels.

To get TweenMax click this link and click the download button to the top-right of the screen, there are 2 options, either include from the CDN or download from github, either option is fine, its up to you.

Note on GreenSock's Licence: TweenMax and the other GreenSock animation libraries are free to use in most cases except in certain commercial applications where you charge end users to buy or use the product you have created. Please double-check the licence details on the GreenSock site to ensure that what you plan to use it for falls under the "no charge" license, or if you will need to purchase a business licence before going "live" with your creation.

Spinning a Wheel

To spin a wheel to a stop you pass some animation parameters in to the Winwheel constructor, then when it is time to spin the wheel call the startAnimation() function on the wheel object. The bare minimum you should probably specify is the type of spin, duration, and number of spins (complete 360 degree rotations) the wheel is to do in that time.

    <script>
    // Create wheel objects.
    let theWheel = new Winwheel({
        'numSegments'    : 4,
        'outerRadius'    : 170,
        'segments'       :
        [
            {'fillStyle' : '#eae56f', 'text' : 'Prize One'},
            {'fillStyle' : '#89f26e', 'text' : 'Prize Two'},
            {'fillStyle' : '#7de6ef', 'text' : 'Prize Three'},
            {'fillStyle' : '#e7706f', 'text' : 'Prize Four'}
        ],
        'animation' :                   // Note animation properties passed in constructor parameters.
        {
            'type'     : 'spinToStop',  // Type of animation.
            'duration' : 5,             // How long the animation is to take in seconds.
            'spins'    : 8              // The number of complete 360 degree rotations the wheel is to do.
        }
    });
    </script>

    // Then call the startAnimation function when you want the wheel to start spinning.
    // This might be when the user clicks a "Spin" Button.
    <button onClick="theWheel.startAnimation();">Spin the Wheel</button>

Reset

For now the only other thing to note is that the spinToStop function by default picks a random place for the wheel to stop around the 360 degrees which is added to the number of spins you specify. If you want to specify where the wheel stops take a look at tutorial #14 Setting the Prize to be won before spinning.

To do something once the spinning has stopped take a look at tutorial #13 Getting the segment (prize) pointed to.

The next tutorial looks at the animation system and options in more detail for advanced users.

Previous:
< #10 Prize Pointers and Wheel Backgrounds

Next:
#12: Animation - More Details >