javascript - 动画 SVG 蒙版删除

Question

这是我要完成的 CSS/JS/SVG 动画的 Storyboard。两个三 Angular 形掩码从任一侧进入，然后相交产生负掩码:

三 Angular 形相交的点是它变得棘手的地方。当我将面板 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>

它看起来基本上是在绘制两个形状，中心的负空间菱形 mask 和外部三 Angular 形的其余部分。

所以静态蒙版本身似乎可以使用 SVG，但我不知道如何动画它。有没有可以简化这种 SVG 过渡/补间的库，或者可以动态计算路径的奇特数学方程式？

还是我完全以错误的方式看待这个问题，而有一种更简单的方法可以完全做到这一点？

Answer 1

所以解决方案是让它既简单又复杂。

我需要三层，而不是两层叠加一个面具。底部的一个显示在第一个 mask 后面，第二个被传入的三 Angular 形遮盖，第三层在其上方，复制到第一个，其中应用了菱形 mask 。

<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，使其不可见。两个三 Angular 形剪辑路径相互动画，显示下面的底层。当两个三 Angular 形点相遇时，顶层的菱形剪辑路径按比例放大，露出顶层，它是底层的副本。

我还切换到剪辑路径而不是 mask ，因为它们 a) 得到更好的支持并且 b) 允许多个路径。

Here's a Codepen使用 CSS 制作动画(目前仅适用于 WebKit)。

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