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

Question

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

https://jsfiddle.net/voam/xeajbhea/2/

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 animation1 = rectA1.animate().move(200).opacity(0);
var animation2 = rectA2.animate().move(-200).opacity(0).during(function(pos) {
  document.getElementById("range_animation").value = pos;
});
var animation3, animation4;

animation2.after(function(situation) {

  animation3 = rectB1.animate().move(200).opacity(1);
  animation4 = rectB2.animate().opacity(1).move(-200)
    .during(function(pos) {
      document.getElementById("range_animation").value = 1 + pos;
    });
  console.log('animations', animation1, animation2, animation3, animation4);

});

document.getElementById("range_animation").addEventListener("change", function(el) {
  ///console.log('change', el, );
  var val = this.value;    

  if (animation1.situation) {
    if (val < 1) {
      animation1.at(val).pause();
      animation2.at(val).pause();
    } else {
      animation3.at(val - 1).pause();
      animation4.at(val - 1).pause();
    }
  }



}, false);

HTML 下面

<div id="drawing">

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

Answer 1

@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;
    })

和html

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

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

还有 jsfiddle：

jsfiddle.net/voam/ob2bjfur/1/