html - SVG 动画问题。没有得到想要的

Question

我需要一点帮助来适应这个动画:http://codepen.io/tutsplus/pen/ByRzOV

M 和 T 之间的这个:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve">
<path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4
	c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z
	 M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41
	h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2
	C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9
	C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9
	L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/>
</svg>

我试了很多，玩了很多，但没有成功。请帮忙。或者有没有其他方法可以在 SVG 中使用这种类型的圆形动画。我也尝试创建但没有成功。还有没有css和js可以吗？

提前致谢。非常感谢。

亲切的问候

Answer 1

这是 CSS 动画的一种方式:https://jsfiddle.net/3o9msftL/1/ ，虽然它没有完全相同的缓动，而且似乎比 GreenSock JS 动画(我还没有深入研究)更占用 CPU。

基本上我添加了一个看起来像这样的圆圈:

<circle cx="120" cy="29" r="23" 
        stroke-width="6" stroke="#000" fill="none" 
        style="animation: dash 5s infinite; 
               animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
               transform: rotate(-90deg) /* else it starts on the right side */; 
               transform-origin: 120px 29px"
        stroke-dasharray="150, 150" stroke-linecap="round"/>

这些尺寸是因为它们似乎适合您的 SVG 的其余部分，我相信 150,150 值是因为它大约是 2πr(即周长)。然后在 CSS 中，我添加了以下 CSS:

@keyframes dash {
  to {
    stroke-dashoffset: -300;
  }
}

300 是虚线数组的总和(或者是笔划的两倍？)，顺时针方向为负数。