3

0 から 99 まで増加する変数があります。

次に、増加する変数と同じ速度で移動したい div がありますが、移動の両端のみを定義したい (たとえば、上から下に移動すると、一番上の位置と一番下の位置のみを定義します) . 主変数が値を 0 から 99 に変更している間、残りは自動的に補間されます。

私が得た検索結果はすべてアニメーションに関するものでした。ただし、変数が変更されていない場合は div が移動しないため、これは正確にアニメーション化されているわけではありません。JavaScriptでこれをどのように行うのが最善でしょうか?

EDIT：いくつかのモックアップコード（おそらく構文エラーがあります）：

<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>
4

4 に答える 4

11

何かのようなもの：

// 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れた値を別のものに変更するか、最大値を渡す必要があります。

于 2012-08-07T16:05:51.293 に答える
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
于 2012-08-07T16:07:46.830 に答える
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
于 2012-08-07T16:10:15.503 に答える
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();

</ p>

于 2012-08-07T16:10:54.730 に答える