只运行一次精灵表，创建js

Running a sprite sheet only once, createjs

本文关键字：精灵创建 js 一次运行更新时间：2023-09-26

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

  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();
   }

你可以这样做

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();
   }