Javascript Snap.svg: анимация вращения проходит долгий путь при 270 градусах - PullRequest
Новая
       28

Javascript Snap.svg: анимация вращения проходит долгий путь при 270 градусах

0 голосов
/ 04 декабря 2018

У меня проблема с snap.svg, когда всякий раз, когда я анимирую вращение между 269 и 270 градусами, все вращается вокруг всего круга, а не продвигается на один градус.Вот минимальный фрагмент кода, который воссоздает проблему: 

function testRotation() {
  var draw = Snap('#test');
  var box = draw.rect(0, 0, 100, 161.5);
  var rotation = 268;
  var increment = 1;
  var transform = 't200,200r'+rotation+',50,80.75';
  console.log(transform)
  box.attr({
    fill: '#000000',
    transform: transform});

  function rotate() {
    if (rotation > 271) increment = -1;
    if (rotation < 269) increment = 1;
    rotation += increment;
    var transform = 't200,200r'+rotation+',50,80.75';
    console.log(rotation);
    box.animate({transform: transform}, 1000);
    setTimeout(rotate, 1000);
  }

  setTimeout(rotate, 1000)
}

Вот версия JSFiddle, где вы можете увидеть ее в действии: http://jsfiddle.net/qsmzexut/2/

Она начинается при 268 градусах, а затем каждыйво-вторых, это увеличивает угол на один градус.Когда он проходит от 269 до 270, он проходит все вокруг.Когда он достигает 272, он возвращается вниз, затем обратно и т. Д. Как вы можете видеть, это поведение присутствует в обоих направлениях.

Есть ли способ избежать такого поведения?Я хотел бы иметь возможность вращаться на одну ступень и не заставлять ее вращаться по всему кругу!Спасибо.

1 Ответ

0 голосов
/ 05 декабря 2018

чтобы каждый раз немного его двигать - rotation = rotation - increment;

...