Question

我需要创建一个动画效果，其中电弧在产生脉冲-在180度和102度之间交替变化。同样，它需要同时在两侧对称地伸长/压缩。我有这个弧（src）的svg：

<svg width="138px" height="138px" viewBox="0 0 138 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>blue-beam</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <radialGradient cx="50%" cy="4.72722907%" fx="50%" fy="4.72722907%" r="45.2727709%" id="radialGradient-1">
            <stop stop-color="#09FEFE" offset="0%"></stop>
            <stop stop-color="#3DFBFE" stop-opacity="0" offset="100%"></stop>
        </radialGradient>
        <path d="M69,0 L69,0 C107.107648,-7.00026132e-15 138,30.8923523 138,69 L138,69 C138,107.107648 107.107648,138 69,138 L69,138 C30.8923523,138 4.66684088e-15,107.107648 0,69 L0,69 C-4.66684088e-15,30.8923523 30.8923523,7.00026132e-15 69,0 Z" id="path-2"></path>
    </defs>
    <g id="blue-beam" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-3" fill="white">
            <use xlink:href="#path-2"></use>
        </mask>
        <path stroke="url(#radialGradient-1)" stroke-width="4" d="M69,2 C31.9969218,2 2,31.9969218 2,69 C2,106.003078 31.9969218,136 69,136 C106.003078,136 136,106.003078 136,69 C136,31.9969218 106.003078,2 69,2 Z"></path>
    </g>
</svg>

CSS动画新手在这里。谁能帮忙使用CSS制作动画吗？我被困在如何从两侧实际改变弧本身的长度（延长/缩短）。我读到有关笔画偏移的信息，但这似乎画出了一端的路径

Answer 1

有很多方法可以理解“脉冲”。我会轻松的去。（将其记录下来）

通过改变不透明度值的径向渐变，圆弧的笔触具有“褪色”效果。如果更改渐变延伸的半径，则似乎可以看到更长或更短的笔触，直到它逐渐消失为透明为止。这样您将无法获得确切的长度，但是它可能或多或少地为您工作。

现在有一个缺点：CSS gradient functions（您可以使用CSS进行动画处理）不适用于SVG笔触。您需要SVG <radialGradient>元素，并且需要为其r属性设置动画。那是XML属性，因此不能用CSS设置动画，而只能用SMIL animation设置动画。尚未针对Edge / IE实现这些功能，但至少有基于Java的polyfill，例如fakesmile。

（从理论上讲，SVG 2将gradientTransform定义为表示属性，可以通过transform函数用CSS对其进行动画处理，但是实际上，这尚未由浏览器实现。）

<svg width="138px" height="138px" viewBox="0 0 138 138" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="50%" cy="4.72722907%" fx="50%" fy="4.72722907%"
                    r="45.2727709%" id="radialGradient-1">
        <stop stop-color="#09FEFE" offset="0%"></stop>
        <stop stop-color="#3DFBFE" stop-opacity="0" offset="100%"></stop>
        <animate attributeName="r" values="45%;80%;45%" keyTimes="0;0.5;1"
                 dur="2s" repeatCount="indefinite"
                 calcMode="spline" keySplines=".5 0 .5 1;.5 0 .5 1" />
    </radialGradient>
  </defs>
  <path style="fill:none;stroke:url(#radialGradient-1);stroke-width:4"
        d="M69,2 C31.9969218,2 2,31.9969218 2,69 C2,106.003078 31.9969218,136 69,136 C106.003078,136 136,106.003078 136,69 C136,31.9969218 106.003078,2 69,2 Z"></path>
</svg>

CSS动画：拉伸和压缩弧

1 个答案: