0

我正在写一个 lo-fi SGV 选择你自己的冒险在论坛上发布。我正在尝试为道路标记设置动画以模拟向前行驶，但我无法弄清楚如何通过 JavaScript 操纵 Y 轴。目前我有：

<!DOCTYPE html>
<html>
    <!-- Decide if you trust the driver. If you do, comment yes, if not, comment no. This will change the way the story progresses... -->
    <head>
        <title>Lost on an Alien Planet. Episode One: A New Moon. </title>
    </head>
    <body>
      <svg width="550" height="550">
        <rect x="0" y="0" width="550" height="220" fill="black" />
        <circle id="moon" cx="175" cy="120" r="100" stroke="#ee1015" stroke-width="2" fill="#ff1519" />
        <circle id="top_asteroid" cx="290" cy="50" r="17" stroke="grey" stroke-width="2" fill="#313131" />
        <circle cx="220" cy="110" r="20" stroke="grey" stroke-width="2" fill="#131313" />
        <circle cx="20" cy="200" r="15" stroke="grey" stroke-width="2" fill="#242525" />

        <rect x="0" y="219" width="550" height="282" fill="blue" />
        <polygon points="100,500 180,220 346,220 426,500"
        style="fill:black;stroke:black;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,220 265,220 265,240 250,240"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,250 265,250 265,270 250,270"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,280 265,280 265,300 250,300"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,310 265,310 265,330 250,330"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,340 265,340 265,360 250,360"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,370 265,370 265,390 250,390"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,400 265,400 265,420 250,420"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,430 265,430 265,450 250,450"
        style="fill:white;stroke:white;stroke-width:2" />
        <polygon class="roadmarking" id="base_roadmarking" points="250,460 265,460 265,480 250,480"
        style="fill:white;stroke:white;stroke-width:2" />
      </svg>

      <script>
          setInterval(function(){
              var marking = document.getElementById("base_roadmarking");
              var pos = 0;
              frame_first = true;
              elem_pos = 0;

              if(frame_first) {
                  elem_pos = marking.style.top;
                  pos += 10;
                  elem_pos = pos + 'px';
              }
              else {
                  elem_pos = marking.style.top;
                  pos -= 10;
                  elem_pos = pos + 'px';
              }

          }, 500);
      </script>

      <p>You wake from a dark dream to find yourself on an alien planet. Ahead is a red moon orbited by asteroids that seem to move with a disconcerting quickness. Your vehicle drives slowly toward the horizon. All around you are the sounds of strange wolf-like creatures howling. You are sitting in the passenger seat, unsure where your driver is taking you. But you trust him... at least, you think you trust him...</p>
    </body>
</html>

但它不起作用。如果可能的话，我想要一个使用原始 JavaScript 的非常简单的解决方案（例如，没有代码库和 HTML<animate>元素）。提前致谢！

4

1 回答 1

0

Javascript不会采用多个ID，请改用getElementsByClassName：
另外请使用rect代替poly（个人偏好），并尝试我显示的代码按下按钮“试试”动画

function run() {
 setInterval(function(){
 var marking = document.getElementsByClassName("roadmarking");
 var i = 0;
 for (i = 0; i < marking.length; i++) {
  frame_first = marking[i].y.baseVal.value; 
  var show= document.getElementById("show");
  //show.innerHTML = marking[i].y.baseVal.value;
  if(frame_first<500) {
   marking[i].y.baseVal.value += 10;
   }
  else {
   marking[i].y.baseVal.value -= 290;
  }
 }
},500);}
<html>
<!-- Decide if you trust the driver. If you do, comment yes, if not, comment no. This will change the way the story progresses... -->
<head>
    <title>Lost on an Alien Planet. Episode One: A New Moon. </title>
</head>
<body>
  <svg width="550" height="550">
    <rect x="0" y="0" width="550" height="220" fill="black" />
    <circle id="moon" cx="175" cy="120" r="100" stroke="#ee1015" stroke-width="2" fill="#ff1519" />
    <circle id="top_asteroid" cx="290" cy="50" r="17" stroke="grey" stroke-width="2" fill="#313131" />
    <circle cx="220" cy="110" r="20" stroke="grey" stroke-width="2" fill="#131313" />
    <circle cx="20" cy="200" r="15" stroke="grey" stroke-width="2" fill="#242525" />

    <rect x="0" y="219" width="550" height="282" fill="blue" />
    <polygon points="100,500 180,220 346,220 426,500"
    style="fill:black;stroke:black;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="490" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="220" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="250" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="280" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="310" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="340" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="370" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="400" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="430" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
    <rect class="roadmarking" id="base_roadmarking" x="250" y="460" width="15" height="20"
    style="fill:white;stroke:white;stroke-width:2" />
  </svg>

  <script>
    
  </script>
  <p id="show">You wake from a dark dream to find yourself on an alien planet. Ahead is a red moon orbited by asteroids that seem to move with a disconcerting quickness. Your vehicle drives slowly toward the horizon. All around you are the sounds of strange wolf-like creatures howling. You are sitting in the passenger seat, unsure where your driver is taking you. But you trust him... at least, you think you trust him...</p>
<br><button onclick="run()">Try it</button>
</body>
</html>

于 2017-05-17T16:23:59.560 回答