動畫移動效果
利用定時器實現的移動效果:
css:
<style>
div {
position: absolute;
width: 100px;
height: 200px;
">aqua;
}
span {
height: 100px;
width: 150px;
display: block;
position: absolute;
top: 300px;
}
</style>
html:
<body>
<button>點我啟動變換形態</button>
<button class="btn1">btn1緩動動畫500</button>
<button class="btn800">btn800</button>
<div></div>
<span>變換形態</span>
<script>
//簡單動畫函數的封裝,一般有兩個參數,對象和移動的最終目的地
//給不同的元素指定不同的定時器,將其變為對象.屬性 obj.timer 可以避免開辟內存空間
var div = document.querySelector('div')
var span = document.querySelector('span')
var btn = document.querySelector('button')
btn.addEventListener('click', function () {
animate(span, 400)
})
function animate(obj, target) {
//當我們把這個函數調用在一個點擊事件中,一直點擊的話會加速,而且會超出目標距離,是因為有了太多的定時器
//解決:每次點擊時候會生成定時器 , 那先清除定時器,再生成.
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offsetLeft > target) {
//如果div的左偏移大于500,則停止移動
clearInterval(obj.timer);
} else { //如果這個移動語句不在else中,那么到了目標位置點擊之后還會繼續走!
obj.style.left = obj.offsetLeft + 2 + 'px'
}
}, 30)
}
//調用函數
animate(div, 500)
//緩動動畫
//緩動動畫效果原理:讓元素運動慢慢的降下來,最后停止
//1.讓盒子每次移動的距離慢慢變小,速度就回慢慢落下來.
//2.核心算法: (目標值-現在的位置)/10 = 每次移動的距離步長
//3.停止的條件:讓盒子當前位置等于目標位置,就停止定時器
var btn1 = document.querySelector('.btn1')
var btn800 = document.querySelector('.btn800')
btn1.addEventListener('click', function () {
animate1(span, 500)
})
btn800.addEventListener('click', function () {
animate1(span, 800, function () {
alert('回調函數:我被調用了')
span.style.backgroundColor = 'green';
})
})
//給緩動動畫添加回調函數 即形式參數callback
function animate1(obj, target, callback) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//把步長值寫入定時器中
// var step = (target - obj.offsetLeft) / 10;
//把步長值取整,不要出現小數的問題
//var step = Math.ceil((target - obj.offsetLeft) / 10);
//把步長取整,回退和前進的時候都不出現小數
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
//回調函數寫在定時器結束里面,等定時器結束后再執行,而不是一調用就執行
if (callback) {//如果有回調函數,那就調用它
callback();
}
} else {
//把每次變化的步長改為一個慢慢變小的值 步長公式:(目標值-當前的位置)
obj.style.left = obj.offsetLeft + step + 'px'
}
}, 15)
}
//勻速動畫 盒子的left= 盒子當前的位置+固定的值
//緩動動畫 盒子的left=盒子當前的位置+變化的值 ((目標值-當前的位置))
</script>
</body>
浙公網安備 33010602011771號