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

Question

我无法弄清楚为什么我的两行都停止动画...（如果它可以帮助我的CodePen在这里）

这两行最初从顶部开始动画，然后在底部结束。 我认为我的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 个解决方案

解决方案1
1 已采纳 2015-04-23 20:40:11

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-04-23 20:40:11

解决方案1
1 已采纳 2015-04-23 20:40:11