3

Как сделать и показать анимацию увеличения числа от 0 до 80%?

<svg version="1" xmlns="http://www.w3.org/2000/svg" width="100" height="100"
 style="border:1px solid crimson" viewBox='0 0 50 50'>
  <circle r="20" cx="50%" cy="50%" fill="" stroke="#03BE9B" stroke-width="2"/>
  <text x="13" y="30" fill="red">80%</text>
</svg>

2 ответа 2

7

Например, так:

$(document).ready(function() {
  $('.num').each(function() {
    $(this).prop('Counter', 0).animate({
      Counter: $(this).text()
    }, {
      easing: 'swing',
      duration: 10000,
      step: function(now) {
        $(this).text(Math.ceil(now).toFixed(0) + '%');
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="border:1px solid crimson" viewBox='0 0 50 50'>
  <circle r="20" cx="50%" cy="50%" fill="" stroke="#03BE9B" stroke-width="2"/>
  <text x="13" y="30" fill="red" class="num">80%</text>
</svg>

4
  • можно сделать инструментами svg ?
    – Leks
    24 дек 2019 в 18:05
  • подождем увидим :)) (+)
    – Leks
    24 дек 2019 в 18:24
  • 1
    @Sevastopol' анимацию дуги на SVG очень даже можно сделать и красиво будет смотреться, а вот динамическую анимацию цифр, чисто на SVG сделать невозможно, так как негде хранить и прибавлять промежуточные данные 24 дек 2019 в 18:41
  • @ Alexandr_TT можно анимацию дуги ?
    – Leks
    24 дек 2019 в 19:05
5

Решение JS

Анимация реализуется за счет изменения stroke-dasharray

Расчет параметров анимации

d="M50 10
    a 40 40 0 0 1 0 80
    a 40 40 0 0 1 0 -80"

Подробнее, что означает каждый параметр дуги эллипса – Elliptical Arc (A,a)

Как видно из этой формулы окружность имеет радиус 40px

Полная длина окружности равна 2 * 40 * 3.14 = 251.2

При stroke-dasharray ="0, 251" окружность полностью скрыта

stroke-dasharray ="251, 0" окружность полностью нарисована

Увеличивая длину штриха от максимума до нуля можно получить эффект заполнения дуги

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);

body
{text-align:center;
font-family:sans-serif;
}
svg{height:90vh;}

text {
font-size:20;
text-anchor:middle;
fill:#FF00AE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

<svg id="animated" viewbox="0 0 100 100" style="border:1px solid gray">
  <circle cx="50" cy="50" r="45" fill="skyblue"/>
  <path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>
<script>
var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

var s = Snap('#animated');
var progress = s.select('#progress');

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);
</script>

SVG SMIL

Примеры анимации двойной дуги.

.circle-bg {
  fill: none;
  stroke: #ddd;
  stroke-width: 3.8;
}
.circle-red{
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round; 
  stroke:red;
  stroke-dasharray:0 100;
}
.circle-green{
  fill:none;
  stroke: yellowgreen;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray:0 100;   
}

#txt1 {
text-anchor:middle;
dominant-baseline:central;
font-size:6px;
fill:dodgerblue;
}
<svg id="svg1" width="80vw" height="80vh" viewBox="0 0 36 36" opacity="1" class="circular-chart cons">
<g id="gr1">  
  <!-- Gray circle  -->
   <path  class="circle-bg" d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" />
  
 		
   <path class="circle-red"    
        style="opacity: 0.5;" d="M33.9155 18
        a 15.9155 15.9155 0 0 1 -31.831 0
        a 15.9155 15.9155 0 0 1 31.831 0" >
    <!-- Red circle rotation animation    -->
   <animate
	  id="an_red"
	  attributeName="stroke-dasharray"
	  dur="1s"
	  values="0 100;100 0"
	  begin="svg1.click"
	  end="an_green.end-1s"
	  repeatCount="indefinite"
	  
	  restart="whenNotActive" />
	 </path>      
	<circle class="circle-green"   
        cx="17.8155" cy="17.8155" r="14" >
		<!-- Green circle rotation animation -->
      <animate
	    id="an_green"
		attributeName="stroke-dasharray"
		begin="svg1.click+1s"
		dur="10s"
		values="0 100; 100 0"
		repeatCount="1"
		
		restart="whenNotActive"/>
    </circle>	
   <text id="txt1" x="50%" y="50%"  >Click me
      <!-- Text fade animation -->
	<animate attributeName="opacity" begin="svg1.click" dur="1s" to="0" fill="freeze" restart="whenNotActive" />
   </text>  
 </g>   
     <animate xlink:href="#svg1" attributeName="opacity" values="1;0" begin="an_green.end" dur="1s" fill="freeze" />
</svg>

Пример с заполнением окружности на 119% Первая более светлая дуга символизирует 100% Вторая дуга, более темного цвета заполняет остальные 19%

.circle-bg {
  fill: none;
  stroke: #ddd;
  stroke-width: 3;
}
.circle-round{
  fill: none;
  stroke-width: 3;
  
  stroke-linecap: round;
  stroke-dasharray:0 100; 
  }
 #txt1 {
text-anchor:middle;
dominant-baseline:central;
font-size:8px;
fill:red;
opacity:0;
}
<svg id="svg1" height="80vh" viewBox="0 0 36 36" class="circular-chart cons" >
   <!-- gray circle background -->
  <path class="circle-bg"  class="circle-bg" d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" />

 <path id="red" class="circle-round" stroke="#FFB5B5"
      
         d="M33.9155 18
        a 15.9155 15.9155 0 0 1 -31.831 0
        a 15.9155 15.9155 0 0 1 31.831 0" > 
	
	<!-- Animation filling the red circle 100% -->
	<animate
	  id="an_red"
	  attributeName="stroke-dasharray"
	  begin="svg1.click"
	  dur="4s"
	  values="0 100;100 0"
	  fill="freeze"
	  repeatCount="1"
	  restart="whenNotActive"/>
   </path> 	
   
  <path id="dark_red"  class="circle-round"  stroke="red" 
        stroke-dasharray="0 100" 
        d="M33.9155 18
        a 15.9155 15.9155 0 0 1 -31.831 0
        a 15.9155 15.9155 0 0 1 31.831 0" >
	  
	  <!-- Animation filling a dark red circle by 19% -->
	<animate 
	 id="an_dark_red"
	 attributeName="stroke-dasharray"
	 begin="an_red.end"
	 dur="1s"
	 values="0 100;19 81"
	 fill="freeze"
	 restart="whenNotActive"  />
  </path> 
   
    <text id="txt1" x="50%" y="50%"  >119%
      <!-- The appearance of the text -->
	<animate attributeName="opacity" begin="an_dark_red.end" dur="1s" to="1" fill="freeze" restart="whenNotActive" />
   </text>  
 
</svg>

Заполнение на 175%

#svg1 {
 opacity:1;
 animation: hide 3s ease-out 10s forwards;
 } 
 
 @keyframes hide {
  100% {
    opacity: 0;
  }
} 
 .circle-bg {
  fill: none;
  stroke: #ddd;
  stroke-width: 3;
}
.circle-round{
  fill: none;
  stroke-width: 3;
    stroke-linecap: round;
  stroke-dasharray:0 100; 
  } 
  
  #red {
  animation: progress 4s ease-out forwards;
  }
  
  @keyframes progress {
  100% {
    stroke-dasharray: 100 0;
  }
} 

