snap.svg движущийся объект по кругу

Я просто хочу переместить загруженный SVG по кругу. Вот что я получил до сих пор, идея существо: «оставить объект, где она есть, повернуть его в круг с радиусом 30»:snap.svg движущийся объект по кругу

var svgObject = Snap("svg#object g"); 
var path = svgObject.path("M0 0 a60 60 0 0 0 30 30"); 
var pathLength = path.getTotalLength(); 

Snap.animate(0, pathLength, function(value) { 
    movePoint = path.getPointAtLength(value); 
    svgObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y)); 
}, 5000, mina.easeOut);

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

Все указанные выше коды перемещают объект вправо. Я хочу, чтобы он выполнял полный круг (заканчивая точно там, где он начинался).

Что мне нужно изменить, чтобы код выше работал, как описано?

источник

2015-09-14 Micha

Ее не ясно, что проблема на самом деле вы испытываете. Код изначально выглядит разумным для перемещения по пути (но неполного), но что происходит, когда он работает с любым объектом, который у вас есть? Вероятно, у вас есть ошибка при выполнении parseInt в строке с запятой в ней, вы, вероятно, захотите 2 parseInts по одному для каждого значения movePoint. – Ian

@ Я установил код (я его не копировал и не вставлял). На самом деле есть 2 parseInt. Вы говорите, что код неполный, чего не хватает? thx – Micha

Отсутствует объект, который вы хотите переместить, и путь не является кругом. Возможно, вы могли бы просто преобразовать поворот вокруг центра смещения, это зависит от того, будете ли вы против того, чтобы объект был повернут, или если он всегда хочет быть вертикальным. Я бы поставил его на jsfiddle, чтобы мы могли видеть, что происходит и какие ошибки. – Ian

Его всегда намного проще, если вы включаете полный код и разметку. Скорее всего, вы пытаетесь преобразовать основной объект svg (как я вижу, код был отредактирован), а не преобразование g-объекта. Также ваш путь к анимации не прав. Поскольку разметка не отображается, я не могу ее проверить, но вот рабочий пример.

Просто исправьте круг, так что он содержит только необходимый вам раздел.

var svgObject = Snap("#svgobject"); 
 
var groupObject = Snap('#svgobject g'); 
 

 
var path = svgObject.path("M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0").attr({ fill: 'none' }); 
 

 

 
var pathLength = path.getTotalLength(); 
 

 
Snap.animate(0, pathLength, function(value) { 
 
    movePoint = path.getPointAtLength(value); 
 
    
 
    groupObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y)); 
 
}, 5000, mina.easeOut);

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 

 
<svg id="svgobject" height="800" width="800"> 
 
    <g> 
 
    <rect x="50" y="50" width="50" height="50"/> 
 
    </g> 
 
</svg>

источник

2015-09-16 10:03:42 Ian

Спасибо, это было то, что я искал. Теперь у меня есть несколько последующих вопросов относительно пути: как мне заставить объект начать вращаться внизу и идти вверх, а затем назад? и как изменить направление вращения? Я попробовал пару путей, но все, что мне удалось, это сделать радиус вращения меньше. – Micha

Возможно, вы могли бы оживить от 1/2 длины круга до 0 или что угодно. Или создайте новый путь с разными начальными точками. – Ian

ответ

Смежные вопросы