版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lyxuefeng/article/details/82261611
动画的基本原理：盒子目标位置 = 盒子当前位置 + 步长
关键知识：定时器
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画基本原理</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 60px;
left: 0;
}
</style>
</head>
<body>
<button id="btn">start</button>
<div id="box" class="box"></div>
</body>
<script>
var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
btn.onclick = function(){
timer = setInterval(function(){
if(box.offsetLeft > 600){
clearInterval(timer);
}
box.style.left = box.offsetLeft + 10 + "px";
},30);
}
</script>
</html>解析：在上述代码中，使用offsetLeft得到box盒子相对于body左侧距离，然后使用定时器，在点击事件触发后每0.03秒移动10px距离，直到left:600px;为止(达到滑动的目的，而不是直接移动)
具体效果可见：动画基本原理
封装动画函数：
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装动画</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 100px;
left: 0;
}
</style>
</head>
<body>
<button id="btn1">300</button>
<button id="btn2">600</button>
<div id="box" class="box"></div>
</body>
<script>
function $(id){
return document.getElementById(id);
}
$("btn1").onclick = function(){
animate($("box"),300);
}
$("btn2").onclick = function(){
animate($("box"),600);
}
function animate(obj,target){
//第一参数为做动画的对象，第二位目标位置
obj.timer = setInterval(function(){
if(obj.offsetLeft > target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 10 + "px";
},30);
}
</script>
</html>具体效果可见：动画封装
往返运动：
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>往返滑动</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
top: 100px;
left: 0;
}
</style>
</head>
<body>
<button id="btn1">300</button>
<button id="btn2">600</button>
<div id="box" class="box"></div>
</body>
<script>
function $(id){
return document.getElementById(id);
}
$("btn1").onclick = function(){
animate($("box"),300);
}
$("btn2").onclick = function(){
animate($("box"),600);
}
function animate(obj,target){
//第一参数为做动画的对象，第二位目标位置
clearInterval(obj.timer);//防止多次点击导致动画加速混乱
var speed = target > obj.offsetLeft ? 5 : -5;
//当目标值大于当前值是speed为5，否则为-5;
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft;//差值
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) < 5){
//当差值绝对值小于5时
obj.style.left = target + "px";
clearInterval(obj.timer);
}
},30);
}
</script>
</html>具体效果可见：往返运动