Рисование анимированных линий с помощью jQuery

Question

Я хочу использовать jQuery для создания эффекта рисования линий, как будто невидимым пером.

Вроде как:

http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html

Я сделал этот макет с другой библиотекой, но мне интересно, есть ли более простой способ сделать это с помощью jQuery,И я также хочу иметь возможность анимировать изогнутые и нерегулярные линии.

Я хотел бы анимировать рисунок, например, такой:

http://commons.wikimedia.org/wiki/File:Mouse_line_drawing.jpg

Есть ли плагин jQuery, который помогает создать такой эффект?

Если нет, не могли бы вы посоветовать простой и эффективный способ сделать это с помощью jQuery?

Спасибо за ваш совет!

С уважением,

Дмитрий Воронцов

Answer 1

Я пытался воспроизвести эту анимацию.Я использовал div, в котором я поместил 4 "border-div", имея position: absolute, чтобы разместить их как рамку.

Все эти "border-div" имеют ширину 0px и 1px solid black border.

Когда DOM готов, я анимирую границы-делители один за другим, меняя их размеры в соответствии с размерами контейнера:

$(function() {
    $(".border, #content").hide();
    $("#topbar").show();
    $("#topbar").animate({width: "318px"}, 1000, function() {
        $("#rightbar").show();
        $("#rightbar").animate({height: "238px"}, 1000, function() {
            $("#bottombar").show();
            $("#bottombar").animate({width: "318px"}, 1000, function() {
                $("#leftbar").show();
                $("#leftbar").animate({height: "238px"}, 1000, function() {
                    $("#content").fadeIn(1000);
                });
            });
        });
    });
});

Не знаю, еслиясно, английский не мой родной язык, но я привел пример jsBin здесь

Все, что вам нужно сделать сейчас, это повторить процесс для всегосайт!

Answer 2

Взгляните на Рафаэль .

Raphaël: кросс-браузерная векторная графика - легкий путь.

Answer 3

Довольно старая тема, но я нашел решение этой проблемы: http://plugins.jquery.com/lazylinepainter/