Question

我需要一些小帮助才能适应这个动画：http://codepen.io/tutsplus/pen/ByRzOV

介于M和T之间：

＆＃13;

<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>

＆＃13;

我已经尝试了很多并且玩过但没有获得成功。请帮忙。或者还有其他方法可以在SVG中使用这种类型的Circle动画。我试图创造，但没有奏效。还有没有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是破折号数组的总和（或者它是行程的两倍？），顺时针方向是负数。

SVG动画问题。没有达到预期的效果

1 个答案: