Question

在下面的SVG Animation代码中，缺少平滑度。例如，此链接的加载程序-http://danilowoz.com/create-content-loader/具有平滑的动画。

<svg role="img" aria-label="Loading interface..." viewBox="0 0 200 200">
    <title>
      Loading interface...
    </title>
    <defs>
      <linearGradient id="yuo4zutvyn">
        <stop offset="0%" stop-color="#F5F8FB" stop-opacity="1">
          <animate attributeName="offset" repeatCount="indefinite" values="-2; -2; 1" keyTimes="0; 0.5; 1" dur="2">
          </animate>
        </stop>

        <stop offset="50%" stop-color="#E1E6ED" stop-opacity="1">
          <animate attributeName="offset" repeatCount="indefinite" values="-1; -1; 2" keyTimes="0; 0.5; 1" dur="2">
          </animate>
        </stop>

        <stop offset="100%" stop-color="#F5F8FB" stop-opacity="1"></stop>
        <animate attributeName="offset" repeatCount="indefinite" values="0; 0; 3" keyTimes="0; 0.5; 1" dur="2">
        </animate>

      </linearGradient>
    </defs>
    <circle style="fill: url(&quot;#yuo4zutvyn&quot;);" cx="20" cy="20" r="20"></circle>
    <rect style="fill: url(&quot;#yuo4zutvyn&quot;);" x="48" y="8" rx="3" ry="3" width="88" height="6"></rect>
    <rect style="fill: url(&quot;#yuo4zutvyn&quot;);" x="140" y="8" rx="3" ry="3" width="88" height="6"></rect>
    <rect style="fill: url(&quot;#yuo4zutvyn&quot;);" x="48" y="26" rx="3" ry="3" width="110" height="6"></rect>
  </svg>

如果有人可以帮助您解决问题，那就太好了。尝试更改duration和keyTimes的值。

代码参考-https://github.com/danilowoz/create-content-loader/blob/master/src/utils/template.js。

SVG闪烁动画问题

0 个答案: