帶CSS的動畫線條圖（SVG）

Question

我有一個SVG，我用CSS根據滾動位置使用stroke-dashoffset和stroke-dasharray進行動畫製作。這工作正常。

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

我想什麼來實現的是，當動畫完成（或例如，當我向下滾動500像素）的行程應當從一開始就用相同的動畫在我的素描解構本身喜歡這裏。

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);