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

Question

我正在尝试在一个简单的 block 上循环播放一系列动画。但是我无法让我的 block 回到原来的位置。

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>