logo标签列表

在两个数值之间插值或“补间”（但不进行动画处理）

javascriptjquery
4
我有一个变量，它从0增加到99。然后我有一个div，我想让它以相同的速度移动，但我只想定义运动的两个端点（例如向下移动，我仅定义最上方位置和最下方位置）。在主变量的值从0到99更改时，其余部分应自动插值。
所有我得到的搜索结果都与动画有关。但这不完全是动画，因为如果变量没有改变，div就不应该移动。您会如何在javascript中最好地完成这项工作？
编辑：一些模拟代码（可能存在语法错误）：
<html>

<body>

<div id="increase"></div>
<div id="move"></div>

</body>

</html> 

 <script>
var counter =0;
var topValue =50;
var bottomValue =150;
var interpolatedValue


$('#increase').click(){
counter++; 
}

$('#move').css(){
top: interpolatedValue; //this should be an interpolation between 50 and 150 based on the current counter value
}


</script>
请提供一些代码，它没有按照您的意愿执行。从您的描述中很难理解您想要实现什么。 - Blazemonger
这是用于进度指示器吗？您可能希望在增加值的位置设置特定的样式值。 - Torsten Walter
当您使用“速率”一词来描述变量的变化时，它听起来像动画，但基于您所说的其他内容，似乎位置仅基于值或变量。这样理解正确吗？ - dqhendricks
你说值从0增加到99。然后你说这不是动画，因为值没有改变。这两者是互相排斥的。 - Jon Hanna
@Jon Hanna，我所说的不是动画，是指它不是基于时间的。这意味着我不能说“移动2秒钟”之类的话。因为当变量不改变时，div也不会移动。 - Sony packman
显示剩余3条评论
4个回答
12

类似这样：

// b - beginning position
// e - ending position
// i - your current value (0-99)
function getTween(b, e, i) {
    return b + ((i/99) * (e-b));
}

如果你的递增值将会不同于0-99，那么函数中硬编码的99将需要更改为其他值，或者传入最大值。

7
如果顶部和底部分别为400和600，您可以根据变量进行简单的数学计算来确定位置。
var theVariable = 25; // 1 to 100
var top = 400;
var bottom = 600;
var distance = bottom - top;
var position = top + ((theVariable / 100) * distance); // 450
是的，我认为你懂了。这比我想象的要简单！ - Sony packman
0
var MyVar = 0, Max = 99;
setInterval(increaseMyVar,30)//Call increaseMyVar every 30ms

function increaseMyVar()//MyVar Will go from 0 - 99
{
    MyVar = ++MyVar % Max;
}

//Do whatever you want with MyVar
0

这是我可能会采取的方法，这样你就可以在不改变脚本内大量内容的情况下“同时”对多个对象进行动画处理：

http://jsfiddle.net/pvKYX/

HTML：

<div class="mover" data-start="0" data-end="400" data-prop="margin-left"></div>

jQuery：

var p = 0;
function start(){
    $('.mover').each(function(){
        var $t = $(this);
       $t.css($t.data('prop'),$t.data('start')+($t.data('end')-$t.data('start'))/100*p);
    });
    if(p<100){
        p++;
        setTimeout(start,Math.round(Math.random()*500));
    }
}
start();

​

太好了，这看起来就是我需要的！只有setTimeout让我有点困惑，那部分是做什么的？ - Sony packman
抱歉，我测试过了，div元素的移动与变量p的值无关。除非更改p，否则不应该移动任何东西。 - Sony packman
@Sonypackman，这就是为什么我在setTimeout循环中增加了p的原因，以进行演示。你可能只需要$('.mover').each()部分，这是值根据p更新的地方。 - Andy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接