Javascript 拉法ë；l、 js-在文本中交换角色（动画）

我很喜欢

Raphaël.js

library

假设我们有文本：

paper.text(10,10, "James");

在事件

上单击

我想激活动画，该动画将交换此文本中的角色。 例如，从“詹姆斯”到“萨梅杰”

我想看看动画中字母是如何变化的

你能帮我做这个吗

---

有什么建议吗

看看这个例子：

玩得开心

RaphaelJS没有什么特别的相关内容，只有几个javascript函数，当您决定在文本中添加一些换行符时，真正的问题就来了

HTML

<div id="holder" style="position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -200px; "></div>

var paper = Raphael("holder", 700, 300);

    var messageText = "Why don't try yourself before asking your question?";
    messageText = Swap(messageText);
    var msg = paper.text(0, 20, messageText).attr({ "text-anchor": "start", "font-size": 21, "font-family": "Courier New" });

    function Swap(text) {
      return text.split('').reverse().join('');
    }

    var array = messageText.split("");
    var loopTimer;
    msg[0].textContent = '';
    function Looper() {
      if (array.length > 0) {
        msg[0].textContent += array.shift();
      } else {
        clearTimeout(loopTimer);
        return false;
      }
      loopTimer = setTimeout('Looper()', 70);
    };
    Looper();

    setTimeout(function () {
      messageText = Swap(messageText);
      array = messageText.split("");
      msg[0].textContent = '';
      Looper();
    }, 100 * messageText.length);