问svg.js中的动画效果不同
EN

Stack Overflow用户

提问于 2018-09-20 17:17:46

回答 1查看 47关注 0票数 1

我的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>

javascript

svg

svg.js

回答 1

Stack Overflow用户

发布于 2018-09-21 15:25:05

在SVG中，组需要理解为一组元素。基本上与photohop中的相同。可以选择多个图元并同时旋转或缩放它们。这反过来意味着组本身没有几何体。它完全取决于组在屏幕上可见的内容(x，y)或bif的大小(with/height)。

这就是为什么你不能move一个组的原因。你只能改变它。为了保持api的简单性，svg.js提供了方便的移动和居中方法，这些方法在幕后翻译组。

在您的示例中，在旋转该组后移动该组。但你要做的是绝对的转变。这意味着svg.js试图不配合运动进入已经存在的旋转。这道数学题有时做得不好。

要解决您的问题，您必须使用相对转换。这意味着运动是在旋转的顶端。这也意味着你必须通过你想要移动团队的程度来计算。

我们目前正在开发svg.js的第三版，它大大简化了这种转换业务。因此，我希望最终的解决方案很快就会出现。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52421612

复制

相似问题

问svg.js中的动画效果不同
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问svg.js中的动画效果不同EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问svg.js中的动画效果不同
EN