Есть готовый файл, сохраненный в SVG.
Задача следующая при наведение сделать его анимированным.
Суть анимации: рисования элемента от начала до конца.
Я полазил по интернету и нашел подходящий пример анимации:
$(document).ready(function() {
var canvas = Snap('.main-svg');
var speed = 1000;
var line_clients = canvas.path('M349.333,397.333c0,0,46,42.667,146-2.333 c17.917-8.063,79.666-31,87.333,65');
line_clients.attr({
class: "line-clients"
});
var group_line = canvas.group(line_clients);
group_line.attr({
fill: 'none',
stroke: '#fff',
strokeWidth: 0
});
$.each([line_clients], function(index, value) {
value.attr({
strokeDasharray: value.getTotalLength(),
strokeDashoffset: value.getTotalLength(),
strokeWidth: 1,
stroke: '#000'
});
value.animate({
strokeDashoffset: 0
},
speed * 2,
mina.easeinout
);
});
});
Только вот, когда открываешь мой SVG, я не ожидал, что там столько текста ради такой линии
Я не прошу за себя сделать работу, но может кто-то пнет меня на нужный источник, а лучше пример.
Находил цент, какой с svg конвертирует в JS. Но я либо не разобрался, либо там нет возможности анимации.
Всем спасибо!
Ответ
Рисовать в любом случае придётся. Эту линиую надо изобразить заново одним путём. Далее варианта два.
использовать оригинальный кривой и ужасный SVG. Поверх накрыть его своей линией цвета фона, толщины достаточной, чтобы закрыть полностью. Потом анимировать длину штриха и подобрать смещение так, чтобы кривая поверх «скрывалась», открывая пунктир под ней. Ниже эта техника подробнее.
если требуется рисовать сплошной линией – можно изобразить прорисовку одного длинного пути, меняя длину штриха (решение отсюда). Пришлось перерисовать путь, чтобы он стал одной кривой. Смотрите в полный экран, т.к. кривая крупная.
.path {
stroke-dasharray: 1490;
stroke-dashoffset: 1490;
animation: dash 4s linear forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
Чтобы «рисовать» пунктиром можно сразу нарисовать весь путь пунктиром, а потом поверх закрыть этой же кривой цвета фона. И её не рисовать, а наоборот, скрывать задом наперёд той же техникой, как в первом коде. Пример с прорисовкой пунктирной окружности (отсюда):
Комментариев нет:
Отправить комментарий