动画SVG面罩擦拭

Question

下面是我想要完成的CSS/JS/SVG动画的故事板。两个三角形掩码从两边进入，然后相交，从而产生一个负掩码：

​

​

三角形相交的那一点变得很棘手。当我将面板4的掩码导出到SVG时，如下所示：

<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

所以解决办法是让它变得更简单和更复杂。

我需要的是三层，而不是用一个面罩在对方上面的两层。底部的一个显示在第一个掩码后面，第二个被传入的三角形遮住，第三层在第三层上面，复制到第一个，其中应用了一个菱形面罩。

<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，使其不可见。这两个三角形剪辑路径是动画向对方，显示底部的层下。当两个三角形点相遇时，顶部层上的菱形夹子路径被放大，露出顶层，这是底部的重复。

我还切换到剪辑路径，而不是掩码，因为他们是一个更好的支持和b)允许多个路径。

这是一只Codepen在动画中使用CSS (目前只在WebKit中工作)。

更新:下面是一个使用GSAP的代码，它适用于所有浏览器：http://s.codepen.io/kgrote/debug/mPxzZY