Question

搜索完网络后，我现在问你。

我有一个案例，我需要用一个很好的动画来呈现一些文字。

就像在这个jsfiddle中一样，动画效果不错，但它并没有表现出换行符。

http://jsfiddle.net/Supremacy2k/nedemkgf/

HTML：

<div id="text">
 <span>
  In Legends of Old, a great tale of bravery is told.<br>
  About a young warrior, and an unspeakable evil.<br>
 </span>
</div>

JS：

var spanWidth = $('#text span').width();
$('#text').animate({
 width: spanWidth
}, 3000);

所以我一直在谷歌搜索，发现了这个：

http://jsfiddle.net/Supremacy2k/bzBzL/176/

HTML：

<div class="box">
 <div id="title"><span id="name">Lore</span> Says:</div>
 <div id="message"></div>
</div>

JS：

var timer, fullText, currentOffset, onComplete, wordSet;

function Speak(person, text, callback) {
    $("#name").html(person);
    fullText = text;
    wordSet = text.split(" ");
    currentOffset = 0;
    onComplete = callback;
    timer = setInterval(onTick, 300);
}

function onTick() {
    currentOffset++;
    if (currentOffset == wordSet.length) {
        complete();
        return;
    }
    var text = "";
    for(var i = 0; i < currentOffset; i++){
     text += wordSet[i] + " ";   
    }
    text.trim();
    $("#message").html(text);
}

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    if (onComplete) onComplete();
}

$(".box").click(function () {
    complete();
});

var lore = `
    In Legends of Old, a great tale of bravery is told.<br /> 
  About a young warrior, and an unspeakable evil.<br />
`;

Speak("Lore", lore);

那个人确实尊重换行符，但它没有动画。

有人能指出我正确的方向，如何将两者结合起来，所以它看起来像第一个jsfiddle，但尊重换行符？

关心Kris。

Answer 1

的javascript：

var storyHTML=
  "In Legends of Old, a great tale of bravery is told.<br>"+
  "About a young warrior, and an unspeakable evil.<br>";
function tellStory(storyDivId,storyHTML) {
  var storyDiv=document.getElementById(storyDivId);
  var storyArray=storyHTML.split("<br>").join("*<br>*").split(" ").join("* *").split("*")
  var atWord=0;
  var id=setInterval(speak, 100);
  function speak() {
    if(atWord<storyArray.length) {
      storyDiv.innerHTML+=storyArray[atWord];
      atWord++
    } else {
      clearInterval(id);
    }
  }
}

HTML：

<div id="storyDiv"></div>

在javascript中使用：

tellStory("storyDiv",storyHTML)。
tellStory("storyDiv","In Legends of Old, a great tale of bravery is told.<br>"+ "About a young warrior, and an unspeakable evil.<br>")。

Answer 2

的CSS：

div.line {
  width: 0px;
  white-space: nowrap;
  overflow: hidden;
}

HTML：

<div id="story">
  <div class="line">In Legends of Old, a great tale of bravery is told.</div>
  <div class="line">About a young warrior, and an unspeakable evil.</div>
  <div class="line">In Legends of Old, a great tale of bravery is told.</div>
  <div class="line">About a young warrior, and an unspeakable evil.</div>
  <div class="line">In Legends of Old, a great tale of bravery is told.</div>
  <div class="line">About a young warrior, and an unspeakable evil.</div>
</div>

的javascript：

function animate(divId) {
  var div=document.getElementById(divId);
  var lineCount=div.children.length;
  var lineNumber=0;
  var width=10;
  var id;
  if(lineNumber<lineCount) {
    line=div.children[lineNumber];
    id=setInterval(speak, 20);
  };
  function speak() {
    if(width>=100) {
      clearInterval(id);
      lineNumber++;
      if(lineNumber<lineCount) {
        line=div.children[lineNumber];
        width=10;
        id=setInterval(speak, 20);
      };
    } else {
      width++; 
      line.style.width=width+'%'; 
    }
  }
}

用以下方式开始动画：

animate("story");

希望这更好。我看着你的小提琴......

Answer 3

我结束了，微调我已经拥有的东西，对于其他可能需要这样的人来说，这就是结果。

var lore = {
    book1: {
      chapter1: {
        header: "Prologue",
        content: "In Legends of Old, a great tale of bravery is told. About a young adventurer and a great evil engulfing the land.. BREAK. This tale begins on a wet, windy night...",
        watched: 0,
      },
    },
    book2: "some more lore!",
    show: function(b, c) {
      var loreheader = lore[b][c].header;
      var loretxt = lore[b][c].content;
      $("#lore_head").html(loreheader);
      loretxt = loretxt.replace(". ", ".. ");
      var arr = loretxt.split(". ");
      var timer2 = 0;
      var timerAdd;

      for (var i = 0; i < arr.length; i++) {
        var num = i;
        var targetNum = i + 1;
        var target = 'span#line' + num;
        var line = arr[num];
        timer = 4000;
        timer2 += 500;
        if(line.length < 6) {
          timer = 50;
          line = " ";
          timerAdd = 50;
        } else {
          timerAdd = timer;
        }
        lore.animate(num, targetNum, target, timer, timer2, line);
        timer2 += timerAdd;
      }
    },
    animate: function(num, targetNum, target, timer, timer2, text) {
      var textspan = '<span id=\"line' + num + '\">' + text + '</span><br />';
      setTimeout(function() {
        $("div#lore_content").append($.trim(textspan));
        var testWidth = $(target).width();
        $(target).animate({
          width: testWidth
        }, timer, "linear");
      }, timer2);
    }
  };
  
  lore.show("book1","chapter1");

div#lore_content span {
  width: 0px;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lore_head"></div>
<div id="lore_content"></div>

显示文本，与动画一致的行

3 个答案: