SVG繪圖動畫加載時的窗口進度

我希望svg繪圖動畫以窗口加載開始，並在窗口結束加載時結束。動畫的速度應該取決於寡婦的加載速度。SVG繪圖動畫加載時的窗口進度

here是演示。

此圖片僅供參考。 svg animation

$(window).load(function() { 
$('#status').fadeOut(); 
$('#preloader').delay(350).fadeOut('slow'); 
$('body').delay(350).fadeIn(500); 
}); 

//svg drawing 
var pathObj = { 
"icons": { 
    "strokepath": [ 
     {"path": "M161.117,25.196l4.676-2.095l-2.672 1.837L161.117,25.196c0,0-8.683,3.173-15.029,4.843c-6.346,1.67-18.202,9.059-19.995,2.692c0,0-1.171-4.904-6.556-6.532c-5.864-1.773-9.685-1.169-15.196,2.672S90.318,37.073,87.58,41.933c-0.771,1.369-1.394,4.134,5.072,3.636c3.071-0.236,8.516,0.459,12.023-2.693c3.507-3.152,9.351,0.522,5.511,5.865s-11.522,5.511-17.2,5.344c-5.678-0.167-10.186,0.334-10.687,4.843s4.342,9.685-9.685,8.683c-14.027-1.002-2.505,18.703,5.344,9.351s13.526-9.518,17.701-8.182c4.175,1.336,1.002,6.68,4.509,9.685s6.694,0.167,13.784-2.004c7.09-2.171,11.097-1.002,13.101,1.336s5.01,8.182-2.505,10.687c-7.515,2.505-6.223-3.34-12.19-3.34c-1.983,0-3.601,3.149-6.012,5.344c-1.715,1.561-5.01,3.173-8.516-3.674c-3.507-6.847-7.692-10.93-13.025-6.847c-1.96,1.501-2.692,1.888-10.52,4.342c-5.213,1.634-10.019,3.142-15.864,15.029c-2.434,4.95-4.008,11.856,1.002,22.043c0,0,2.839,6.179,8.516,9.518c5.678,3.34,8.85,0.167,15.363-3.674c4.175-2.839,10.353,1.475,10.687,5.079c0.334,3.604,0,6.109,1.837,11.787c1.837,5.678,6.179,6.346,1.837,18.536c-4.342,12.19,2.505,19.037,4.175,22.21c1.67,3.173,3.094,6.459,4.843,8.015c2.884,2.567,10.019,5.01,15.196-2.755c5.177-7.765,6.475-7.218,7.181-10.27c0.604-2.613-1.336-5.963,1.169-10.663c2.505-4.7,4.843-3.364,6.346-6.036c1.503-2.672-2.672-17.367,1.336-21.041c4.008-3.674,9.685-10.52,13.192-15.53c3.507-5.01-0.501-7.181-2.672-6.68s-7.248,4.005-12.023-6.179c-2.134-4.55-7.014-11.188-11.188-16.699c-4.175-5.511,5.072-4.905,8.182,0.668c1.874,3.357,6.346,8.85,10.186,11.522s11.355,5.678,14.194,1.169c2.839-4.509,9.535-12.008,1.378-12.441c-2.755-0.146-9.059,6.429-10.562-0.584s2.366-11.22,6.68-5.678c5.807,7.462,8.758,3.679,15.593,3.612c3.359-0.033,4.169,3.831,8.12,11.751c1.852,3.714,2.146,7.726,6.68,15.196c1.525,2.513,6.216,8.421,11.522-2.338c2.619-5.31,4.801-19.663,16.323-17.158", 
      "duration": 3000, 
      "width": 500 
     }, 
     { 
      "path": "M39.361,189.047c0,0,5.072-16.845-11.272-27.804c-4.568-3.063-4.509-14.779-16.845-14.027", 
      "duration": 300 
     }, 
     { 
      "path": "M31.742,40.001c0,0,9.809,5.121,8.557,8.315c-1.327,3.384-5.97,4.029-13.61,2.087c0,0-1.209,3.455-8.434,8.214", 
      "duration": 300 
     }, 
     { 
      "path": "M109.435,215.251c-57.825,0-104.87-47.044-104.87-104.869c0-57.826,47.045-104.87,104.87-104.87s104.868,47.044,104.868,104.87C214.302,168.207,167.259,215.251,109.435,215.251z", 
      "duration": 1500 
     } 
    ], 
    "dimensions": { 
     "width": 220, 
     "height": 220 
    } 
    } 
}; 

$(document).ready(function() { 
$('#icons').lazylinepainter({ 
    "svgData": pathObj, 
    "strokeWidth": 2, 
    "strokeColor": "#189B56" 
}).lazylinepainter('paint'); 
});

