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

正如您将注意到它有自己的问题，因为oopacity立即跳到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)
             }
           });

我们只是自己计算不透明度

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

1 个答案: