Javascript svgjs如何使用滑块回放和控制一系列动画

我正在使用svg.js，希望播放一系列动画，然后为用户提供一个滑块来控制动画，以便更仔细地观看。看起来，当动画完成时，svg.js会清理资源，使情况为空，因此我无法重置它。我有一个简单的例子。在动画播放一次之后，我希望能够使用滑块并使用at方法重新定位动画

var draw=SVG（'drawing'），
rectA1=draw.rect（50,50）.fill（'#f06'），
rectA2=draw.rect（50,50）.fill（'#60f'）.translate（200），
rectB1=draw.rect（50,50）、fill（'#ce0'）、translate（01100）、opacity（0），
rectB2=draw.rect（50,50）、fill（'#0ec'）、translate（200100）、opacity（0）；
var animation1=rectA1.animate（）.move（200）.opacity（0）；
var animation2=rectA2.animate（）.move（-200）.opacity（0）.during（函数位置）{
document.getElementById（“范围\动画”）.value=pos；
});
变量animation3，animation4；
动画2.之后（功能（情况）{
animation3=rectB1.animate（）.move（200）.不透明度（1）；
animation4=rectB2.animate（）.opacity（1）.move（-200）
.在（功能）期间（pos）{
document.getElementById（“range\u animation”）.value=1+pos；
});
console.log（'animations'，animation1，animation2，animation3，animation4）；
});
document.getElementById（“范围\动画”）.addEventListener（“更改”，函数（el）{
///console.log（'change'，el，）；
var val=该值；
如果（动画1.情境）{
if（val<1）{
动画1.at（val.pause（）；
动画2.at（val.pause（）；
}否则{
动画3.at（val-1）.pause（）；
动画4.at（val-1）.pause（）；
}
}
}，假）；

下面是HTML

<div id="drawing">

</div>
<input type="range" id="range_animation" min="0.01" max="2" step=".01" value=".01">

---

正如@Fuzzyma所提到的，一种有效的方法是使动画循环，这样它们就不会被终止。然后必须管理从一个到另一个的转换集。任何未运行的动画都会立即以暂停状态启动。在我的真实项目（不是这个演示）中，有5个动画集，每个都有子动画，让我们看看这是否是可管理的

 var atEnd = function (pos) {

            var rounded = pos.toFixed(2);
            return  (rounded == .99 || rounded == 1.00);
        };

    var draw = SVG('drawing')
        , rectA1 = draw.rect(50, 50).fill('#f06')
        , rectA2= draw.rect(50, 50).fill('#60f').translate(200)
        , rectB1 = draw.rect(50, 50).fill('#ce0').translate(0, 100).opacity(0)
        , rectB2 = draw.rect(50, 50).fill('#0ec').translate(200, 100).opacity(0);

    var animation3, animation4, lastTotalRange;

    var animation1 = rectA1.animate().move(200).opacity(0).loop();
    var animation2 = rectA2.animate().move(-200).opacity(0).loop();

    animation2
        .during(function( pos ) {

            document.getElementById("range_animation").value = pos;

            if ( atEnd (pos) ) {

                animation2.pause();

                animation3 = rectB1.animate().move(200).opacity(1).loop();
                animation4 = rectB2.animate().opacity(1).move(-200).loop();

                animation4
                    .during(function( pos ) {

                        if (pos > 0) {
                            document.getElementById("range_animation").value = 1 + pos;
                        }


                        if (atEnd (pos)) {
                            animation4.pause();
                        }

                    });

                animation3.during( function(pos) {

                    if (atEnd (pos)) {
                        animation3.pause();
                    }
                });
            }
        });

    animation1.during(function( pos ) {

        if (atEnd (pos)) {
            animation1.pause();
        }
    });

    $('input#range_animation').on('input', function() {
        $(this).trigger('change');
    })
    $('input#range_animation').on('change', function() {

        var val = $( this).val(),
            delta = 0;
        if (lastTotalRange) {
            delta = val - lastTotalRange;
        }
        if (val < 1) {
            animation1.at(val).pause();
            animation2.at(val).pause();
            if (lastTotalRange > 1) {
                animation3.at(.01);
                animation4.at(.01);
            }
        }
        else {
            animation3.at(val - 1).pause();
            animation4.at(val - 1).pause();
            if (lastTotalRange < 1) {
                animation1.at(.99);
                animation1.at(.99);
            }
        }
      //  console.log('totalAnimationRange:change', delta, val);

        lastTotalRange = val;
    })

