在两个值之间插值或"tween"(但不进行动画处理)

我有一个变量在增加，比如说从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>

像这样：

// 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更改为其他值，或传入最大值。

例如，如果顶部和底部分别为 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

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

以下是我可能的做法，这样您就可以一次"动画化"多个对象，而无需在脚本中做太多更改：

http://jsfiddle.net/pvKYX/

.HTML：

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

j查询：

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();

相关内容

最新更新

热门标签：