このようなアニメーション関数の要件があるとします：Divの幅を100pxから200pxに変更します。書かれたコードは次のようになるかもしれません：
コードコピーは次のとおりです。
<div id = "test1"> </div>
関数animate1（element、endvalue、duration）{
var starttime = new date（）、
startvalue = parseint（element.style.width）、
ステップ= 1;
var timerid = setInterval（function（）{
var nextvalue = parseint（element.style.width） + step;
element.style.width = nextvalue + 'px';
if（nextValue> = endValue）{
ClearInterval（TimerID）;
//アニメーションを表示するために時間がかかります
element.innerhtml = new Date -starttime;
}
}、duration /（endvalue -startValue） * step）;
}
animate1（document.getElementById（ 'test1'）、200、1000）;
原則は、特定の時間ごとに1pxを200pxまで増やすことです。ただし、アニメーションが終了した後の表示時間は1秒以上（通常は1.5秒前後）です。その理由は、setintervalが実行間隔を厳密に保証できないためです。
それを行うためのより良い方法はありますか？まず、小学校の数学の問題を見てみましょう。
コードコピーは次のとおりです。
建物と建物Bは100メートル離れていました。男は、建物Aから建物Bまで一定の速度で歩いた。 5分間歩いた後、彼は目的地に到着しました。彼は3分間でどのくらい離れていたのですか？
一定速度中の特定の時間の距離を計算するための計算式は、距離 *現在の時間/時間です。したがって、答えは100 * 3/5 = 60でなければなりません。
この質問からのインスピレーションは、特定の瞬間の旅を特定の式で計算できることです。同様に、アニメーションプロセス中の特定のモーメントの値は、蓄積される代わりに式を介して計算することもできます。
コードコピーは次のとおりです。
<div id = "test2"> </div>
関数animate2（element、endvalue、duration）{
var starttime = new date（）、
startValue = parseint（element.style.width）;
var timerid = setInterval（function（）{
varパーセンテージ=（新しい日付 - 開始時刻） /期間;
var stepValue = startValue +（endValue -startValue） *パーセンテージ;
element.style.width = stepvalue + 'px';
if（パーセント> = 1）{
ClearInterval（TimerID）;
element.innerhtml = new Date -starttime;
}
}、13）;
}
Animate2（document.getElementById（ 'test2'）、200、1000）;
この改善後、アニメーションの実行時間には最大10ミリ秒しかかかりません。ただし、問題は完全には解決されていません。ブラウザ開発ツールでTest2要素を確認すると、Test2の最終幅が200pxを超える可能性があることがわかります。 Animate2関数のコードを注意深く確認すると、次のことがわかります。
1.パーセンテージの値は1を超える場合があります。これは、Math.minによって最大値を制限することで解決できます。
2。endvalueまたはstartValueが小数である限り、パーセンテージの値が1以下であることが保証されている場合でも、（endValue -startValue） *の値はエラーを引き起こす可能性があります。実際、確実に必要なのは最終値の精度です。そのため、パーセンテージが1の場合は、EndValueを直接使用してください。
したがって、Animate2関数のコードは次のように変更されます。
コードコピーは次のとおりです。
関数animate2（element、endvalue、duration）{
var starttime = new date（）、
startValue = parseint（element.style.width）;
var timerid = setInterval（function（）{
//パーセンテージが1より大きくないことを確認してください
varパーセンテージ= math.min（1、（new Date -starttime） / duration）;
var stepvalue;
if（パーセント> = 1）{
//最終値の精度を確保します
StepValue = endValue;
} それ以外 {
StepValue = startValue +（endValue -startValue） *パーセンテージ;
}
element.style.width = stepvalue + 'px';
if（パーセント> = 1）{
ClearInterval（TimerID）;
element.innerhtml = new Date -starttime;
}
}、13）;
}
最後の質問があります。Setintervalの間隔が13msに設定されるのはなぜですか？その理由は、現在のモニターのリフレッシュレートが一般に75Hzを超えないため（つまり、1秒あたり75回更新されます。つまり、13msごとに更新されることを意味します）。