溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下javascript怎么實現緩動動畫效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
具體內容如下
1、主要使用setInterval定時函數
2、給需要動畫的元素添加絕對定位和偏移量，注意它的父元素要給相對定位
3、多個元素執行動畫，可以將動畫代碼封裝成一個函數
4、元素調用定時函數，定時移動，定時函數里- - -計算出每次移動距離，
公式：var step = (target - obj.offsetLeft) / 20;
obj 動畫對象, target 目標左偏移量，20 控制的是動畫速度，數值越大越慢，越小越快
5、定時函數里還可以接收回調函數，有的話，動畫結束時執行回調函數
6、注意定時函數里最前面寫上清除動畫的代碼- - -clearInterval(obj.timer);不寫的話，每次觸發元素動畫會效果疊加；寫上清除之前的動畫影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aninamate動畫</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 1000px;
margin: 0 auto;
}
button {
padding: 5px;
margin: 60px 10px;
border: 1px solid #666;
outline-color: palevioletred;
}
.both {
background-color: pink;
color: #fff;
background-color: palevioletred;
}
.box {
position: relative;
height: 210px;
margin: 0px auto;
background-color: #191b28;
}
.yutu {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 210px;
}
.qiaojingjing {
position: absolute;
top: 0;
left: 820px;
width: 180px;
height: 210px;
}
.word1 {
display: none;
position: absolute;
top: -50px;
left: 45%;
}
.word2 {
display: none;
position: absolute;
top: -30px;
left: 50%;
}
</style>
</head>
<body>
<div class="content">
<button class="btn1">于途前進</button>
<button class="btn2">喬晶晶前進</button>
<button class="both">雙向奔赴</button>
<button class="btn3">于途后退</button>
<button class="btn4">喬晶晶后退</button>
<div class="box">
<img src="images/于途.png" class="yutu">
<img src="images/喬晶晶.png" class="qiaojingjing">
<span class="word1">余生請多指教！</span>
<span class="word2">余生請多指教！</span>
</div>
</div>
<script>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var btn3 = document.querySelector('.btn3');
var btn4 = document.querySelector('.btn4');
var both = document.querySelector('.both');
var yutu = document.querySelector('.yutu');
var qiaojingjing = document.querySelector('.qiaojingjing');
var word1 = document.querySelector('.word1');
var word2 = document.querySelector('.word2');
btn1.addEventListener('click', function() {
animate(yutu, 340, function() {
word1.style.display = 'block';
});
});
btn2.addEventListener('click', function() {
animate(qiaojingjing, 520, function() {
word2.style.display = 'block';
});
});
btn3.addEventListener('click', function() {
animate(yutu, 0, function() {
word1.style.display = 'none';
});
});
btn4.addEventListener('click', function() {
animate(qiaojingjing, 820, function() {
word2.style.display = 'none';
});
});
both.addEventListener('click', function() {
animate(yutu, 340);
animate(qiaojingjing, 520);
word1.style.display = 'block';
word2.style.display = 'block';
});
// 動畫函數 obj動畫對象, target目標左偏移量, callback回調函數
function animate(obj, target, callback) {
// 清除之前的動畫
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 計算出每次移動距離
var step = (target - obj.offsetLeft) / 20;
// 步數取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + 'px';
if (obj.offsetLeft == target) {
// 停止動畫
clearInterval(obj.timer);
// 如果有回調函數，執行回調函數
if (callback) {
callback();
}
}
}, 30);
}
</script>
</body>
</html>動畫效果：
看完了這篇文章，相信你對“javascript怎么實現緩動動畫效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
