Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Animation Example</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <canvas id="screen" width="320" height="240">
      <p>Sorry, this demo only works in browsers that support the canvas element.</p>
    </canvas>
​
    <script>%code%</script>
    <script>
    (function() {
      var screen = document.getElementById("screen");
      var context = (screen && screen.getContext) ? screen.getContext("2d") : null;
      var image = new Image();
      var animation = new AnimationData(
        [
          { x: 0, y: 0, w: 24, h: 24, length: 160 },
          { x: 24, y: 0, w: 24, h: 24, length: 160 },
          { x: 48, y: 0, w: 24, h: 24, length: 160 },
          { x: 24, y: 0, w: 24, h: 24, length: 160 }
        ],
        {
          repeats: true,
          keyframe: 0 
        }
      );
​
      var player = new AnimationPlayer(animation);
      
      // Looks like we're good to go!
      if(context !== null) {
        image.addEventListener('load', function () {
          setInterval(function() {
            context.clearRect(0, 0, 320, 240);
            player.update(16.666);
            context.drawImage(
              image, 
              player.frame.x,
                    player.frame.y,
              player.frame.w,
              player.frame.h,
              0,
              0,
              player.frame.w,
              player.frame.h);  
          }, 16.6666);
        }, false);
        image.src = "data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00H%00%00%00%18%08%03%00%00%00n%BDK%82%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%03%20iTXtXML%3Acom.adobe.xmp%00%00%00%00%00%3C%3Fxpacket%20begin%3D%22%EF%BB%BF%22%20id%3D%22W5M0MpCehiHzreSzNTczkc9d%22%3F%3E%20%3Cx%3Axmpmeta%20xmlns%3Ax%3D%22adobe%3Ans%3Ameta%2F%22%20x%3Axmptk%3D%22Adobe%20XMP%20Core%205.0-c060%2061.134777%2C%202010%2F02%2F12-17%3A32%3A00%20%20%20%20%20%20%20%20%22%3E%20%3Crdf%3ARDF%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%3E%20%3Crdf%3ADescription%20rdf%3Aabout%3D%22%22%20xmlns%3Axmp%3D%22http%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2F%22%20xmlns%3AxmpMM%3D%22http%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2Fmm%2F%22%20xmlns%3AstRef%3D%22http%3A%2F%2Fns.adobe.com%2Fxap%2F1.0%2FsType%2FResourceRef%23%22%20xmp%3ACreatorTool%3D%22Adobe%20Photoshop%20CS5%20Windows%22%20xmpMM%3AInstanceID%3D%22xmp.iid%3A0E29DD86A7E111DF9F12FADF779F3B19%22%20xmpMM%3ADocumentID%3D%22xmp.did%3A0E29DD87A7E111DF9F12FADF779F3B19%22%3E%20%3CxmpMM%3ADerivedFrom%20stRef%3AinstanceID%3D%22xmp.iid%3A0E29DD84A7E111DF9F12FADF779F3B19%22%20stRef%3AdocumentID%3D%22xmp.did%3A0E29DD85A7E111DF9F12FADF779F3B19%22%2F%3E%20%3C%2Frdf%3ADescription%3E%20%3C%2Frdf%3ARDF%3E%20%3C%2Fx%3Axmpmeta%3E%20%3C%3Fxpacket%20end%3D%22r%22%3F%3E%D7s%92%0C%00%00%00%12PLTE%FF%E4%A48%BC%FF%00p%EC%FF%FF%FF%05%05%05%FF%FF%FF%E9%D6B%DD%00%00%00%06tRNS%FF%FF%FF%FF%FF%00%B3%BF%A4%BF%00%00%01CIDATx%DA%8C%95Q%82%C4%20%08C%03%A6%F7%BF%F2%8A%A0%15u%EA%F6k%8A%F1%25%A8u%F0%5C%1F%92w%D1%83%3BG%E4%3F(%DC%8C%8D%A3%AA%BC%E5%C4%C5%B8%D6%8C%B3%9169%BE%8D%A9%5E_Gv9.%C6%1Au%15~%E7%C4%A7%F1%C3%A2ZJA%06%9D%E4%D8%8CS%E7%2C%04i%24%99%EA%A7%9C%D8%8C%25M%19%20%AB%7F%E5%C4fl%A9%DF)(%B0)%0D4f%A5%9C%EC%20%FB%99%8D%E7%DE%ADN%3Ag%90%92%3C%1A%40%9B%96%8C%A9%99d%8F%95'P%97%5B-%C4%0E%9A%8D%EBK%02%B5%E7%9C%B3%D1%C36%12%C90%5E%40%F4%A6%98b%1A%A4%A6%F7%81P%A3M%F3%0A%5BR%A6%EF%A8%8Ez%1C%CEp%F3%EE%AB6%40A%F2%BA%F7%B9%1D%E2e%D9%E2%0CUSir%C6%F6%B3%9D%07%8A%8F%93%CB%F9%A6PS%AD%83%8C%A3%0C%3D%DE%2B%C1%B7%20%AFF%80%D2!%ED%1B%E0%CA%BE%C9%98%3Fh%0B%1B%C1%F2%3CYH%DD%B5%AD%AE%EB1%7F%88%C2H%B56%B7%B3%FB%06%0D%3D%92%D8V%CARq%BBM%16%D2%E8%3F%96%E9mm%9C%87%E3%8D%3BF%F7%F7%AEG%DA%08%3D_%F2k%A0%93%1Ay%1F%F8%EB%0F)%0D%9D%D4%7F%02%0C%00S%08%19%BFz%1B%1AI%00%00%00%00IEND%AEB%60%82";
      }
    }());
    </script>
  </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers