時(shí)間：2019/10/22
5).動(dòng)畫(huà)函數(shù)封裝
1.動(dòng)畫(huà)實(shí)現(xiàn)原理：通過(guò)定時(shí)器setInterval()不斷移動(dòng)盒子位置（具有定位屬性的盒子）。停止動(dòng)畫(huà)本質(zhì)是停止定時(shí)器。
2.動(dòng)畫(huà)函數(shù)簡(jiǎn)單封裝（需要傳遞目標(biāo)對(duì)象和目標(biāo)位置兩個(gè)參數(shù)）
<script type="text/javascript">
var box = document.querySelector('.box');
animate(box, 800);
function animate(obj, target) {
// 解決不斷觸發(fā)事件生成多個(gè)定時(shí)器問(wèn)題
if (obj.timer) clearInterval(obj.timer);
// 給不同元素指定定時(shí)器，性能優(yōu)化
obj.timer = setInterval(function() {
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
} else {
// 此時(shí)步長(zhǎng)都為1，勻速效果運(yùn)動(dòng)
obj.style.left = obj.offsetLeft + 1 + 'px';
}
}, 15);
}
</script>
3.緩動(dòng)動(dòng)畫(huà)原理：讓盒子每次移動(dòng)的距離慢慢變小，速度慢慢減小（減速效果）。
核心算法：（目標(biāo)位置 - 當(dāng)前位置）/ 10 值作為每次移動(dòng)的的步長(zhǎng)
function animate(obj, target) {
if (obj.timer) clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
if (step == 0) {
clearInterval(obj.timer);
} else {
// 步長(zhǎng)取整，避免因小數(shù)運(yùn)算而達(dá)不到目標(biāo)距離
// 正向滑動(dòng)，步長(zhǎng)向上取整；反向滑動(dòng)，步長(zhǎng)向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15);
}
4.動(dòng)畫(huà)函數(shù)封裝
PS：回調(diào)函數(shù)原理（將函數(shù)作為參數(shù)傳遞到另一個(gè)函數(shù)中，當(dāng)另一個(gè)函數(shù)執(zhí)行完之后，再執(zhí)行傳遞進(jìn)去的函數(shù)）
function animate(obj, target, callBack) {
if (obj.timer) clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
if (step == 0) {
clearInterval(obj.timer);
// 添加回調(diào)函數(shù)，存在時(shí)，在動(dòng)畫(huà)執(zhí)行完之后執(zhí)行(短路運(yùn)算)
callBack && callBack();
} else {
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + 'px';
}
}, 15);
}
5.輪播圖案例思路：
功能簡(jiǎn)介.jpg
顯示隱藏.jpg
底部圓鈕.jpg
點(diǎn)擊圓鈕.jpg
左右按鈕.jpg
按鈕與圓鈕聯(lián)動(dòng).jpg
自動(dòng)播放.jpg
PS：輪播圖加上節(jié)流閥（定義flag變量），防止左右按鈕快速點(diǎn)擊使圖片切換過(guò)快。
（執(zhí)行某個(gè)事件函數(shù)時(shí)打開(kāi)節(jié)流閥（flag = false），在某個(gè)回調(diào)中關(guān)閉節(jié)流閥（flag = true），每次觸發(fā)事件時(shí)判斷flag狀態(tài)）
6.返回頂部案例思路：
頁(yè)面滾動(dòng).jpg
動(dòng)畫(huà)返回頂部.jpg
7.筋斗云案例思路：
功能介紹.jpg
具體操作.jpg
