如何在 Javascript 中设计打字动画

Question

我想知道是否有任何方法可以让输入的文本以不同的字体大小出现。我附上了一个 jsfiddle，它显示了我到目前为止所做的事情。有没有办法给每个句子分配一个class？

谢谢！

https://jsfiddle.net/te4fo7fh/embedded/result/

var tt_element = document.getElementById("tt_element");
var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^And this one came in 30pt font size.";
var tt_array = tt_text.split("");
var tt_timer;
var tt_loop = true;
var tt_speed = 70;
var tt_delay = 3000;
var tt_br = "^";

function typeMyText() {
  if (tt_array.length > 0) {
    if (tt_array[0] == tt_br) {
      tt_element.innerHTML += "<br>";
      tt_array.shift();
    } else {
      tt_element.innerHTML += tt_array.shift();
    }
  } else {
    clearTimeout(tt_timer);
    if (tt_loop) {
      setTimeout(clearMyText, tt_delay);
    }
    return false;
  }
  tt_timer = setTimeout(typeMyText, tt_speed);
}

typeMyText();

#tt_element {
  padding-top: 20px;
 line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
}

<section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section>

Answer 1

我认为您已经使用了 Typed.js，其中有很多选项可供使用。这是 link：Type.js

下面是这个 js 的一些示例代码：

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
...

<div class="element"></div>

为动画 blinking 光标添加这个。

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

Answer 2

我更新了你的例子。

首先，您将希望的 fontSize 输入到您的字符串中，就像您的休息一样。

var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^{30}And this one came in 30pt font size.";

之后你将每一行都放入一个 span.

var tt_line = document.createElement('span');
tt_element.appendChild(tt_line);

完成后，您仍然需要识别字体大小的变化：

if (tt_array[0] == '{') {
    var index = 0;
    var fontSize = '';
    tt_array.shift() // To skip {
    // Loop to get the size between the {}
    while (tt_array[index] !== '}') {
       fontSize += tt_array[index];
       tt_array.shift()
    }
    tt_array.shift() // To skip }
    tt_line.style.fontSize = fontSize+'px';
  }

在此处查看 fiddle：https://jsfiddle.net/te4fo7fh/1/

Answer 3

您可以将 tt_text 替换为对象数组，其中嵌入了样式信息（在我的示例中为 tt_text_with_style）。

var tt_element = document.getElementById("tt_element");
var tt_current_element;
var tt_array = [];
var tt_text_with_style = [
  {size: '12pt', lineHeight: '25pt', txt: 'It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^'},
  {size: '30pt', lineHeight: '35pt',  txt: 'And this one came in 30pt font size.'}];
var tt_timer;
var tt_loop = false;
var tt_speed = 7;
var tt_delay = 3000;
var tt_br = "^";
var i = 0;
var current_line


function styleMyText() {
  var style = 'font-size: ' + current_line.size + ';line-height: ' + current_line.lineHeight
  tt_current_element = document.createElement('span')
  tt_current_element.setAttribute('style', style)
  tt_element.appendChild(tt_current_element)
}

function clearMyText() {
  tt_element.innerHTML = ''
  tt_array = []
  i = 0;
  typeMyText()
}

function typeMyText() {
  if (tt_array.length === 0) {
    current_line = tt_text_with_style[i++]
    if (!current_line) {
      clearTimeout(tt_timer);
      if (tt_loop) {
        setTimeout(clearMyText, tt_delay);
      }
      return false  
    }
    current_style = current_line.size
    tt_array = current_line.txt.split('')
    styleMyText()
  }
  
  if (tt_array[0] == tt_br) {
    tt_current_element.innerHTML += "<br>";
    tt_array.shift();
  } else {
    tt_current_element.innerHTML += tt_array.shift();
  }

  tt_timer = setTimeout(typeMyText, tt_speed);
}



typeMyText();

#tt_element {
  padding-top: 20px;
  line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
}

.blue ::selection {
  background: red;
}

<section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section>

如何在 Javascript 中设计打字动画

How to Style Typing Animation in Javascript

javascript

jsfiddle