SVG 对象不会回到其初始位置

Question

我正在尝试在一个简单的块上循环播放一系列动画。但是我不能让我的积木回到原来的位置。

var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(50, 50).attr({ fill: '#a3c' });

function animLoop(obj){
  obj.rotate(0).move(10,10)
    .animate(500, ">").rotate(50)
    .animate(200, "<").rotate(45)
    .animate(200, "<").move(10,15)
    .after(function(s){
      animLoop(this);
    });
}

animLoop(rect);

#drawing {
    border-style: solid;
    border-width: 2px;
    border-color: purple;
    width: 300px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.1/svg.min.js"></script>
<div id="drawing"></div>

我正在寻找如何使用 SVG.js 循环播放一系列动画，但没有成功。我尝试创建自己的，所以我可能做错了什么。

Answer 1

在 svg.js 中有一个序列循环没有实现是有充分理由的。但是，您的方法是完全有效的，也是您想要循环多个序列时的方法。

请注意，与 rotate(0) 一起使用的 absolute transformations 是相当不准确的。这是由于一般转换的性质，不是错误或其他问题。

因此，如果您想正确重置转换，请使用 untransform() 而不是 rotate(0)，它应该会按预期工作。

Answer 2

感谢@Hankofficer 的提问。正如@Fuzzyma 所说，您需要 untransform 在动画期间添加的转换。不幸的是，这没有记录，但我们正在进行更新。

我们对动画进行垃圾收集以避免无意的内存泄漏，类似于 jQuery 处理动画的方式。所以 .loop() 方法只对最后一个动画有效。将来我们可能会提供一种 .loopAll() 方法，但这仍处于讨论阶段。

这是一个工作示例：

'use strict'

var draw = SVG('drawing').size(300, 300)
var rect = draw.rect(50, 50).attr({ fill: '#a3c' })

animLoop(rect)

function animLoop(obj) {
  obj.untransform()
    .animate(500, ">").rotate(50)
    .animate(200, "<").rotate(45).dmove(0,5)
    .animate(500, ">").rotate(0).move(10,10)
    .after(function() {
      animLoop(this)
    })
}

#drawing {
    border-style: solid;
    border-width: 2px;
    border-color: purple;
    width: 300px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.1/svg.min.js"></script>
<div id="drawing"></div>

SVG 对象不会回到其初始位置

SVG object isn't going back to its initial position

javascript

svg.js