基于单个输入字段的动画输出 [英] Animated output based on single input field
问题描述
我正在尝试对基于单个输入值* 4.5计算得出的输出进行动画处理.计算本身是有效的,但是我无法弄清楚如何为该值设置动画,我想做的是使输出计数很快达到计算出的值.我发现 https://codepen.io/shivasurya/pen/FatiB 具有计算我想实现的动画,但无法弄清楚如何在我的输入和输出字段中实现它,到目前为止,我有:
I'm trying to animate an output which is calculated based on a single input value * 4.5. The calculation itself is working but I cannot figure out how to animate the value, what I'm trying to do is have the output count up to the calculated value quite quickly. I've found https://codepen.io/shivasurya/pen/FatiB which has the count animation I'd like to implement, but can't figure out how to implement it to my input and output fields, so far I have:
<form id="ewcalc" oninput="updateOutput()">
<input name="income" type="number" value="0" />
<output for="income" name="loan">0</output>
</form>
<script type="text/javascript">
function updateOutput() {
var form = document.getElementById("ewcalc");
form.elements["loan"].value=eval(parseInt(form.elements["income"].value) * 4.5);
}
</script>
关于如何实现动画的任何建议?我已经尝试了好几种方法,但是都没有用,如果尝试使用onsubmit会出错.
Any suggestions how I can implement the animation? I've tried several things, none of which are working, and getting errors if I try using onsubmit.
推荐答案
You'll probably want to use requestAnimationFrame
like this:
function updateOutput() {
var income = $("#income").val() * 4.5;
var output = Number($("#loan").text());
if (income !== output) {
if (income > output)
output += 0.5;
else if (income < output)
output -= 0.5;
$("#loan").text(output);
requestAnimationFrame(updateOutput);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="ewcalc" oninput="updateOutput()">
<input id="income" type="number" value="0" />
<output for="income" id="loan">0</output>
</form>
这篇关于基于单个输入字段的动画输出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!