Svg.js 中的同步容器和对象

Question

我正在使用 svg.js 并尝试从 A->B 制作一个对象运行，然后旋转 90 度，然后继续运行。但是当旋转物体时，它也会旋转坐标轴。所以，我将该对象放入容器中 (draw.group()) 但是对象动画和组动画是异步工作的。这是我的代码

<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 = draw.group()
        var circle= group.rect(50, 50)

        circle.animate(2000).rotate(90, 0, 0)    
        group.animate(2000).move(100, 100)
    </script>
</body>

因此，我希望矩形对象先旋转，然后移动，而不是同时工作。
谢谢你帮助我。

Answer 1

使用回调

circle.animate(2000).rotate(90, 0, 0).after(function() {
  group.animate(2000).move(100, 100)
})

http://svgjs.dev/animating/#callbacks

Svg.js 中的同步容器和对象

Syncronous Container and Object in Svg.js

javascript

svg.js