SVG Мерцающая проблема анимации - PullRequest
Новая
       94

SVG Мерцающая проблема анимации

0 голосов
/ 24 февраля 2020

В приведенном ниже коде 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.

...