open in new window

Demos : Tweener

Graphics Bitmaps EnterFrame Event Mouse Events Multitouch Keyboard Events Rendering Text Color Transform Custom Classes Playing Video Box2D Bézier Pseudo 3D Real 3D Water Surface Plasma Mandelbrot BunnyMark Tweener Spritesheet Resizable UI

Code:

<html>
<head>
     <script type="text/javascript" src="//lib.ivank.net/ivank.js"></script>
     <script type="text/javascript" src="//tweener.ivank.net/tw.js"></script>
     <script type="text/javascript">
          /*
               This is the demonstration of Tweener.js - http://tweener.ivank.net
               It randomly chooses the easing function "ef" from 40 available functions.
          */
          var stage;
          var balls = [];
          var efs = [];		// easing functions
          
          function Start()
          {
               stage = new Stage("c");
               var bd = new BitmapData("ball.png");
               
               for(var i=0; i<100; i++)
               {
                    var b = new Bitmap(bd);
                    stage.addChild(b);
                    balls.push(b);
               }
               
               for(var f in Tweener.easingFunctions) efs.push(f);
               stage.addEventListener(MouseEvent.MOUSE_DOWN, onMD);
               onMD();
          }
          
          function onMD(e)
          {
               var sw = stage.stageWidth-100;
               var sh = stage.stageHeight-100;
               var r = Math.random;
               var ef = efs[Math.floor(r()*40)];
               
               //  We can tween position, scale, rotation, alpha 
               //  or any other numerical property of any JS object.
               for(var i=0; i<balls.length; i++)
                    Tweener.addTween(balls[i], {x:r()*sw, y:r()*sh, transition:ef, time:1});
          }

     </script>
</head>
<body onload="Start();"><canvas id="c"></canvas></body>
</html>