Анимационная линия

Question

Анимационная линия

0

Есть ли способ анимировать соединительные линии jsplumb по мере их рисования? Я хочу иметь анимацию, а не только строку.

Я вызываю jsPlumb.connect чтобы нарисовать линию, щелкнув div, как это

$("#manchester").on('click', function() {
    jsPlumb.connect({source: "manchester", target: "paris"});
});

user2442178 15 дек. 2013, в 03:17

Источник

Теги:

javascript

jquery

jsplumb

1 ответ

Ещё вопросы

MrNobody · Answer 1 · 2013-12-20T06-47-00.000Z

Сначала нам нужно связать событие всякий раз, когда было создано соединение, чтобы анимировать вновь созданное соединение:

jsPlumb.bind("jsPlumbConnection", function(ci) {

            new animateConn(ci.connection); //call the animate function for the newly created function              
}

Теперь в анимационной функции просто обновите положение оверлей соединения, чтобы получить анимацию. Перед выполнением убедитесь, что вы добавляете оверлей к своим соединениям:

jsPlumb.connect({
source: "manchester", target: "paris",
overlays:[ 
    "Arrow", 
    [ "Label", { location:0.45, id:"arrow" } ]
]
});

Теперь функция animateConn:

        var interval = null; 
        animateConn = function(conn) {
            var arrow = conn.getOverlay("arrow");
            interval = window.setInterval(function() {
                arrow.loc += 0.05;
                if (arrow.loc > 1) {arrow.loc = 0;}
                try{
                    conn.repaint(); // writing in try block since when connection is removed we need to terminate the function for that particular connection
                }catch(e){stop();}
            }, 100);                 
        },
        stop = function() {
            window.clearInterval(interval);
        };

Чтобы настроить наложение, обратитесь к API DOC.