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>

因此，我希望rect对象先旋转然后移动，而不要同时工作。
感谢您的帮助。

Answer 1

使用回调

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

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

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

1 个答案: