小编给大家分享一下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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
