Долгое время вожусь с анимацией закрашивания круга в зависимости от процента. Необходимо реализовать такое:
На данный момент я смог реализовать так:
То есть все как надо, анимация закрашивания работает, но радиус синего круга очень маленький. На данный момент он составляет 69.85699, а необходимо 140. Когда я увеличиваю радиус - получается какая-то каша, то есть анимация начинается не с той же точки и заканчивается вот этим
Выходит, что при маленьком радиусе точка старта стоит на месте, а при большом она движется просто вокруг.
Вот код:
setTimeout(function() {
// var circle = document.getElementById('circle');
// console.log(circle.getTotalLength());
var time = 5; /* how long the timer will run (seconds) */
var initialOffset = '440';
var one_percent = initialOffset/100;
var i = 0;
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('body').find(".statistics-left__donut-number").text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
}, 0);
svg{
transform: rotate(-90deg);
}
.circle_animation{
stroke-dasharray: 440;
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="320" height="320" viewBox="0 0 320 320">
<g filter="url(#filter0_dd)">
<circle cx="160" cy="160" r="100" fill="#F5F8FD"/>
</g>
<g filter="url(#filter1_ii)">
<mask id="a" fill="#fff">
<path d="M320 160c0 88.366-71.634 160-160 160S0 248.366 0 160 71.634 0 160 0s160 71.634 160 160zm-280.003 0c0 66.276 53.727 120.003 120.003 120.003 66.276 0 120.003-53.727 120.003-120.003 0-66.276-53.727-120.003-120.003-120.003C93.724 39.997 39.997 93.724 39.997 160z"/>
</mask>
<path d="M320 160c0 88.366-71.634 160-160 160S0 248.366 0 160 71.634 0 160 0s160 71.634 160 160zm-280.003 0c0 66.276 53.727 120.003 120.003 120.003 66.276 0 120.003-53.727 120.003-120.003 0-66.276-53.727-120.003-120.003-120.003C93.724 39.997 39.997 93.724 39.997 160z" stroke="#E3E6EC" stroke-width="80" mask="url(#a)"/>
</g>
<g>
<circle id="circle" class="circle_animation" cx="160" cy="160" r="140" stroke-width="40" stroke="#4277FF" stroke-linecap="round" fill="none" data-percent="30"/>
</g>
<defs>
<filter id="filter0_dd" x="22" y="22" width="276" height="276" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="-18" dy="-18"/>
<feGaussianBlur stdDeviation="10"/>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dx="18" dy="18"/>
<feGaussianBlur stdDeviation="10"/>
<feColorMatrix values="0 0 0 0 0.819608 0 0 0 0 0.85098 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
<filter id="filter1_ii" x="-20" y="-20" width="360" height="360" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-20" dy="-20"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feBlend in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="20" dy="20"/>
<feGaussianBlur stdDeviation="15"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix values="0 0 0 0 0.819608 0 0 0 0 0.85098 0 0 0 0 0.901961 0 0 0 1 0"/>
<feBlend in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
</defs>
</svg>
В JS скрипте, который отвечает за анимацию я пробовал увеличивать stroke-dashoffset, нашел как измерить длину круга (с помощью getTotalLength()) и подставил в переменную initialOffset - но получается еще хуже. Подскажите, что я делаю не так? Почему радиус так меняет круг?
Загрузил на JSFiddle: https://jsfiddle.net/robdev/d3kuvx1z/1/