Question

我正在使用Raphaël.js库。

让我们说有文字：

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

在事件click上我希望激活动画，在此文本中交换字符。所以，例如：＆＃34; James＆＃34; to＆＃34; sameJ＆＃34;。

我想看看动画如何改变字母。

你可以帮我这个吗？

任何提示，想法？

Answer 1

看看这个例子： http://jsfiddle.net/InferOn/sVB8C/13/embedded/result/

并且玩得开心!!!

特别是与RaphaelJS没有任何关系，只有几个javascript函数，当你决定在你的文本中添加一些换行符时，它就会出现真正的问题

<强> HTML

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

Javascript

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);

Raphaël.js - 在文本中交换字符（动画）

1 个答案: