animation - svg.js 中同一元素上的多个重叠动画

Question

我想在一个元素上开始一个动画，而之前的动画仍然处于事件状态。但是，在元素上调用 animate() 会将新动画排在当前动画的末尾。

例如，考虑一个元素被移动到新位置的动画。现在，我还想让它在到达某个位置时淡出。以下是在移动结束时排队“一次”动画，而不是在 80%。

rect.animate(1000).move(100, 100)
    .once(0.8, function(pos, eased) {
                 rect.animate(200).opacity(0);
               });

如何让元素在移动到 80% 时开始淡出？该 API 似乎是为链接动画而不是同时重叠动画而设计的。

Answer 1

您尝试做的事情有点复杂。不幸的是，不可能“侵入”当前动画并即时添加新动画。然而，您可以做的是添加一个应该动画化的新属性:

var fx = rect.animate(1000).move(100, 100)
    .once(0.8, function(pos, eased) {
             fx.opacity(0);
           });

您会注意到它有其自身的问题，因为不透明度立即跃升至 80%。所以这不是适合您的方法。

下一步尝试:使用during方法:

  var morh = SVG.morph(

  var fx = rect.animate(1000).move(100, 100)
    .once(0.8, function(pos, eased) {
             fx.during(function(pos, morphFn, easedPos) {
                 pos = (pos - 0.8) / 0.2
                 this.target().opacity(pos)
             }
           });

我们自己计算不透明度