javaScript基础(7)-动画
1.js中的动画，就是用定时器，不断的检测自身的位置加上步长所形成的一种移动效果；
公式为：动画公式=obj.offsetLeft+step;
我们先来体验一下动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于动画的一些问题</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:pink;
position: relative;
}
</style>
</head>
<body>
<div></div>
<button>点击</button>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
setInterval(function(){
div.style.left=div.offsetLeft+10+'px';
},100);
}
</script>
</body>
</html>
这是一个普通的动画，实现效果，有兴趣的話，可以粘贴复制，然后自己试一下；
问题：（1）为什么会无限制的移动；
（2）什么时候会停下来；
（3）怎么才能让他倒退；
回答：1.因为定时器一直调用；
2.可以设置条件，如到了400的位置停下来；
3.可以设置步长为负数；
再看一个代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于动画的一些问题</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:pink;
position: relative;
}
</style>
</head>
<body>
<div></div>
<button>点击</button>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
timer=setInterval(function(){
div.style.left=div.offsetLeft+10+'px';
if (div.offsetLeft>400) {
clearInterval(timer);
}
},100);
}
</script>
</body>
</html>
我们只在里面做了两件事情就把动画停了下来，1.给定时器加一个名字；2.给动画移动设置一个条件；
当到达我们条件的时候，清空定时器；
3.怎么让动画倒退？
在看一段代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于动画的一些问题</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:pink;
position: relative;
}
</style>
</head>
<body>
<div></div>
<button id='btn1'>200</button>
<button id='btn2'>400</button>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
function fn(btn,target){
btn.onclick=function(){
timer=setInterval(function(){
var step=target>div.offsetLeft?10:-10;
div.style.left=div.offsetLeft+step+'px';
if (div.offsetLeft>400) {
clearInterval(timer);
}
},100);
}
}
fn(btn1,200);
fn(btn2,400);
</script>
</body>
</html>
这段代码我们勉强能实现向后倒退的需求，但是到了指定位置会出现抖动的效果，这是为什么呢？
答：我们设置的目标位置为200，到了以后定时器还在走动，这就意味着，定时器里面的代码，还在运动，就会出现步长的判断（var step=target>div.offsetLeft?10:-10;）目标是200，自身位置已经到达了200，200>200?不大于，不大于的話，就会选择-10这个步长。然后在向下走（div.style.left=div.offsetLeft+step+'px';）div.offsetLeft的位置已经到达了200，步长为-10，然后盒子距左边的距离已经是190了，所以下次会选择步长为10，接着判断，这就形成了步长一直在10和-10之间切换，形成了盒子的抖动；
怎么解决这样的效果，在看一段代码；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关于动画的一些问题</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
width:100px;
height:100px;
background:pink;
position: relative;
}
</style>
</head>
<body>
<div></div>
<button id='btn1'>200</button>
<button id='btn2'>400</button>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
var btn1=document.getElementById('btn1');
var btn2=document.getElementById('btn2');
function fn(obj,btn,target){
btn.onclick=function(){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=target>obj.offsetLeft?10:-10;
obj.style.left=obj.offsetLeft+step+'px';
var result=target-obj.offsetLeft;
if (Math.abs(result)<10) {
clearInterval(obj.timer);
obj.style.left=target+"px";
}
},100);
}
}
fn(div,btn1,200);
fn(div,btn2,400);
</script>
</body>
</html>
我们设置一个绝对值，来确定，到底在哪里停留；
这就解决了盒子到达目标点位置的时候来回颤抖的问题；
最根本的解决思路是清除定时器；
