Easel.js位图动画

Question

我正在使用Meteor和EaselJS制作相册查看器，它可以捕捉鼠标事件并让您在照片中水平滚动。作为演示，我将所有照片缩放为200x200尺寸，然后将它们加载到画布中。当我开始移动位图时，它们移动非常缓慢而且根本不顺畅。实现这一目标的最佳方法是什么？

if (Meteor.isClient) {

  var stageGlobal;
  var imagesLoaded = 0;
  var picfiles = ["believe.jpg", "bikes.jpg", "cart.jpg", "dust.jpg", "facecar.jpg", "fire1.jpg", "fire2.jpg", "flower.jpg", "flowe1.jpg", "grounds.jpg", "house.jpg", "jump.jpg", "love1.jpg", "love2.jpg", "love3.jpg", "people.jpg", "people2.jpg"];

  var pictures = [];
  var imageN = 0;

  var bitmaplist = [];
  var imageB = 0;

  Template.canvas.rendered = function() {

    stageGlobal = new createjs.Stage($("#mainCanvas").get(0));
    stageGlobal.snapToPixelsEnabled = true;

    init();
  }

  function init() {

    console.log("init");

    for (var i=0; i < picfiles.length-1; i++) {
      pictures[i] = new Image();
      pictures[i].src = "images/" + picfiles[i];
      pictures[i].onload = imageLoaded();
    }

  }

  function imageLoaded() {

    imagesLoaded++;    

    // check if all the images are loaded
    if (imagesLoaded == picfiles.length-1) {
      createBitMaps();
    }

  }

  function createBitMaps() {

    var bitmap;

    // track if canvas is full    
    var xpos = 0;
    var ypos = 0;

    for (var i=0; i<pictures.length-1; i++) {


      bitmap = new createjs.Bitmap(pictures[imageN++]);

      if (bitmap.getBounds()) {
        var widthAdd = bitmap.getBounds().width;
        var heightAdd = bitmap.getBounds().height;

        var hScale = 200/heightAdd;
        var wScale = 200/widthAdd;
        bitmap.setTransform(xpos,ypos,wScale,hScale);

        stageGlobal.addChild(bitmap);
        xpos = xpos + 210;
        ypos = ypos + 10;

        bitmaplist[imageB++] = bitmap;
      }


    }
    //stageGlobal.cache(0,0,1000,1000);

    // set the interval and add a listener
    createjs.Ticker.interval = 1;
    createjs.Ticker.addEventListener("tick", moveLayers);

  }

  function moveLayers() {
    for (var i=0; i<imageB; i++) {
      bitmaplist[i].x =  bitmaplist[i].x - 5;
    }

    stageGlobal.update();
  }


  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}