Анимация в svg.js не имеет такого же результата - PullRequest
Новая
       5

Анимация в svg.js не имеет такого же результата

0 голосов
/ 20 сентября 2018

Мой код svg.js использует действие поворота и действие перемещения, но два результата не имеют одинаковую координату центра. Вот мой код 

<body>
    <div id="drawing"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.js"></script>
    <script type="text/javascript">
        var draw = SVG('drawing')
        var group_1 = draw.group()
        var group_2 = draw.group()
        var rect_1 = group_1.rect(50, 20).fill('#f06').center(50, 50)
        var rect_2 = group_2.rect(50, 20).fill('#f09').center(50, 50)

        rect_1.animate(1000).rotate(45).after(function(){    
        group_1.animate(1000).center(100, 100)})

        group_2.animate(1000).center(100, 100)
    </script>
</body>

1 Ответ

0 голосов
/ 21 сентября 2018

В SVG группах необходимо понимать группировку элементов.В основном так же, как в фотошопе.Вы можете выбрать несколько элементов и поворачивать или масштабировать их одновременно.Это, в свою очередь, означает, что группы не имеют геометрии сами по себе.Это полностью зависит от того, где группа видна на экране (x, y), или от того, насколько она (с / height).

По этой причине вы не можете move группа.Вы можете только преобразовать это.Чтобы упростить API, svg.js предоставляет вам удобный метод перемещения и центрирования, который - под капотом - переводит группу.

В вашем примере вы перемещаете группу после ее вращения.Но вы делаете это с абсолютной трансформацией.Это означает, что svg.js пытается перевести движение в уже существующее вращение.Эта математика иногда не срабатывает.

Чтобы решить вашу проблему, вы должны использовать относительные преобразования.Это означает, что движение на вершине вращения.Это также означает, что вам нужно выяснить, насколько вы хотите переместить группу.

В настоящее время мы работаем над версией 3 файла svg.js, которая значительно упрощает эту трансформацию.Поэтому я надеюсь, что окончательное решение будет в ближайшее время

...