SCSS остановка ключевого кадра SVG круговая анимация в процентах - PullRequest
Новая
       27

SCSS остановка ключевого кадра SVG круговая анимация в процентах

1 голос
/ 26 марта 2019

Только что создал мой первый индикатор прогрессии ключевого кадра, я использую его в своем проекте реакции.Я хочу вставить процентное состояние в этот ключевой кадр, чтобы я мог заполнить процент до определенной точки.Пока он заполняется, но я не понимаю, как я могу остановить анимацию.Например, я хочу, чтобы наполнитель остановился на 50%, когда я нажимаю опору с '50'.

Пример JSfiddle 

<svg height="180" width="180" class="circle--static">
  <circle cx="100" cy="100" r="71" stroke="#cde9db" stroke-width="6" fill-opacity="0" />
</svg>
<svg height="180" width="180" class="circle--animated">
  <circle cx="100" cy="100" r="71" stroke="#68c087" stroke-width="10" fill-opacity="0" />
</svg>

.circle--static {
      circle {
         stroke-dasharray: 4;
         animation: stroke 2s ease-out forwards;
       }
   }

   .circle--animated {
      top: 0;
      left: 0;
      position: absolute;

      circle {
         stroke-dasharray: 1000;
         stroke-dashoffset: 1000;
         animation: stroke 60s ease-out forwards;
         animation-iteration-count: infinite;
      }

      @keyframes stroke {
         to {
            stroke-dashoffset: 0;
         }
      }

      @keyframes fadeIn {
         to {
            opacity: 1;
         }
      }
   }

1 Ответ

2 голосов
/ 26 марта 2019

Общая длина пути в SVG может быть найдена с помощью метода getTotalLength . В вашем случае вы также можете использовать формулу для периметра круга (2 * Math.PI * r).

В любом случае вам нужно знать длину пути, который вы хотите оживить, который в данном случае равен 445. 

stroke-dasharray: 445;
stroke-dashoffset: 445;

Если вы хотите остановить анимацию на 50%, это означает, что вы должны остановить ее на 445 / 2 = 222.5

 @keyframes stroke {
      to {
        stroke-dashoffset: 222.5;
      }
    }

Далее идет демо. Надеюсь, это поможет. 

svg {
  border: 1px solid;
}

.circle--static circle {
  stroke-dasharray: 4;
  animation: stroke 2s ease-out forwards;
}

.circle--animated {
  top: 0;
  left: 0;
  /*position: absolute;*/
}
.circle--animated circle {
  stroke-dasharray: 445;
  stroke-dashoffset: 445;
  animation: stroke 6s ease-out forwards;
  animation-iteration-count: infinite;
}
@keyframes stroke {
  to {
    stroke-dashoffset: 222.5;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
<svg height="180" width="180" class="circle--static">
  <circle cx="100" cy="100" r="71" stroke="#cde9db" stroke-width="6" fill-opacity="0" />
</svg>


<svg height="180" width="180" class="circle--animated">
  <circle id="kk" cx="100" cy="100" r="71" stroke="#68c087" stroke-width="10" fill-opacity="0" />
</svg>
...