Question

在制作游戏时，我需要帮助，因为当您放下一件物品时，我希望它会不断扩大和缩小以及不断扩大和缩小等等，以便使物体比地形更容易识别。

function growshrink() {
  //Code to make it grow and shrink
}

<!DOCTYPE html>
<html>
  <img src="myimage.png" onload="growshrink()"/>
</html>

Answer 1

我建议使用CSS为图像设置动画。如果要控制动画发生的时间，则可以使用JavaScript添加和删除类，例如：

function toggleAnim() {
  var img = document.getElementById("myImage");
  img.classList.toggle("growShrink")
}

    img {
  display: block;
}

.growShrink {
  -webkit-animation: animGrowShrink 1s linear 0s infinite alternate;
  animation: animGrowShrink 1s linear 0s infinite alternate;
}


/* For safari and chrome */

@-webkit-keyframes animGrowShrink {
  from {
    height: 100px;
    width: 100px;
  }
  to {
    height: 200px;
    width: 200px;
  }
  /* For other browsers */
  @keyframes animGrowShrink {
    from {
      height: 100px;
      width: 100px;
    }
    to {
      height: 200px;
      width: 200px;
    }

<button onclick="toggleAnim()">Toggle Animation</button>
<img id="myImage" src="http://placekitten.com/100/100" class="growShrink" alt="">

HTML：如何渲染对象大小不断重复

1 个答案: