Блог

Мне весело с Raphaël.js библиотекой.

Допустим, у нас есть текст:

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

По событию click я хочу активировать анимацию, которая меняет местами символы в этом тексте.
Так, например: «Джеймс» на «sameJ».

Я хочу увидеть эту анимацию, как меняются буквы.

Не могли бы вы помочь мне с этим?

Любые советы, идеи?

Взгляните на этот пример: 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);