#dark_red {
animation: progress2 3s ease-out 3.9s forwards;
}  

@keyframes progress2 {
  100% {
    stroke-dasharray: 75 25;
  }
} 
  
 #txt1 {
text-anchor:middle;
dominant-baseline:central;
font-size:8px;
fill:#CB5CCB;
opacity:0; 
animation: text_an 2s ease-out 7s forwards;
}   

@keyframes text_an {
  100% {
    opacity: 1;
  }
}
<svg id="svg1" height="80vh" viewBox="0 0 36 36" class="circular-chart cons" >
   <!-- gray circle background -->
  <path class="circle-bg"  class="circle-bg" d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831" />

 <path id="red" class="circle-round" stroke="#CBAACB"
      
         d="M33.9155 18
        a 15.9155 15.9155 0 0 1 -31.831 0
        a 15.9155 15.9155 0 0 1 31.831 0" > 
		
   </path> 	
   
  <path id="dark_red"  class="circle-round"  stroke="#CB5CCB" 
        stroke-dasharray="0 100" 
        d="M33.9155 18
        a 15.9155 15.9155 0 0 1 -31.831 0
        a 15.9155 15.9155 0 0 1 31.831 0" >
	 	 
  </path> 
   
    <text id="txt1" x="50%" y="50%"  >175%  </text>   
      
 
</svg>

Источник:@Alexandr_TT Enso

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.