时间戳

首页 > 解决方案 > CSS动画：拉伸和压缩弧

css - CSS动画：拉伸和压缩弧

问题描述

我需要创建一个动画效果，其中一个弧是脉冲的 - 在 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 制作这个动画吗？我被困在如何从两侧实际改变弧本身的长度（拉长/缩短）。我读到了笔画偏移，但这似乎在一端画出了路径

标签： csssvgcss-animationssvg-animate

解决方案

有很多方法可以理解“脉冲”。我会选择一个简单的。（就写下来而言）

弧线的笔触具有通过改变不透明度值的径向渐变实现的“褪色”效果。如果您更改渐变延伸的半径，您似乎可以看到更长或更短的笔划，直到它消失为透明。你不会得到精确的长度，但它可能或多或少对你有用。

现在出现了缺点：可以使用 CSS 制作动画的CSS 渐变函数不适用于 SVG 笔画。您需要 SVG<radialGradient>元素，并且需要为其r属性设置动画。这是一个 XML 属性，因此不能使用 CSS 进行动画处理，而只能使用SMIL 动画。这些不是为 Edge/IE 实现的，但至少有基于 Javascript 的 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>

推荐阅读