Tween.js - Bouncing Ball

Fiddle exploring how to create a bouncing ball using tween.js.

by shravanimmy

HTML

<script src="https://code.createjs.com/tweenjs-0.6.0.min.js"></script>
<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>
<script src="https://code.createjs.com/easeljs-0.8.0.min.js"></script>
<div class="page-header">
     <h1 id="navbar">Bouncing Ball</h1>

</div>
<div class="bs-component">
    <canvas id="fiddleCanvas" width="960" height="400"></canvas>
</div>

JavaScript

(function (app, $, undefined) {
    "use strict";

    var canvas;
    var stage;

    function init() {
        canvas = document.getElementById("fiddleCanvas");
        stage = new createjs.Stage(canvas);
        stage.autoClear = true;

        var ball = new createjs.Shape();
        ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
        ball.graphics.endFill();
        ball.x = 200;
        ball.y = -50;

        var tween = createjs.Tween.get(ball, {loop: true})
            .to({x: ball.x, y: canvas.height - 55, rotation: -360}, 1500, createjs.Ease.bounceOut)
            .wait(1000).call(handleComplete);

        stage.addChild(ball);

        createjs.Ticker.addEventListener("tick", stage);
    }

    function handleComplete(tween) {
        var ball = tween._target;

    }


    $(document).ready(function () {
        init();
    });


})(window.app = window.app || {}, jQuery)
/**
 * Created by e13542 on 5/8/15.
 */