Question

我无法弄清楚如何将同一个Spritesheet与多个Sprite一起使用（每个怪物动画有4个Sprite）。我以为将它们放在不同的div ID中是可行的，但这似乎不可行。

此外，我使用的教程已有多年历史了-是否所有的-webkit -moz -ms -o都是必要的，而不仅仅是使用@keyframes和animation？还是有更好的方法呢？如果不需要的话，会减少很多时间，因为我将要处理很多精灵。

#monster {
  width: 88px;
  height: 88px;
  background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
  -webkit-animation: play .8s steps(4) infinite;
  -moz-animation: play .8s steps(4) infinite;
  -ms-animation: play .8s steps(4) infinite;
  -o-animation: play .8s steps(4) infinite;
  animation: play .8s steps(4) infinite;
}

@-webkit-keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -360px;
  }
}

@-moz-keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -360px;
  }
}

@-ms-keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -360px;
  }
}

@-o-keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -360px;
  }
}

@keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -360px;
  }
}

<div id="monster"></div>

Answer 1

首先，拥有unprefixed CSS animations

每个子画面帧均为90x90px，因此您将帧大小乘以帧数即可得出动画的转换量。为了能够缩放每个怪物，您将需要按百分比转换背景，为此，您需要知道Spritesheet的全长16849px。这样可以为您提供翻译百分比：translation in px / spritesheet length * 100 = translation percentage例如（后面是粗略的伪代码）：

第一个动画：
$ sprite_size：90px;
$ frames：4;
90 * 4 = 360
从0开始，到-360
翻译百分比= 360/16849 * 100 = 2.136625319

第二动画
$ start_pos：360；
$ translate_length：90 * 4 = 360;
$ start_pos + $ translate_length = 720
从-360开始，转到-720

考虑使用SCSS or SASS帮助您轻松计算动画。

.monster {
  width: 88px;
  height: 88px;
  background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.monster--pixie {
  animation: idle_pixie .8s steps(4) infinite;
}

.monster--fairy {
  width: 200px;
  height: 200px;
  animation: idle_fairy .8s steps(4) infinite;
}

/*
Total sprite length: 16849
First sprite
$sprite_size: 90px;
$frames: 4;
90*4=360
starts at 0, goes to -360
percentage to translate = 360/16849*100=2.136625319
*/
@keyframes idle_pixie {
  from {
    background-position: 0;
  }
  to {
    background-position: 2.136625319%;
  }
}

/*
Second sprite
360+360 = 720
starts at -360, goes to -720
*/
@keyframes idle_fairy {
  from {
    background-position: 2.136625319%;
  }
  to {
    background-position: 4.2732506382%;
  }
}

<div class="monster monster--pixie"></div>
<div class="monster monster--fairy"></div>

Answer 2

我使用了一些jQuery来演示针对不同的“怪物”使用相同的动画。 #monster1从一开始就是动画。单击按钮并添加类#monster2后，.monster开始。

更新：定义了其他动画类的其他类。

$("body").on("click", "button", function() {
  $("#monster2").addClass("monster2");
  $(this).remove();
});

.monster {
  width: 88px;
  height: 88px;
}

.monster1 {
  background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
  animation: playMonster1 .8s steps(4) infinite;
}

.monster2 {
  background-image: url("https://cdn.discordapp.com/attachments/423540996098228245/494950824963866635/16x16.png");
  animation: playMonster2 .8s steps(4) infinite;
}

@keyframes playMonster1 {
  from {
    background-position: 0px;
  }
  to {
    background-position: -360px;
  }
}

@keyframes playMonster2 {
  from {
    background-position: -360px;
  }
  to {
    background-position: -720px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="monster1" class="monster monster1"></div>
<div id="monster2" class="monster"></div>
<button>Start monster 2</button>

如何使用相同的Spritesheet在同一页面上具有多个CSS动画？

2 个答案: