Как динамически завершить загрузку анимации - PullRequest
Новая
       27

Как динамически завершить загрузку анимации

0 голосов
/ 14 февраля 2019

Я хотел бы создать анимацию загрузки (не в CSS, это сложная анимация Adobe After Effects).Моя цель состоит в том, чтобы создать анимацию, которая постоянно повторяется и всякий раз, когда загрузка прекращается, анимация заканчивается чем-то другим.Например, скажем, круг постоянно вращается, когда вызывается animation.stop(), круг должен вращаться очень быстро и уменьшаться, пока не исчезнет.Таким образом, анимация имеет dynamic ending всякий раз, когда вызывается animation.stop().Как мне поступить об этом?

Моей первой мыслью было создание двух анимаций.Цикл анимации и конец анимации.Как только вызывается animation.stop(), вы ставите в очередь завершающую анимацию.Таким образом, анимация цикла завершит свой последний цикл и затем воспроизведет анимацию конца.Это стоит попробовать?Как вы queue анимации в HTML / Javascript?

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

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Я сделал простой пример, думаю, он вам поможет, никаких библиотек только JS / CSS. 

function changeAnimation() {
   var loader = document.getElementById("brnx-loading");
 
   loader.classList.remove('brnx-loading-slow');
   loader.classList.add('brnx-loading-fast', 'brnx-loading-scaleout');
}
.brnx-loading {
  position: fixed;
  z-index: 9999;
  height: 60px;
  width: 60px;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
 /* visibility: hidden; */
}

/* Transparent Overlay */
.brnx-overlay {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

.brnx-loading:after {
  height: 50px;
  width: 50px;
  margin-left: -25px;
 
  content: '';
  display: block;

  border-left: 6px solid rgba(60, 167, 115, .15);
  border-right: 6px solid rgba(60, 167, 115, .15);
  border-bottom: 6px solid rgba(60, 167, 115, .15);
  border-top: 6px solid rgba(60, 167, 115, .8);
  border-radius: 100%;
}

.brnx-loading-slow:after {
  animation: rotation 1200ms infinite linear;  
}


.brnx-loading-fast:after {
  animation: rotation 300ms infinite linear;  
}

.brnx-loading-scaleout  {
  transform: scale(0);
  animation: scaleout 1000ms ease-in;  
}
 

/* Animation */
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


@keyframes scaleout {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    
  <div class="brnx-overlay"  onclick="changeAnimation()">
    
      <div id="brnx-loading"         
      class="brnx-loading brnx-loading-slow"></div>
    
    </div>
   
</body>
</html>

По сути, я просто изменяю класс, чтобы ускорить анимацию и добавить эффект уменьшения масштаба.Нажмите на вкладку вывода, чтобы запустить анимацию горизонтального масштабирования.

0 голосов
/ 14 февраля 2019

Я собираюсь ответить на ваш вопрос, но я должен предположить, что вы знакомы с Jquery, у меня была эта проблема некоторое время назад, но я понял, что из-за ограничений javascript вам, возможно, придется создать две анимациикак вы сказали ... и обратите внимание, что ваши анимации необходимо экспортировать в виде анимированных GIF-файлов, в противном случае использование видео или какой-либо сложной графики будет громоздким или тяжелым.

Циклическая анимация и конечная анимация.теперь хитрость заключается в том, чтобы загрузить их обоих вместе, но скрыть одну и отобразить другую, когда событие инициируется ...

Обе анимации имеют одинаковые свойства, в основном размеры и положение.поэтому, когда идет загрузка - вы делаете циклическую анимацию видимой и скрываете конечную анимацию.затем, когда загрузка заканчивается, вы делаете видимую конечную анимацию и скрываете зацикленную анимацию.и последняя часть состоит в том, чтобы медленно убивать конечную анимацию, пока она воспроизводится до конца ... - вы используете javascript setTimeout или setInterval, потому что вы не можете добавлять события в кадры вашей анимации, но вы можете определить время и передать событиекогда придет время ..

используя jquery, это то, что я бы сделал.

Допустим, у вас есть два тега div с изображениями GIF в них ..., расположенные в любом месте страницы. 

 // loopDiv - loop_animation.gif
 <div id="loopDiv"> <img src="images/animations/loop_animation.gif"/> </div>

 // endDiv - end_animation.gif, - and this plays for 6 seconds. 
 <div id="endDiv"> <img src="/images/animations/end_animation.gif"/> </div>

// когда идет загрузка 

var endt = 20000; //20seconds 20 * 1000 milliseconds. 

function doProgress(){
   clearInterval(endt);  //always clear the interval before starting.
   $('#loopDiv').show();
   $('#endDiv').hide();
}

function endProgress(){
   $('#loopDiv').hide();
   $('#endDiv').show();
   setInterval(function(){
       $('#endDiv').hide();
    }, endt);  //hide the div after 20seconds 
}

, если вы получаете это правильно, это должно работать, но если вы хотите продвинутое решение, выможно использовать CreateJs - библиотека EaselJs и использовать API Canvas.используя API Canvas, вы можете смоделировать сложную анимацию с входящими событиями, а также ..

Я надеюсь, что ответил правильно.веселит.

...