來源

2015-04-20 locateganesh

如果您有任何代碼，人們將能夠幫助！ –

好吧，我認爲我正確地閱讀了...一個動畫，開始於文檔就緒和finsihes on window onload - 總負載持續時間決定了此動畫的速度？不可能，我會說，因爲你無法預測需要多長時間。我認爲未來的規格可能包括在這個過程中檢測到變化，但我不認爲現在可行（如果在任何時候都很複雜）。或者*也許*如果您使用Ajax調用整個頁面。 – Shikkediel

我不認爲這是可能的，因爲您無法可靠地預測加載時間。我也不相信這是你想要達到的效果的好主意，因爲當動畫加載非常快時它看起來不太好。

您遇到的一個問題是緩存（如果由瀏覽器使用）。有人第一次查看你的頁面可能會花一點時間，但是如果內容被緩存（圖像，.html文件，.CSS文件，.js文件等），則後續加載將更快。您無法很好地瞭解內容是否緩存（部分或全部）在客戶端上（您可以監視緩存命中請求，但根據TTL，客戶端甚至可能不會從服務器請求資源）。如果您使用標頭來禁用緩存，則至少可以保證包含的資源將在頁面的每個請求中下載，但是仍不能可靠地預測總延遲（其中包括通過網絡傳輸的傳播延遲和服務器上的處理延遲和客戶端機器）。您理論上可以使用ping技術來測量客戶端和服務器之間的延遲，但即使這樣也不可靠，並且可能會波動[並且不必要的複雜;首先考慮加載映像的用戶體驗原因是什麼？通常情況下，用戶不會對緩慢加載內容感到不耐煩。它也是一個過渡。]。

你選擇了一套很好的時間來繪製加載標誌，我會建議堅持。以下是一個使用您當前計時的示例（5100毫秒：3000 + 300 + 300 + 1500）。可能有一個回調方法可以與動畫插件一起使用，但我沒有查找它......而是使用setTimeout的document.ready()來調用5100毫秒後顯示頁面內容的函數。如果加載window，此功能將僅顯示頁面內容，否則它將繼續檢查每個50毫秒，直到標誌被設置爲window.load()。

結果：

一致動畫定時。動畫將始終在內容顯示之前完成。
硬編碼最小加載時間比嘗試縮放延遲要簡單得多。
直到加載窗口，動畫纔會消失。加載時間非常緩慢的用戶可能不得不盯住徽標一段時間。即使加載了所有內容，加載時間非常快的用戶也必須觀看整個動畫。

function ShowPageContent() { 
 
    if (window.data.loaded) { 
 
    // window loaded and animation complete, show page contents now 
 
    $('#status').fadeOut(); 
 
    $('#preloader').delay(350).fadeOut('slow'); 
 
    $('body').delay(350).fadeIn(500); 
 
    } else { 
 
    // animation completed, but window not yet loaded; poll for loaded flag 
 
    var waitLoopMs = 50; 
 
    setTimeout(ShowPageContent, waitLoopMs); 
 
    } 
 
} 
 

 
window.data = { 
 
    loaded: false 
 
}; 
 
$(window).load(function() { 
 
    window.data.loaded = true; 
 
}); 
 

 
//svg drawing 
 
