Блог

Главная - Вопросы по программированию - Как повторить анимацию SVG после перезагрузки с помощью Javascript

Как повторить анимацию SVG после перезагрузки с помощью Javascript

#javascript #animation #svg #loading

#javascript #Анимация #svg #Загрузка

Вопрос:

Мне нужна ваша помощь

я создал экран предварительной загрузки для веб-сайта, и анимация SVG с логотипом идет хорошо, но единственная часть, с которой я смущен, это то, что: каждый раз, когда я перезагружаюсь, анимация не происходит, но 3 секунды загрузчика работают.

Вот веб-сайт: http://itsrev.io

вот код:

 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 }
    }

Ответ №1:

Изображение кэшируется. После завершения анимации она остается в кэше в этом состоянии.

Возможные решения:

  1. Рассмотрите возможность встраивания SVG в ваш HTML или

  2. Заставляйте браузер перезагружать SVG каждый раз. вы можете сделать это, установив на сервере заголовки управления кэшем для файла SVG. Или вы можете использовать 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 .

Ответ №2:

Это не ответ. Воспринимайте это как длинный комментарий.

В вашем коде много анимаций, похожих на это:

 @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 динамически, и ваш скрипт работает неправильно.

Возможно, вам нужно взглянуть на имеющийся у вас скрипт. возможно, вам следует сначала протестировать его только с одним полигоном.