緩沖運(yùn)動(dòng)和勻速運(yùn)動(dòng)的區(qū)別
勻速運(yùn)動(dòng)：速度一直不變的運(yùn)動(dòng)
緩沖運(yùn)動(dòng)：速度逐漸加快或者減慢的運(yùn)動(dòng)
緩沖運(yùn)動(dòng)的速度處于不斷的變化中醒叁，和勻速運(yùn)動(dòng)不同的是邮府，緩沖運(yùn)動(dòng)一般不設(shè)置初始速度谤草，而是在運(yùn)動(dòng)函數(shù)內(nèi)部進(jìn)行計(jì)算膨俐。
緩沖運(yùn)動(dòng)公式
緩沖運(yùn)動(dòng)是速度逐漸變化的運(yùn)動(dòng)沙郭，速度公式為：（目標(biāo)點(diǎn) - 當(dāng)前位置）/ 縮放系數(shù)
緩沖運(yùn)動(dòng)的停止條件：當(dāng)前位置 = 目標(biāo)點(diǎn)
修改 animate 函數(shù)：
function animate(ele = null,config = {
attrs:{},
scale:10,
}){
// 清除定時(shí)器
clearInterval(ele.timer);
const attrs = config.attrs;
const scale = config.scale;
return new Promise((resolve)=>{
ele.timer = setInterval(()=>{
let flag = true;
for(const attr in attrs){
// 設(shè)置目標(biāo)距離
let target = Number.parseInt(attrs[attr]);
// 獲取當(dāng)前的樣式
let currentStyle = (attr === "opacity")?(Number.parseInt(Number.parseFloat(getCurrentStyle(ele,attr))*100)):Number.parseInt(getCurrentStyle(ele,attr));
// 如果改變的樣式是 opacity榴芳，target乘以100
if(attr === "opacity"){
target = Number.parseInt(Number.parseFloat(attrs[attr])*100);
}
// 獲取速度
let speed = (target - currentStyle) / scale
speed = (speed > 0) ? Math.ceil(speed):Math.floor(speed);
// 根據(jù)運(yùn)動(dòng)是否完成來(lái)設(shè)定 flag
if(currentStyle !== target){
flag = false;
}
// 運(yùn)動(dòng)到目標(biāo)點(diǎn)后清除定時(shí)器
if(currentStyle === target){
ele.style[attr] = (attr === "opacity")? target / 100 : target + "px";
}else{
// 根據(jù)當(dāng)前樣式動(dòng)態(tài)改變物體的樣式
ele.style[attr] = (attr === "opacity")?( currentStyle + speed)/100:(currentStyle + speed) + "px";
currentStyle += speed;
}
}
if(flag){
clearInterval(ele.timer);
resolve();
}
},30);
});
}
調(diào)用運(yùn)動(dòng)函數(shù)：
const ele = document.getElementById("inner");
const par = document.getElementById("par");
async function start(){
await animate(ele,{
attrs:{
left:"500px",
},
scale:10,
});
await animate(ele,{
attrs:{
left:0,
},
scale:5,
});
}
查看效果：
關(guān)于速度計(jì)算
現(xiàn)在解釋下上面的速度計(jì)算方式：
let speed = (target - currentStyle) / scale
speed = (speed > 0) ? Math.ceil(speed):Math.floor(speed);
由于我們給的 scale 并不總是讓 speed 的計(jì)算結(jié)果為整數(shù)嗡靡，很可能出現(xiàn)浮點(diǎn)數(shù)的情況，因此需要對(duì) speed 浮點(diǎn)數(shù)進(jìn)行處理窟感。在處理時(shí)又分為兩種情況：
- speed > 0
- speed < 0
當(dāng) speed >0 時(shí)讨彼，speed 無(wú)限接近于 +0，以縮放系數(shù)為 10 進(jìn)行舉例：
| 運(yùn)動(dòng)次數(shù) | 速度 | 位置 | 目標(biāo)位置 |
|---|---|---|---|
| 1 | 50 | 50 | 500 |
| 2 | 45 | 95 | 500 |
| 3 | 40.5 | 135.5 | 500 |
| ... | ... | ... | 500 |
| 43 | 1 | 491 | 500 |
| 44 | 0.9 | 491.9 | 500 |
| 45 | 0.9 | 491.9 | 500 |
| ... | ... | 491.9 | 500 |
在某個(gè)時(shí)候柿祈，速度會(huì)成為小數(shù)哈误，于是當(dāng)前位置也是小數(shù)哩至，由于像素不可能有小數(shù)值，于是當(dāng)前位置后的小數(shù)值會(huì)被拋棄蜜自，看起來(lái)小滑塊停止到目標(biāo)點(diǎn)之前了菩貌，而定時(shí)器仍然在運(yùn)動(dòng)（當(dāng)前位置不等于目標(biāo)位置），如圖所示：
因此我們將速度向上取整重荠，當(dāng)速度小于 1 時(shí)箭阶，取整后速度為 1，最終的速度為 1戈鲁，就能保證小滑塊一像素一像素的移動(dòng)到目標(biāo)點(diǎn)仇参，然后停止定時(shí)器。
當(dāng) speed < 0 時(shí)荞彼，分析方式和上面一樣冈敛。這里便不再贅述待笑，結(jié)論是當(dāng)速度小于 0 時(shí)鸣皂，對(duì)速度進(jìn)行向下取整，最終速度為 -1暮蹂。
多值緩沖運(yùn)動(dòng)
由于緩沖運(yùn)動(dòng)是基于前面的運(yùn)動(dòng)框架搭建的寞缝，因此也是支持多值運(yùn)動(dòng)的，下面羅列出一個(gè)栗子：
const ele = document.getElementById("inner");
async function start(){
await animate(ele,{
attrs:{
left:"500px",
width:"50px",
height:"50px",
fontSize:"10px",
lineHeight:"50px",
opacity:1,
},
scale:10,
});
}
效果如圖：
總結(jié)
本文介紹了緩沖運(yùn)動(dòng)仰泻，下面簡(jiǎn)單總結(jié)下二者的差距：
| | 緩沖運(yùn)動(dòng) | 勻速運(yùn)動(dòng) |
| :--------: | :-----: | :----: | :----: |
|運(yùn)動(dòng)形式 | 速度越來(lái)越慢 | 速度不變 |
|停止條件 | 當(dāng)前位置和目標(biāo)點(diǎn)重合 | 當(dāng)前位置和目標(biāo)點(diǎn)差值的絕對(duì)值小于速度值 |
|速度 | 需要進(jìn)行取整操作 | 速度不變 |
|最終速度 | 1 或 -1 | 速度不變 |
從視覺(jué)效果來(lái)看荆陆，緩沖運(yùn)動(dòng)比勻速運(yùn)動(dòng)更為炫酷一些，也是常用的運(yùn)動(dòng)方式集侯。后序的文章中被啼，我們還會(huì)介紹另外兩種運(yùn)動(dòng)形式：彈性運(yùn)動(dòng)和碰撞運(yùn)動(dòng)。
完棠枉。
