类型和擦除效果的文本动画时序问题

Question

我在JS中创建了打字和擦除文字动画效果的函数。但是，我不知道如何在类型函数完全执行后才调用擦除函数？我试过 setTimeout 似乎没有用。感谢帮助！

var clength = 0;var caption = 'MyName';var x = 1;var y = x/2;


$(document).ready(function() {
  setInterval('cursorAnimation()', 600);
  ding = $('#caption');
  type();
});

function type() {
  ding.html(caption.substr(0, clength++));
  if (clength < caption.length + 1) {
    setTimeout('type()', 180);
  } else {
    clength = 0;
    caption = '';
  }
}

function erase() {
  ding.html(caption.substr(0, clength--));
  if (clength >= 0) {
    setTimeout('erase()', 50);
  } else {
    clength = 0;
    caption = '';
  }
}

function cursorAnimation() {
  $('#cursor').animate({
    opacity: 0
  }, 'fast', 'swing').animate({
    opacity: 1
  }, 'fast', 'swing');
}

Answer 1

好吧，有不同的方法可以做到这一点。

首先我必须说你使用setTimeout的方式不是最好的。通过将字符串表达式放入其中，您可以让 JS 引擎通过 eval 来解析表达式。必须尽可能避免的缓慢且简单的危险事物；除非真的需要。

在这种情况下，您只需传递一个函数作为 setTimeout 的参数，它也可以正常工作。所以，setTimeout(type, 180).

据我了解您的代码，type() 和 erase() 都是递归函数，它们要么调用自身，要么在到达终点后结束执行。 "Finish their execution after reaching the end" 正是您需要的代码分支，所以您只需在那里调用擦除即可。

} else {
    clength = 0;
    caption = '';
    erase();
}

现在您可能想要保留 type() 函数在最后没有强制调用 erase() 的情况下启动的可能性。在你的情况下，我会将它封装在一个闭包中，如下所示：

function type(callback) {
    return function(){
        ding.html(caption.substr(0, clength++));
        if (clength < caption.length + 1) {
            setTimeout('type()', 180);
        } else {
            clength = 0;
            caption = '';
            if (callback != undefined) callback();
        }
    }
}

在这种情况下，您的 type 函数成为第一个 class 函数，该函数生成其他函数。当你用 type(erase) 调用它时，它会把 callback 写成 erase 和 returns 一个变量范围包含 callback 的函数，这样它就可以像它自己一样调用它局部变量。

如果您调用 type()，它会创建一个 callback 未定义的函数，因此在这种情况下不会发生任何事情。

编辑:

function type(callback) {
    return function(){
        ding.html(caption.substr(0, clength++));
        if (clength < caption.length + 1) {
            setTimeout(type(callback), 180);
        } else {
            if (callback != undefined) callback();
        }
    }
}

Answer 2

这是一个仅 CSS 可能的解决方案：

.caption {
  display: inline-block;
  box-sizing: content-box;
  white-space: nowrap;
  overflow: hidden;
  font-family: monospace;
  border-right: 1px solid;
  animation-name: typing, cursor;
  animation-duration: 5s, 1s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(23, end), linear;
}

@keyframes typing {
  0% {
    width: 0;
  }
  
  20% {
    width: 0;
  }
  
  60% {
    width: 165px;
  }
  
  80% {
    width: 165px;
  }
  
  100% {
    width: 0;
  }
}

@keyframes cursor {
  from {
    border-right: 1px solid;
  }
  
  to {
    border-right: 1px transparent;
  }
}

<span class="caption">My name is Hritik Gupta</span>

类型和擦除效果的文本动画时序问题

Text Animation Timing Issues for Type and Erase Effects

html

javascript

jquery

animation

race-condition