svg.js内の同じ要素上に複数の重なっているアニメーション

Question

以前のアニメーションがまだアクティブな間、要素に対してアニメーションを開始したいとします。ただし、要素のanimate()を呼び出すと、現在のアニメーションの最後に新しいアニメーションがキューに入れられます。

たとえば、要素が新しい位置に移動されているアニメーションを考えてみましょう。今、私はまた、それが特定の位置に達すると消えるようにしたい。次の例では、80％ではなく移動の最後に「once」アニメーションがキューに入れられます。

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％にジャンプするので、あなたはそれが独自の問題を抱えているに気づくでしょうとして： は、しかし、あなたが何ができるかをアニメーション化する必要がある新しいプロパティを追加しています。だから、これはあなたのために働くアプローチではありません。

次の試み：私たちは自分自身の

を不透明度を計算

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

：duringメソッドを使用します。