var pathObj = { 
 
    "icons": { 
 
    "strokepath": [{ 
 
     "path": "M161.117,25.196l4.676-2.095l-2.672-1.837L161.117,25.196c0,0-8.683,3.173-15.029,4.843c-6.346,1.67-18.202,9.059-19.995,2.692c0,0-1.171-4.904-6.556-6.532c-5.864-1.773-9.685-1.169-15.196,2.672S90.318,37.073,87.58,41.933c-0.771,1.369-1.394,4.134,5.072,3.636c3.071-0.236,8.516,0.459,12.023-2.693c3.507-3.152,9.351,0.522,5.511,5.865s-11.522,5.511-17.2,5.344c-5.678-0.167-10.186,0.334-10.687,4.843s4.342,9.685-9.685,8.683c-14.027-1.002-2.505,18.703,5.344,9.351s13.526-9.518,17.701-8.182c4.175,1.336,1.002,6.68,4.509,9.685s6.694,0.167,13.784-2.004c7.09-2.171,11.097-1.002,13.101,1.336s5.01,8.182-2.505,10.687c-7.515,2.505-6.223-3.34-12.19-3.34c-1.983,0-3.601,3.149-6.012,5.344c-1.715,1.561-5.01,3.173-8.516-3.674c-3.507-6.847-7.692-10.93-13.025-6.847c-1.96,1.501-2.692,1.888-10.52,4.342c-5.213,1.634-10.019,3.142-15.864,15.029c-2.434,4.95-4.008,11.856,1.002,22.043c0,0,2.839,6.179,8.516,9.518c5.678,3.34,8.85,0.167,15.363-3.674c4.175-2.839,10.353,1.475,10.687,5.079c0.334,3.604,0,6.109,1.837,11.787c1.837,5.678,6.179,6.346,1.837,18.536c-4.342,12.19,2.505,19.037,4.175,22.21c1.67,3.173,3.094,6.459,4.843,8.015c2.884,2.567,10.019,5.01,15.196-2.755c5.177-7.765,6.475-7.218,7.181-10.27c0.604-2.613-1.336-5.963,1.169-10.663c2.505-4.7,4.843-3.364,6.346-6.036c1.503-2.672-2.672-17.367,1.336-21.041c4.008-3.674,9.685-10.52,13.192-15.53c3.507-5.01-0.501-7.181-2.672-6.68s-7.248,4.005-12.023-6.179c-2.134-4.55-7.014-11.188-11.188-16.699c-4.175-5.511,5.072-4.905,8.182,0.668c1.874,3.357,6.346,8.85,10.186,11.522s11.355,5.678,14.194,1.169c2.839-4.509,9.535-12.008,1.378-12.441c-2.755-0.146-9.059,6.429-10.562-0.584s2.366-11.22,6.68-5.678c5.807,7.462,8.758,3.679,15.593,3.612c3.359-0.033,4.169,3.831,8.12,11.751c1.852,3.714,2.146,7.726,6.68,15.196c1.525,2.513,6.216,8.421,11.522-2.338c2.619-5.31,4.801-19.663,16.323-17.158", 
 
     "duration": 3000, 
 
     "width": 500 
 
    }, { 
 
     "path": "M39.361,189.047c0,0,5.072-16.845-11.272-27.804c-4.568-3.063-4.509-14.779-16.845-14.027", 
 
     "duration": 300 
 
    }, { 
 
     "path": "M31.742,40.001c0,0,9.809,5.121,8.557,8.315c-1.327,3.384-5.97,4.029-13.61,2.087c0,0-1.209,3.455-8.434,8.214", 
 
     "duration": 300 
 
    }, { 
 
     "path": "M109.435,215.251c-57.825,0-104.87-47.044-104.87-104.869c0-57.826,47.045-104.87,104.87-104.87s104.868,47.044,104.868,104.87C214.302,168.207,167.259,215.251,109.435,215.251z", 
 
     "duration": 1500 
 
    }], 
 
    "dimensions": { 
 
     "width": 220, 
 
     "height": 220 
 
    } 
 
    } 
 
}; 
 
/* 
 
Setup and Paint your lazyline! 
 
*/ 
 
$(document).ready(function() { 
 
    $('#icons').lazylinepainter({ 
 
    "svgData": pathObj, 
 
    "strokeWidth": 2, 
 
    "strokeColor": "#189B56" 
 
    }).lazylinepainter('paint'); 
 

 
    var loadDelayMs = 5100; // minimum delay (5.1 sec, based on sum of your durations, above) 
 
    setTimeout(ShowPageContent, loadDelayMs); 
 
});

/* Preloader **/ 
 

 
#preloader { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #000; 
 
    z-index: 99999; 
 
} 
 
#status { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    /* background-image:url(../img/status.gif); */ 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    margin: -100px 0 0 -100px; 
 
} 
 
/** --Preloader-- **/

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>svg preloader</title> 
 
    <script src="http://okwutelabs.com/js/jquery-1.11.1.min.js"></script> 
 
    <script src="http://okwutelabs.com/js/jquery.lazylinepainter-1.1.min.js"></script> 
 
    <script src="http://okwutelabs.com/js/raphael-min.js"></script> 
 
</head> 
 

 
<body> 
 
    <!-- Preloader --> 
 
    <div id="preloader"> 
 
    <div id="status"> 
 
     <div id="icons"></div> 
 
    </div> 
 
    </div> 
 
    <!-- #Preloader --> 
 
    <img src="http://www.jesuspaintings.com/pictures/field_of_dreams_big.jpg" alt=""> 
 
    <img src="http://www.sinoorigin.com/images/modern-landscape/large/modern-landscape-painting-012.jpg" alt=""> 
 
    <img src="http://s3.amazonaws.com/artspan-fs/member_files/nmistry/Adirondack_Fall.JPG" alt=""> 
 
</body> 
 

 
</html>

來源

2015-04-23 03:52:33 nothingisnecessary

SVG繪圖動畫加載時的窗口進度

回答

相關問題