Contador Regresso

Question

I have an accountant but I would like to adapt it to count back, currently it counts from 1 to 30, but I would like it in reverse... ie, from 30 to 1.

var time = 30;
var initialOffset = '149';
var i = 1

$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

var interval = setInterval(function() {
		$('h2').text(i);
		if (i == time) {  	
			clearInterval(interval);
			return;
	}
	$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
	i++;  
}, 1000);

.item {
	position: relative;
	float: left;
}

.item h2 {
	text-align:center;
	position: absolute;
	line-height: 40px;
	width: 100%;
}

svg {
	transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 149;
  stroke-dashoffset: 149;
  transition: all 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <h2>0</h2>
  <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" class="circle_animation" r="23.85699" cy="40" cx="40" stroke-width="4" stroke="#000" fill="none"/>
  </svg>
</div>

Answer 1

You can do this by creating a new control variable for the count, thus keeping the variable i for the animation:

• We change the value of h2 to 30.
• We create the variable count which will be the countdown.
• In the setInterval, count will be decremented: count--.
• We replaced the text of h2 at the value of count.
• And the check that cleans the setInterval checks whether count is equal to 0.

let time = 30;
let initialOffset = 149;
let i = 1;
let count = 29;

$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));

let interval = setInterval(function() {
  $('h2').text(count);

  if (count == 0) {  	
    clearInterval(interval);
    return;
  }

  $('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
  i++;
  count--;
}, 1000);

.item {
  position: relative;
  float: left;
}

.item h2 {
  text-align:center;
  position: absolute;
  line-height: 40px;
  width: 100%;
}

svg {
  transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 149;
  stroke-dashoffset: 149;
  transition: all 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <h2>30</h2>
  <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" class="circle_animation" r="23.85699" cy="40" cx="40" stroke-width="4" stroke="#000" fill="none"/>
  </svg>
</div>

In summary, we just reverse the logic present in the variable i.

---

Now if you want the animation to be reversed too, then we can only work with the variable i.

• We change the value of h2 to 30.
• We change the variable i to start at the next decrement number.
• In the setInterval, i is to be downgraded: i--.
• In the $('.circle_animation').css('stroke-dashoffset'...) we increase the value by changing the present calculations.
• And the check that cleans the setInterval checks whether i is equal to 0.

let time = 30;
let initialOffset = 149;
let i = 29;

$('.circle_animation').css('stroke-dashoffset', 1);

let interval = setInterval(function() {
  $('h2').text(i);

  if (i == 0) {  	
    clearInterval(interval);
    return;
  }

  $('.circle_animation').css('stroke-dashoffset', (time-i+1)*(initialOffset/time) );
  i--;  
}, 1000);

.item {
  position: relative;
  float: left;
}

.item h2 {
  text-align:center;
  position: absolute;
  line-height: 40px;
  width: 100%;
}

svg {
  transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 149;
  stroke-dashoffset: 149;
  transition: all 1s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <h2>30</h2>
  <svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
    <circle id="circle" class="circle_animation" r="23.85699" cy="40" cx="40" stroke-width="4" stroke="#000" fill="none"/>
  </svg>
</div>