アニメーションSVGマスクワイプ

Question

私が達成しようとしているCSS/JS/SVGアニメーションのストーリーボードです。二つの三角形のマスクは、負のマスクで得られた交差、どちらの側から入力します。それはトリッキー取得する場所三角形が交差

点です。私はSVGにパネル4のためのマスクをエクスポートする場合、それは次のようになります。それは基本的に2つの形状、中心部で負の空間ダイヤモンドマスクと外側の三角形の残りの部分を描いているよう

<svg width="416px" height="289px" viewBox="0 0 416 289" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <path d="M211.503681,65.6626347 L507.009604,-138.787586 L507.009604,425.787586 L211.507182,221.339788 L-84,425.792431 L-84,-138.787586 L211.503681,65.6626347 Z M211.503681,65.6626347 L99,143.5 L211.507182,221.339788 L324.01001,143.502422 L211.503681,65.6626347 Z" id="path-1"></path> 
    </defs> 
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
     <rect id="Rectangle-1-Copy-3" fill="#F6A623" x="0" y="0" width="416" height="289"></rect> 
     <mask id="mask-2" fill="white"> 
      <use xlink:href="#path-1"></use> 
     </mask> 
     <use id="Combined-Shape" fill="#000000" xlink:href="#path-1"></use> 
     <rect id="Rectangle-1-Copy-2" fill="#4990E2" mask="url(#mask-2)" x="0" y="0" width="416" height="289"></rect> 
    </g> 
</svg> 

に見えます。

静的マスクそのものはSVGでも可能ですが、のアニメーション化方法はわかりませんです。この種のSVGトランジション/トゥイーン、またはパスを動的に計算できる空想的な数式を単純化できるライブラリはありますか？

私はこれを完全に間違った方法で見ていますか、それを完全に行うもっと簡単な方法がありますか？

Answer 1

解決策は、それをより単純でより複雑にすることでした。

1つのマスクで2つのレイヤーを重ねる代わりに、3つのレイヤーが必要でした。最初のマスクの後ろにあるもの、下にある三角形の上にマスクされるもの、そしてその上の三つ目のレイヤーは、最初に複製され、ダイヤモンド型のマスクが適用されます。

<svg width="500" height="300" viewbox="0 0 500 300"> 
    <defs> 
     <clipPath id="triangles"> 
      <path id="left" d="M-250,-150 L250,150 L-250,450 Z" fill="black" /> 
      <path id="right" d="M250,150 L750,-150 L750,450 Z" fill="black" /> 
     </clipPath> 

     <clipPath id="diamond"> 
      <path id="diamond-path" d="M250,0 L500,150 L250,300 L0,150 Z" fill="black" /> 
     </clipPath> 
    </defs> 

    <!-- bottom --> 
    <g id="bottom"> 
     <rect fill="darkorange" x="0" y="0" width="500" height="300" /> 
     <text x="50%" y="65%" text-anchor="middle" class="text">Text</text> 
    </g> 

    <!-- middle/triangles --> 
    <g id="middle" clip-path="url(#triangles)"> 
     <rect fill="dodgerblue" x="0" y="0" width="500" height="300" /> 
     <text x="50%" y="65%" text-anchor="middle" class="text">Text</text> 
    </g> 

    <!-- top/diamond --> 
    <g id="top" clip-path="url(#diamond)"> 
     <rect fill="darkorange" x="0" y="0" width="500" height="300" /> 
     <text x="50%" y="65%" text-anchor="middle" class="text">Text</text> 
    </g> 

</svg> 

ダイヤモンドパスのある最上位レイヤーは、0にスケーリングされていて、目に見えません。 2つの三角形のクリップパスは互いに下に下のレイヤーを示すようにアニメーション化されています。 2つの三角形の点が一致すると、最上層のダイヤモンドクリップのパスがスケールアップされ、最下部の複製である最上層が表示されます。

マスクの代わりにクリップパスに切り替えました。これは、a）よりサポートされていて、b）複数のパスが許可されているからです。

Here's a CodepenアニメーションにCSSを使用しています（WebKitでのみ動作します）。

UPDATE：ここでは、すべてのブラウザで動作GSAPを使用してCodepenです：http://s.codepen.io/kgrote/debug/mPxzZY