Question

我想创建一个加载动画（不是CSS，这是一个复杂的Adobe After Effects动画）。我的目标是创建一个不断循环的动画，每当加载停止时，动画就会以不同的方式结束。例如，假设一个圆圈不断旋转，当调用animation.stop()时，该圆圈应快速旋转并按比例缩小直到消失。因此，每当调用dynamic ending时，动画就有一个animation.stop()。我该怎么办？

我的第一个想法是制作两个动画。循环动画和结束动画。一旦animation.stop()被调用，就将结束动画排入队列。因此，循环动画将完成其最后一个循环，然后播放结束动画。这值得一试吗？您如何在HTML / Javascript中queue制作动画？

您不能做的只是停止/隐藏循环动画并开始/显示结束动画，因为循环动画必须结束其循环，否则看起来就不会很流畅。我的实际循环动画比上面的圆圈示例更复杂。因此，我们需要结束其循环，以便将其很好地过渡到结束动画中。

Answer 1

我将回答您的问题，但我必须假设您具有Jquery的知识，我在前一段时间遇到了这个挑战，但是我发现由于javascript的限制，您可能必须创建两个动画正如您说的..，请注意，您的动画必须作为动画GIF导出，否则使用视频或任何高级图形将变得繁琐或繁琐。

循环动画和结束动画。现在的诀窍是将两者加载在一起，但是在事件触发时隐藏其中一个并显示另一个...

两个动画都具有相同的属性，基本上是尺寸和位置。因此，在加载过程中-您可以使循环动画可见并隐藏最终动画。然后，当加载结束时-使结束动画可见并隐藏循环动画。最后一部分是慢慢播放结束的动画。-使用javascript setTimeout或setInterval，因为您无法将事件添加到动画的帧中，但是可以对其计时并传递事件时间到了。

使用jQuery，这就是我要做的。

让我们说您有两个带有GIF图像的div标签。位于页面的任何位置。

 // 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 library并利用canvas API。使用canvas API，您可以模拟带有入站事件的复杂动画。

我希望我回答正确。欢呼。

Answer 2

我举了一个简单的示例，我认为它可以为您提供帮助，没有库只是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>

基本上，我只是在更改类以加快动画速度并添加缩小效果。单击“输出”选项卡以启动横向扩展动画。

如何动态结束加载动画

2 个答案: