Вот пример.
Я пытаюсь сделать анимацию для 'path', используя атрибуты dasharray \ dashoffset
Но Snap Svg неправильно вычисляет длину path.
Svg изображение, создано с помощью составного контура в Adobe Illustrator
Я что-то неправильно делаю, или это bug, о котором я должен сообщить?
Есть ли способ рассчитать длину правильно?
/*First svg*/
var path = Snap('#svg path');
var pathLength = Snap.path.getTotalLength(path); //calc length
path.attr({
"stroke-dashoffset": 0,
"stroke-dasharray": pathLength
});
$("#total").text(pathLength);
/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/
Snap.animate(0, pathLength, function(value) {
path.attr({
'stroke-dashoffset': value
});
$("#len").text(value);
}, 5000, mina.easeinout);
/*Second svg*/
var path2 = Snap('#svg2 path');
var selectedLength = 112; //select length by playing with styles in browser
path2.attr({
"stroke-dashoffset": 0,
"stroke-dasharray": selectedLength
});
$("#total2").text(selectedLength);
Snap.animate(0, selectedLength, function(value) {
path2.attr({
'stroke-dashoffset': value
});
$("#len2").text(value);
}, 5000, mina.easeinout);
.wrap {
width: 100px;
float: left;
margin: 0 20px 0 0;
}
#svg,
#svg2 {
fill-opacity: 0;
stroke: #000;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.body:after {
content: '';
clear: both;
display: block;
}
.panel {
font-family: Arial;
line-height: 1.3em;
}
Ответ
Спасибо Alexandr_T. Он объяснил с точки зрения теории почему анимация ломалась. Я переписал составной path в несколько маленьких pathов. Начало каждого pathа начинается с d="M..." (moveto). Правки сделал в блокноте. Вот код с использованием Snap SVG.
/*First svg*/
var path = Snap('#svg path');
var pathLength = Snap.path.getTotalLength(path); //calc length
path.attr({
"stroke-dashoffset": 0,
"stroke-dasharray": pathLength
});
$("#total").text(pathLength);
/*path.animate({"stroke-dashoffset": pathLength}, 3500, mina.ease);*/
Snap.animate(0, pathLength, function(value) {
path.attr({
'stroke-dashoffset': value
});
$("#len").text(value);
}, 5000, mina.easeinout);
/*Second svg*/
var svg2 = Snap('#svg2');
var paths = svg2.selectAll("path");
var maxLength = 0;
var tempLength = 0;
for (key in paths.items) {
tempLength = Snap.path.getTotalLength(paths.items[key]);
if (maxLength < tempLength) {
maxLength = tempLength;
}
}
svg2.attr({
"stroke-dashoffset": 0,
"stroke-dasharray": maxLength
});
$("#total2").text(maxLength);
Snap.animate(0, maxLength, function(value) {
svg2.attr({
'stroke-dashoffset': value
});
$("#len2").text(value);
}, 5000, mina.easeinout);
.wrap {
width: 100px;
float: left;
margin: 0 20px 0 0;
}
#svg,
#svg2 {
fill-opacity: 0;
stroke: #000;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.body:after {
content: '';
clear: both;
display: block;
}
.panel {
font-family: Arial;
line-height: 1.3em;
}
Комментариев нет:
Отправить комментарий