var-atEnd=功能（pos）{
var四舍五入=固定位置（2）；
返回值（四舍五入==0.99 | |四舍五入==1.00）；
};
var draw=SVG（“绘图”）
，rectA1=draw.rect（50,50）.fill（'#f06'）
，rectA2=draw.rect（50,50）.fill（'#60f'）.translate（200）
，rectB1=draw.rect（50,50）.填充（'#ce0'）。平移（0100）.不透明度（0）
，rectB2=draw.rect（50,50）、fill（'#0ec'）、translate（200100）、opacity（0）；
var animation3、animation4、lastTotalRange；
var animation1=rectA1.animate（）.move（200）.opacity（0）.loop（）；
var animation2=rectA2.animate（）.move（-200）.opacity（0.loop（）；
动画2
.在（功能）期间（pos）{
document.getElementById（“范围\动画”）.value=pos；
if（atEnd（pos））{
动画2.暂停（）；
animation3=rectB1.animate（）.move（200）.opacity（1.loop（）；
animation4=rectB2.animate（）.opacity（1）.move（-200）.loop（）；
动画4
.在（功能）期间（pos）{
如果（位置>0）{
document.getElementById（“range\u animation”）.value=1+pos；
}
if（atEnd（pos））{
动画4.暂停（）；
}
});
动画3.在（功能）期间（位置）{
if（atEnd（pos））{
动画3.暂停（）；
}
});
}
});
动画1.在（功能）期间（位置）{
if（atEnd（pos））{
动画1.暂停（）；
}
});
$（'input#range_animation'）。在（'input'，function（）上{
$（this.trigger（'change'）；
})
$（'input#range_animation'）。在（'change'，function（）上{
var val=$（this.val（），
δ=0；
if（lastTotalRange）{
delta=val-lastTotalRange；
}
if（val<1）{
动画1.at（val.pause（）；
动画2.at（val.pause（）；
如果（lastTotalRange>1）{
动画3.at（.01）；
动画4.at（.01）；
}
}
否则{
动画3.at（val-1）.pause（）；
动画4.at（val-1）.pause（）；
如果（lastTotalRange<1）{
动画1.at（.99）；
动画1.at（.99）；
}
}
//log（'totalAnimationRange:change'，delta，val）；
lastTotalRange=val；
})

还有html

<div id="drawing"></div>

<input type="range" id="range_animation" min="0.00" max="1.99" step=".01" value=".01">

和JSFIDLE：

---

你自己创建一个场景，并将其排队，这样你就可以重复使用它了？因此，将其排队，运行动画，再次排队并使用at？或尝试使用loop（true）来循环动画-在本例中，情况不会被清除case@Fuzzyma从第一个建议来看，我不知道你所说的“自己创造环境”是什么意思。有这样的例子吗？@Fuzzyma我已经开始使用循环方法，并在动画结束之前使用during（）回调停止，以链接不同的步骤。我也试过使用一次（pos），但我使用的号码（.99）并没有可靠地调用它。对于循环动画，最好在迭代完成时使用onComplete回调，对于非循环动画，最好使用onbeforeplete回调，以便在动画结束前暂停动画。谢谢你的帮助！一切都在svg上。js是一个对象。甚至情况也是如此。所以你可以去做新的SVG.Situation（parameters…）。此对象可以在使用相应方法后排队。

<div id="drawing"></div>

<input type="range" id="range_animation" min="0.00" max="1.99" step=".01" value=".01">