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

我也切换到剪辑路径而不是掩码，因为它们a）a）更好地支持和b）允许多个路径。

Here's a Codepen使用CSS制作动画（暂时仅适用于WebKit）。

更新：这是使用适用于所有浏览器的GSAP的Codepen：http://s.codepen.io/kgrote/debug/mPxzZY

动画SVG蒙版擦除

1 个答案: