jquery - 加载窗口时的 SVG 绘图动画进度

Question

我希望 svg 绘图动画在窗口加载时开始并在窗口结束加载时结束。动画的速度应该取决于寡妇加载速度。

here是演示。

另请参阅此图片以供引用。

$(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');
});

Answer 1

我不认为这是可能的，因为您无法可靠地确定加载时间。我也不认为这对于您要实现的效果来说是个好主意，因为当动画加载速度非常快时它看起来不太好。

您将遇到的一个问题是缓存(如果浏览器使用的话)。第一次有人查看您的页面时可能需要一些时间，但如果内容已缓存(图像、.html 文件、.CSS 文件、.js 文件等)，那么后续加载会快得多。您没有很好的方法来了解内容是否缓存(部分或全部)在客户端(您可以监视缓存命中请求，但根据 TTL，客户端甚至可能不会从服务器请求资源)。如果您使用标题来禁用缓存，您至少可以保证包含的资源将在每次请求页面时下载，但您仍然无法可靠地预测总延迟(其中包括通过网络传输的传播延迟和服务器上的处理延迟和客户端机器)。理论上您可以使用 ping 技术来尝试测量客户端和服务器之间的延迟，但即使这样也不可靠，并且可能会波动[并且不必要地复杂；首先考虑加载图像的用户体验原因是什么？通常，这样用户就不会对缓慢加载的内容感到不耐烦。它还可以作为过渡。]。

您为绘制加载 Logo 选择了一组很好的时间安排，我建议您坚持这样做。这是一个使用您当前时间的示例(5100 毫秒:3000+300+300+1500)。可能有一个回调方法可以与动画插件一起使用，但我没有查找它......而是我在 document.ready() 中使用了 setTimeout 来在 5100 毫秒后调用显示页面内容的函数。如果 window 已加载，此函数将仅显示页面内容，否则它将每 50 毫秒检查一次，直到标志被 window.load() 设置。

结果:

• 一致的动画时间。动画总是会在内容显示之前完成。
• 硬编码最小加载时间比尝试调整延迟要简单得多。
• 在加载窗口之前动画不会消失。加载时间非常慢的用户可能不得不盯着 Logo 看一会儿。加载时间非常快的用户将不得不观看整个动画，即使所有内容都已加载。

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>