いわゆるイージングアニメーションは、アニメーション（減速または加速）に基づいて要素の速度をゆっくりと増減するプロセスです。？非常に簡単です。タイマーが実行されるたびに、現在の距離+変更のステップサイズが実行されることが理解できます。最初に、次の式が必要です。
この式は、現在の距離ごとに追加される変更ステップサイズであり、ステップサイズ式と呼ばれます:(目標値-現在の位置）/ 10 （この10は変更可能）
ステップサイズの式の理解：
ステップサイズの最初の増分：
800pxに達したときにターゲット値が停止するとします
ステップサイズの2番目の増分：
3番目の増加のステップサイズ：
以下の手順は類似しており、ステップサイズを小さくして減速効果を出すことができます。左からの距離が目標距離と同じになると、タイマーをクリアして停止することができます。
1つ：コードケース：
図に示すように、ボックスを目標位置800pxまで継続的に減速させます。
JSの実装：
<script>
document.addEventListener('DOMContentLoaded',function(){
var box=document.querySelector('div');
var btn=document.querySelector('button');
function run(obj,long){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(obj.offsetLeft==long){ //左边距离与目标距离一样时就停止（清除定时器）
window.clearInterval(obj.timer);
}else{
step=(long-box.offsetLeft)/10 //步长公式
obj.style.left=obj.offsetLeft+step+'px';
}
},20)
}
btn.addEventListener('click',function(){
run(box,800)
})
})
</script>
しかし、これにはまだ欠点があります。つまり、目標は800pxで停止することですが、795.5pxで停止することがわかります。これは、要求時にすべての小数を除算できないという問題があるためです。ステップサイズなので、この問題を解決する必要があります。私たちが取らなければならない問題：上向きの変換（Math.ceil）は
改善されたコード：
<script>
document.addEventListener('DOMContentLoaded',function(){
var box=document.querySelector('div');
var btn=document.querySelector('button');
function run(obj,long){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(obj.offsetLeft==long){
window.clearInterval(obj.timer);
}else{
step=Math.ceil((long-box.offsetLeft)/10)
obj.style.left=obj.offsetLeft+step+'px';
}
},20)
}
btn.addEventListener('click',function(){
run(box,800)
})
})
</script>
このようにして、目標値と同じ移動距離を得ることができます！
追加のケースの説明：
次に、この場合、ステップサイズの式を使用して、逆方向に進む効果を完成させることができます。原理は、負のステップ値を取得することです。これにより、現在の距離+ステップサイズは実際には減算になり、逆方向に進むことができます。10進変換の問題に注意してください。正のステップの追加は上向きの変換です。次に、下向きの変換を使用して負のステップを減らす必要があります。ここで、三項演算子を追加して、ステップが正か負かを判断し、上変換と下変換のどちらを使用するかを選択できます 。step = step> 0？Math.ceil（step）：Math.floor（step）
<body>
<script>
document.addEventListener('DOMContentLoaded',function(){
var box=document.querySelector('div');
var btn800=document.querySelector('.go800');
var btn500=document.querySelector('.go500');
function run(obj,long){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(obj.offsetLeft==long){
window.clearInterval(obj.timer);
}else{
step=(long-box.offsetLeft)/10
step=step>0?Math.ceil(step):Math.floor(step) //判断步长正负来选择使用哪个转型
obj.style.left=obj.offsetLeft+step+'px';
}
},20)
}
btn500.addEventListener('click',function(){
run(box,500)
})
btn800.addEventListener('click',function(){
run(box,800)
})
})
</script>
<div></div>
<button class="go800">到800</button>
<button class="go500">到500</button>
</body>上記の問題は完全に解決できます！！
2：次の問題は、イージングアニメーションにコールバック関数を追加することです。単純なターゲット効果は、タイマーが停止したとき、つまりボックスがターゲット位置に到達した後、ボックスの色やその他の効果を変更することです。コールバック関数を追加します。
アニメーション関数を呼び出すパラメーターに、実際のパラメーターとして色を変更するコールバック関数を追加する必要があります（最初のアニメーション関数の呼び出しを例として取り上げます）。
//第一个动画函数的调用
btn500.addEventListener('click',function(){
run(box,500,function(){
box.style.backgroundColor='red';
})
})次に、アニメーション関数のパラメーターに受け取る値が必要です。パラメーターにcallbackという名前を付けます。受け取った後、関数が呼び出されると、1つのステップを実行するのと同じになります：callback = function（）{}。私たちの目標は色の変更後に停止することなので、この関数の呼び出しはタイマー終了判定条件の後に行う必要があります
if(callback){ //如果有回调函数实参传入，就执行回调函数，没有就不执行
callback();
}完全なコードは次のとおりです。
<body>
<script>
document.addEventListener('DOMContentLoaded',function(){
var box=document.querySelector('div');
var btn800=document.querySelector('.go800');
var btn500=document.querySelector('.go500');
var btn0=document.querySelector('.go0')
function run(obj,long,callback){
clearInterval(obj.timer)
obj.timer=setInterval(function(){
if(obj.offsetLeft==long){
window.clearInterval(obj.timer);
if(callback){
callback();
}
}else{
step=(long-box.offsetLeft)/10
step=step>0?Math.ceil(step):Math.floor(step)
obj.style.left=obj.offsetLeft+step+'px';
}
},20)
}
btn500.addEventListener('click',function(){
run(box,500,function(){
box.style.backgroundColor='red';
})
})
btn800.addEventListener('click',function(){
run(box,800)
})
btn0.addEventListener('click',function(){
run(box,0)
})
})
</script>
<div></div>
<button class="go800">到800</button>
<button class="go500">到500</button>
<button class="go0">到原位</button>
</body>