Javascript Easel.js位图动画

我正在使用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
  });
}

---

为什么股票行情区间设置为1？这意味着您每秒要触发1000次阶段更新事件。20-50是一个很好的范围。我建议使用framerate属性而不是interval，或者将timingMode设置为Ticker.RAF，而使用监视器刷新而不是内部间隔。我只是想弄清楚为什么一切都进展得如此缓慢——不管你设置了什么。现在让我试试帧率设置。很遗憾，更改间隔或帧率没有帮助。您将其设置为什么？有样品吗？如果你有很多大图像，它可能会减慢速度，特别是在移动或旧机器上，但现代GPU应该能很好地处理这个问题。帧率是我能看到的唯一指标。