带有加载窗口的 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 技术来尝试测量客户端和服务器之间的延迟，但即使这样也不可靠，并且可能会波动[并且不必要地复杂；首先考虑加载图像的用户体验原因是什么？通常是为了让用户不会对缓慢加载的内容感到不耐烦。它也可以作为过渡。]。

您选择了一组很好的时间来绘制加载徽标，我建议您坚持下去。这是一个使用您当前时间的示例（5100 毫秒：3000+300+300+1500）。可能有一个回调方法可以用于动画插件，但我没有查...相反，我使用document.ready() 中的setTimeout 在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>