只运行一次精灵表，createjs

Question

我想知道是否有人可以帮助我制作我使用 createjs 库制作的 spritesheet 动画。所以我有一个狐狸的角色，我想在用户打开页面后立即加载。我让它运行正常，它一遍又一遍地重播，但我只希望它运行一次。有没有办法停止它或事件监听器会在动画到达最后一帧时停止动画？任何帮助将非常感激。谢谢！

  function projectFox() {

    createjs.Ticker.addEventListener("tick", stage);
    createjs.Ticker.setFPS(8);
    foxanimation();

    function foxanimation() {

    var data = {

    "images": ["images/foxes.png"],
    "frames": [

         [2, 2, 833, 833], 
         [2507, 837, 833, 833], 
         [3342, 1672, 833, 833],
         [3342, 2507, 833, 833], 
         [4177, 837, 833, 833], 
         [5012, 837, 833, 833], 
         [4177, 1672, 833, 833], 
         [4177, 2507, 833, 833], 
         [5012, 1672, 833, 833], 
         [5012, 2507, 833, 833],
         [2, 837, 833, 833], 
         [2, 1672, 833, 833], 
         [2, 2507, 833, 833], 
         [837, 2, 833, 833], 
         [837, 837, 833, 833], 
         [837, 1672, 833, 833], 
         [837, 2507, 833, 833], 
         [1672, 2, 833, 833], 
         [1672, 837, 833, 833], 
         [1672, 1672, 833, 833], 
         [1672, 2507, 833, 833], 
         [2507, 2, 833, 833], 
         [2507, 1672, 833, 833], 
         [2507, 2507, 833, 833], 
         [3342, 2, 833, 833], 
         [4177, 2, 833, 833], 
         [5012, 2, 833, 833], 
         [3342, 837, 833, 833]  

    ],

    "animations": {

            "start":{frames:[0, 1, 2, 3, 4, 5, 5, 5, 5, 5, 6, 1, 0]}, 
            "blink":{frames:[0, 7, 8, 7, 0]},
            "sleep":{frames:[0, 9, 10, 11, 12, 0]},
            "where":{frames:[0, 13, 14, 15, 16, 17, 18, 13, 0]},
            "love":{frames:[0, 19, 20, 21, 22, 23, 24, 23, 22, 0]},
            "tail":{frames:[0, 25, 0, 26, 27, 0, 25, 0, 26, 27, 0]}

    }
    };

   var spritesheet = new createjs.SpriteSheet(data);
   var intro = new createjs.Sprite(spritesheet,'start'); 

   var introBounds = intro.getBounds();
   intro.regX = introBounds.width/2;
   intro.regY = introBounds.height/2;
   intro.scaleX=0.5;
   intro.scaleY=0.5;
   intro.x = stageW/2;
   intro.y = stageH/2;
   intro.cursor = "pointer";

   stage.addChild(intro);

   stage.update();
   }

Answer 1

你可以这样做

function projectFox() {

createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.setFPS(8);
foxanimation();

function foxanimation() {

var data = {

"images": ["images/foxes.png"],
"frames": [

     [2, 2, 833, 833], 
     [2507, 837, 833, 833], 
     [3342, 1672, 833, 833],
     [3342, 2507, 833, 833], 
     [4177, 837, 833, 833], 
     [5012, 837, 833, 833], 
     [4177, 1672, 833, 833], 
     [4177, 2507, 833, 833], 
     [5012, 1672, 833, 833], 
     [5012, 2507, 833, 833],
     [2, 837, 833, 833], 
     [2, 1672, 833, 833], 
     [2, 2507, 833, 833], 
     [837, 2, 833, 833], 
     [837, 837, 833, 833], 
     [837, 1672, 833, 833], 
     [837, 2507, 833, 833], 
     [1672, 2, 833, 833], 
     [1672, 837, 833, 833], 
     [1672, 1672, 833, 833], 
     [1672, 2507, 833, 833], 
     [2507, 2, 833, 833], 
     [2507, 1672, 833, 833], 
     [2507, 2507, 833, 833], 
     [3342, 2, 833, 833], 
     [4177, 2, 833, 833], 
     [5012, 2, 833, 833], 
     [3342, 837, 833, 833]  

],

"animations": {

        "start":{
                frames:[0, 1, 2, 3, 4, 5, 5, 5, 5, 5, 6, 1, 0],
                 next: false
                  }, 

        "blink":{
               frames:[0, 7, 8, 7, 0],
               next: false
               },

        "sleep":{
               frames:[0, 9, 10, 11, 12, 0],
               next: false
               },

        "where":{
               frames:[0, 13, 14, 15, 16, 17, 18, 13, 0],
               next: false
              },

        "love":{
              frames:[0, 19, 20, 21, 22, 23, 24, 23, 22, 0],
              next: false
               },

        "tail":{
             frames:[0, 25, 0, 26, 27, 0, 25, 0, 26, 27, 0],
              next: false
             }

}
};



var spritesheet = new createjs.SpriteSheet(data);
   var intro = new createjs.Sprite(spritesheet,'start'); 

   var introBounds = intro.getBounds();
   intro.regX = introBounds.width/2;
   intro.regY = introBounds.height/2;
   intro.scaleX=0.5;
   intro.scaleY=0.5;
   intro.x = stageW/2;
   intro.y = stageH/2;
   intro.cursor = "pointer";

   stage.addChild(intro);

   stage.update();
   }