Question

我正在使用CSS制作带有二维精灵表的动画。我能够使用动画属性为其设置动画。但是，它只会激活同一个角色中的角色，所以我想移动角色来创建从A点到B点的步行动画，第二行显示角色转弯并面向相反的一侧并开始行走。因此对于精灵的第二行，我希望在从第一行转换400px并将400px移回起点之后使角色保持其当前位置。有没有办法让CSS做到这一点，或者我必须将精灵表转换为1维才能执行此操作，或者我可以使用Javascript来执行此操作？

＆＃13;

div.c {
  background: url("https://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png");
  width: 108px;
  height: 140px;
  animation: x2 1.5s steps(8) infinite, y2 3s steps(2) infinite;
}

@keyframes x2 {
  0% {
    background-position-x: 0px;
    transform: translatex(0px);
  }
  100% {
    background-position-x: -864px;
    transform: translatex(400px);
  }
}

@keyframes y2 {
  0% {
    background-position-y: 0px;
  }
  100% {
    background-position-y: -280px;
  }
}

＆＃13;

<div class="c"></div>

＆＃13;

因此，如果我这样做动画开始，第一行中的前4帧工作正常，但是当它到达第二行时，图像传送回0px起点并翻译400px并且角色面向相反方向向后走。

Answer 1

您只能使用CSS实现动画。

CSS关键帧需要知道从哪里开始和到哪里结束。在0%是开始，在100%是动画的结束。如果你想让动画“循环”，你需要将动画的一半放在关键帧的前半部分和剩下的就在另一半里面。此外，在计算想要行进的距离时，您必须考虑精灵的宽度。

div.c {
  border-style: dotted;
  border-color: black;
  background: url("https://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png");
  width: 108px;
  height: 140px;
  animation: x2 1.5s steps(8) infinite, y2 3s steps(2) infinite;
}

@keyframes x2 {
  0% {
    background-position-x: 0px;
  }
  50% {
    background-position-x: -864px;
    transform: translatex(508px);
  }
  100% {
    background-position-x: 0px;
    transform: translatex(0px);
  }
}

@keyframes y2 {
  0% {
    background-position-y: 0px;
  }
  50% {
    background-position-y: -280px;
  }
}

<div class="c"></div>

2维精灵表向前和向后移动到起点

1 个答案: