如何交替动画折线点？

Question

我已经设法让动画与折线点一起工作，但是无法 "reverse" 动画，这样它就不会跳回开头，而是从头到尾制作动画开始（例如：https://codepen.io/chriscoyier/pen/bGyoz），因为它从头到尾都是动画。我使用的点是在 JS 中生成的，然后注入到 HTML.

当前代码：https://codepen.io/anon/pen/zgzaBR

 polyline {
        stroke-width: 1;
        stroke: black;
        fill: none;
        animation-direction: alternate;
    }

<svg>
        <polyline>
            <animate
                attributeName="points"
                dur="5s"
                from="0,17 167,-20 350,39 511,-20 757,27 891,-35 1011,11 1206,-21 1342,35 1460,-26 1566,26 1797,-32 1932,36 2161,-10 2360,15 2587,-19 2832,13 3031,-18 3197,11 3318,-31 3543,32 3655,-10 3779,31 3882,-17 4065,20 4271,-24 4416,29 4572,-26 4804,27 4983,-27 5093,24 5272,-28 5389,31 5563,-26 5766,33 5929,-15 6052,38 6282,-31 6510,15 6682,-13 6907,29 7106,-22 7282,17 7467,-31 7580,20 7763,-16 7918,18 8098,-11 8339,15 8564,-32"
                to="0,-45.6 107,39.6 278,-45.6 488,44.4 621,-28.8 761,18 975,-24 1100,18 1203,-42 1448,38.4 1563,-12 1809,32.4 1936,-16.8 2105,37.2 2299,-37.2 2450,40.8 2654,-44.4 2875,24 3034,-44.4 3273,45.6 3426,-21.6 3650,36 3792,-26.4 3988,37.2 4088,-30 4232,44.4 4444,-18 4570,15.6 4755,-22.8 4870,43.2 5077,-28.8 5231,42 5431,-15.6 5546,36 5753,-12 5860,39.6 6101,-31.2 6230,31.2 6469,-44.4 6589,37.2 6745,-26.4 6896,34.8 7039,-45.6 7152,21.6 7382,-21.6 7568,13.2 7718,-12 7949,16.8 8058,-36 8178,20.4 "
                repeatCount="indefinite"
             ></animate>
        </polyline>
    </svg>

Answer 1

您可以使用 values 属性代替 from 和 to。 values 属性的值是以分号分隔的值列表。在这种情况下，像这样使用 from;to;from：

svg {
  margin-top: 100px;
  width: 100%;
  overflow: visible;
}

polyline {
  stroke-width: 1;
  stroke: black;
  fill: none;
  animation-direction: alternate;
}

animate {
  animation-direction: alternate;
}

<svg>
  <polyline>
    <animate
             attributeName="points"
             dur="5s"
             values="0,17 167,-20 350,39 511,-20 757,27 891,-35 1011,11 1206,-21 1342,35 1460,-26 1566,26 1797,-32 1932,36 2161,-10 2360,15 2587,-19 2832,13 3031,-18 3197,11 3318,-31 3543,32 3655,-10 3779,31 3882,-17 4065,20 4271,-24 4416,29 4572,-26 4804,27 4983,-27 5093,24 5272,-28 5389,31 5563,-26 5766,33 5929,-15 6052,38 6282,-31 6510,15 6682,-13 6907,29 7106,-22 7282,17 7467,-31 7580,20 7763,-16 7918,18 8098,-11 8339,15 8564,-32;
                     0,-45.6 107,39.6 278,-45.6 488,44.4 621,-28.8 761,18 975,-24 1100,18 1203,-42 1448,38.4 1563,-12 1809,32.4 1936,-16.8 2105,37.2 2299,-37.2 2450,40.8 2654,-44.4 2875,24 3034,-44.4 3273,45.6 3426,-21.6 3650,36 3792,-26.4 3988,37.2 4088,-30 4232,44.4 4444,-18 4570,15.6 4755,-22.8 4870,43.2 5077,-28.8 5231,42 5431,-15.6 5546,36 5753,-12 5860,39.6 6101,-31.2 6230,31.2 6469,-44.4 6589,37.2 6745,-26.4 6896,34.8 7039,-45.6 7152,21.6 7382,-21.6 7568,13.2 7718,-12 7949,16.8 8058,-36 8178,20.4;
                     0,17 167,-20 350,39 511,-20 757,27 891,-35 1011,11 1206,-21 1342,35 1460,-26 1566,26 1797,-32 1932,36 2161,-10 2360,15 2587,-19 2832,13 3031,-18 3197,11 3318,-31 3543,32 3655,-10 3779,31 3882,-17 4065,20 4271,-24 4416,29 4572,-26 4804,27 4983,-27 5093,24 5272,-28 5389,31 5563,-26 5766,33 5929,-15 6052,38 6282,-31 6510,15 6682,-13 6907,29 7106,-22 7282,17 7467,-31 7580,20 7763,-16 7918,18 8098,-11 8339,15 8564,-32"
             repeatCount="indefinite"
             ></animate>
  </polyline>
</svg>

如何交替动画折线点？

How to alternate animate polyline points?

html

css

svg

polyline

css-animations