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

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

我们垃圾收集动画以避免无意的内存泄漏，类似于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>

Answer 2

在svg.js中有一个循环的序列没有实现的原因。但是，当你想要循环多个序列时，你的方式是完全有效的。

请注意，与absolute transformations一样使用的rotate(0)相当不准确。这是由于一般的转换的性质，并没有错误或其他东西。

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

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

2 个答案: