Question

我无法理解为什么我的两条线都停止了动画...... （如果它有助于我的CodePen here）

两条线最初从顶部开始动画，然后在底部完成。我想我的JS中可能有一些错误，但是不能为我的生活解决它。

我的HTML：

<body>
  <div class="canvas_container">
    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">

      <g>

        <path id="movingLine1" d="m 20,-10 l -20,600 z" class="white-line">

          <animate id="lineAnim1" attributeName="stroke-dashoffset" from="-70" to="0" dur="5.5s" begin="1s" fill="freeze" />

      </g>

      <g>

        <path id="movingLine2" d="m 80,-10 l -20,600 z" class="white-line">

          <animate id="lineAnim2" attributeName="stroke-dashoffset" from="-70" to="0" dur="5.5s" begin="1s" fill="freeze" />

      </g>
    </svg>
  </div>


</body>

我的CSS：

 body {
   background: black;
 }
.canvas_container{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

 .white-line {
   fill: none;
   stroke: white;
   stroke-width: 5%;
 }

我的JS：

window.onload = function() {
  Animate(1);
}

function Animate(number) {
  var line = document.getElementById('movingLine1' + number);
  var lineLength = line.getTotalLength().toString();
  var lineAnim = document.getElementById('lineAnim' + number);
  line.setAttributeNS(null, 'stroke-dasharray', lineLength + " " + lineLength);
  line.setAttributeNS(null, 'stroke-dashoffset', lineLength);
  lineAnim.setAttributeNS(null, 'from', lineLength);
  lineAnim.setAttributeNS(null, 'values', lineLength + ';0');
}

function fade(number) {
  var line = document.getElementById('movingLine' + number);

  var animation = document.createElementNS(
    'http://www.w3.org/2000/svg', 'animate');
  animation.setAttributeNS(null, 'attributeName', 'opacity');
  animation.setAttributeNS(null, 'to', 0);
  animation.setAttributeNS(null, 'dur', 1.25);
  animation.setAttributeNS(null, 'begin', 10);
  animation.setAttributeNS(null, 'fill', 'freeze');
  line.appendChild(animation);
}

如果有人可以提供帮助，我会非常感激

Answer 1

您忘记在加载事件中为第2行设置动画：

window.onload = function() {
  Animate(1);
  Animate(2);
}

为什么我的动画不起作用？

1 个答案: