带CSS的动画线条图（SVG）

Question

我有一个SVG，我根据滚动位置使用stroke-dashoffset和stroke-dasharray使用CSS制作动画。这很好。

http://codepen.io/anon/pen/xVRXrY

我想要实现的是，当动画完成时（或者当我向下滚动500px时），笔划将从头开始用相同的动画解构自己，如我的草图中所示。

Answer 1

也许您应该使用getTotalLength()来获取当前路径长度。 然后，这个脚本是一个例子，线条一直延伸到滚动的中间，然后就像你的图画一样消失。

以下是演示：https://jsfiddle.net/Ltbvyepj/

这是Javascript代码：

var path = document.querySelector(".path");
// Get the actual length of your path.
var len = path.getTotalLength();
// Dashes have the exact length of the path.
path.style.strokeDasharray = len + " " + len;
// Shift of the length of the path, so the line is quite not visible.
path.style.strokeDashoffset = len;
// Attach to the window's scroll event.
window.addEventListener( 'scroll', function() {
    // Getting the page dimensions.
    var rect = document.querySelector( 'html' ).getBoundingClientRect();
    // Height is the size of the page which is out of screen.
    var height = rect.height - window.innerHeight;
    // Percent of scroll bar. 0 Means the top, 1 the bottom.
    var percent = height < 0 ? 1
            : -rect.top / height;
    // If you omit the `2 *` you will get a growing only path.
    path.style.strokeDashoffset = len * (1 - 2 * percent);
}, false);