这里讲缓动动画是基于位置距离的。后面会有基于jquery时间 。
缓动动画和匀速运动类似,只不过缓动运动不用num++或者num–,而是用两个数据组成的一个公式。设开始位置start,结束位置end。缓动公式为:
start = start+(end-start)/10;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 100px;
left: 0;
}
</style>
</head>
<body>
<button id="btn">开始</button>
<div id="box"></div>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var start = 0;
var end = 500;
btn.onclick = function () {
setInterval(function () {
start = start + (end-start)/30;
box.style.left = start + "px";
},10);
}
</script>