使用javascript计算动画问题

Question

我使用Javascript制作了count动画功能。我已经对下面的代码进行了编码，但仍然存在问题。

我有以下数字，例如200、20.5、1500。动画运行时，编号20.5变为21。我希望那个号码保持为20.5，而其他号码保持为200和1500。

我的遗漏或错误在哪里？

$(document).ready(function() {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
});

#countAnimation {
display: flex;
justify-content: space-between;
}
.box-counter {
display: flex;
justify-content: center;
align-items: center;
background-color: #cacaca;
color: #0f0f0f;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countAnimation">
<div class="box-counter">
<div class="count">200</div>
</div>
<div class="box-counter">
<div class="count">20.5</div>
</div>
<div class="box-counter">
<div class="count">1500</div>
</div>
</div>

Answer 1

这可能会解决您的问题：

$(document).ready(function() {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
$(this).text(now % 1 > 0 ? now.toFixed(1) : now);
}
});
});
});

#countAnimation {
display: flex;
justify-content: space-between;
}
.box-counter {
display: flex;
justify-content: center;
align-items: center;
background-color: #cacaca;
color: #0f0f0f;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countAnimation">
<div class="box-counter">
<div class="count">200</div>
</div>
<div class="box-counter">
<div class="count">20.5</div>
</div>
<div class="box-counter">
<div class="count">1500</div>
</div>
</div>

Answer 2

一种解决方案是使用函数step，直到Math.ceil(now)大于最终数字。然后，当使用complete回调完成动画时，只需插入最终数字：

$(document).ready(function() {
$('.count').each(function() {
var countTo = Number($(this).text())
$(this).prop('Counter', 0).animate({
Counter: countTo - 1
}, {
duration: 4000,
easing: 'swing',
step: function(now) {
var ceil = Math.ceil(now)
if (ceil < countTo) {
$(this).text(ceil);
}
},
complete: function() {
$(this).text(countTo);
}
});
});
});

#countAnimation {
display: flex;
justify-content: space-between;
}
.box-counter {
display: flex;
justify-content: center;
align-items: center;
background-color: #cacaca;
color: #0f0f0f;
width: 150px;
height: 150px;
border-radius: 50%;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
font-size: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="countAnimation">
<div class="box-counter">
<div class="count">200</div>
</div>
<div class="box-counter">
<div class="count">20.5</div>
</div>
<div class="box-counter">
<div class="count">1500</div>
</div>
</div>