如何在使用 Javascript 重新加载后重复 SVG 动画

Question

我需要你的帮助

我为一个网站创建了一个预加载屏幕，徽标 SVG 动画效果很好，但我唯一感到困惑的部分是：每次我重新加载时，动画都没有发生，但是加载程序的 3 秒是正常的。

代码如下：

var loaderScreen;

  function showPage() {
    document.getElementById("loader").style.display = "none";
    document.getElementById("banner").style.display = "block";
  }

  function loadingFunction() {
    loaderScreen = setTimeout(showPage, 4000);
  }

CSS:

 /**************************************
    Preloader
    ***************************************/
    #loader {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    #banner {
      display: none;
    }

    /* Add animation to "page content" */
    #banner {
      position: relative;
      -webkit-animation-name: animatebottom;
      -webkit-animation-duration: 1s;
      animation-name: animatebottom;
      animation-duration: 1s
    }

    @-webkit-keyframes animatebottom {
      from { bottom:-100px; opacity:0 }
      to { bottom:0px; opacity:1 }
    }

    @keyframes animatebottom {
      from{ bottom:-100px; opacity:0 }
      to{ bottom:0; opacity:1 }
    }

Answer 1

这不是答案。当作长评吧。

在您的代码中，您有许多个动画，如下所示：

@keyframes whatever {
  75% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}

请注意，100% 之后是 0%。另外：代码非常冗长，每个多边形都有一个这样的动画。

您的代码中还有另一种动画，如下所示：

@keyframes whatever2 {
  0% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(-75px, 0px);
  }
  62.50% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(-75px, 0px);
  }
  75% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(0px, 0px);
  }
  100% {
    transform: translate(144.77000427246094px, 23.770000457763672px)
      translate(-144.77000427246094px, -23.770000457763672px)
      translate(0px, 0px);
  }
}

我认为您动态创建了 CSS 代码，但您的脚本无法正常工作。

也许您需要看一下脚本 have.maybe 您应该先用一个多边形测试它。

Answer 2

正在缓存图像。动画完成后，它会保持缓存状态。

可能的解决方案：

考虑在您的 HTML 或
强制浏览器每次重新加载 SVG。您可以通过让服务器为 SVG 文件设置缓存控制 headers 来做到这一点。或者你可以在页面上使用javascript每次更改图片的URL。

例如，如下所示：

<div id="loader">
  <img width="400"/>
</div>


function loadingFunction() {
  var url = "imgs/logo_svg_animated.svg?r=" + Math.random();
  document.querySelector("#loader img").setAttribute("src", url);
  loaderScreen = setTimeout(showPage, 4000);
}

logo?r=12345 是与 logo?r=98765 不同的文件的浏览器。

如何在使用 Javascript 重新加载后重复 SVG 动画

How to repeat SVG animation after reload using Javascript

javascript

animation

svg

loading