Basic principle of animation: box target position = box current position + step size
Key knowledge: timer
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic principles of animation</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>Resolution: in the above code, use offsetLeft to get the distance between the box and the left side of the body, and then use the timer to move the 10px distance every 0.03 seconds after the click event is triggered until left:600px; (to achieve the purpose of sliding, rather than moving directly)
The specific effects are as follows: Basic principles of animation
Encapsulate animation functions:
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Package animation</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){
//The first parameter is the animated object, and the second target position
obj.timer = setInterval(function(){
if(obj.offsetLeft > target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 10 + "px";
},30);
}
</script>
</html>The specific effects are as follows: Animation packaging
Back and forth movement:
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reciprocating sliding</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){
//The first parameter is the animated object, and the second target position
clearInterval(obj.timer);//Prevent animation acceleration confusion caused by multiple clicks
var speed = target > obj.offsetLeft ? 5 : -5;
//When the target value is greater than the current value, speed is 5, otherwise - 5;
obj.timer = setInterval(function() {
var result = target - obj.offsetLeft;//Difference value
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) < 5){
//When the absolute value of the difference is less than 5
obj.style.left = target + "px";
clearInterval(obj.timer);
}
},30);
}
</script>
</html>The specific effects are as follows: Round trip