Как реализовать Анимацию выделения сектора окружности цветом от 0 до 360 градусов

#javascript #html #jquery #css #svg

Образно, процесс можно проиллюстрировать на примере стрелочных часов: одна стрелка
неподвижна, другая двигается до определённого значения и пространство между ними заполняется
цветом (стрелок при этом нет, это просто образная визуализация границ).
    

Ответы

Ответ 1

CSS решение

Все стили перенес в css и анимация сделана с помощью правил css 



.container {
width:25%;
height:25%
}
#crc {
fill:none;
stroke:green;
stroke-width:100;
stroke-dashoffset:314;
stroke-dasharray:314;
animation: draw 10s ease-out infinite forwards;
}
@keyframes draw {
  from {
    stroke-dashoffset: 314;
  }

  to {
    stroke-dashoffset: 0;
  }
}   

 





Приложение полностью адаптивно, так же как вариант решения SVG   

Работает во всех современных браузерах, кроме IE, который не понимает анимацию по
определению.


Ответ 2

SVG решение

Используется техника с изменением атрибута stroke-dashoffset от максимального значения
до нуля. Поэтому линия будет рисоваться от нуля до полной длины. 

Возьмем окружность с радиусом r="50px" поэтому длина окружности будет равна 2*50*3.14=314   

максимальные значения -stroke-dashoffset="314" stroke-dasharray="314"  

Первый пример будем анимировать рисование окружности: 








Чтобы рисовать сектор сделаем ширину строки окружности равной радиусу, умноженному
на 2, так как строка рисуется равномерно по обе стороны от линии. 

Итого будет stroke-width="100"