README.md

#基础动画库以动画原理

最动画要做绝对定位,写left，写top；定好位置；

动画主要是从5个方向改变：

• 宽度 （width）
• 高度 （height）
• 水平 （left）
• 垂直 （top）
• 透明度 （opacity）

JS写动画，主要是学逻辑关系，深入研究闭包作用域；并不是完全用JS写动画。CSS3做这个会更好；

this关键字：

this是谁，和在哪儿定义没有关系，只和在哪儿执行有关系，看它的执行主体是谁；自执行函数是在window，所以this是window；

（只有执行的时候才能知道this是谁；）

动画要考虑临界值的问题；每走一步之前先做判断，判断当前的位置+步长，是否大于等于目标值；如果大于等于目标值；则停在目标值上；

定时器的清理；定时器开启之前要记得清理，这样可以避免作用域累计；示例代码如下

clearTimeout(timer);//timer里储存的是定时器的序列号，1,2,3,4,5,6,7,8,9之类的；代表某个定时器；清除的就是定时器的序列号；
//没开一次定时器，就会产生一个定时器的序列号；

    var cur=getCss(ele,"left");
    if(cur<target){//当前位置小于目标值；
        if(cur+11>=target){//临界值的判断；
            ele.style.left=target+"px";
        }else{
            ele.style.left=getCss(ele,"left")+11+"px";
        }
        timer=window.setTimeout(function(){move(ele,target)},30)

• 如果当前起始的位置小于我们的目标值的话，我们需要往右走，如果当前起始的位置大于我们的目标值的话，往左走，相等的话不走
  

• 不管方向，都需要做临界判断,为了保障临界点的准确性，需要在判断的时候加上我们的步长
  

  动画中的几部分:

1. 开始位置、结束位置、总距离；（总距离=结束位置-开始位置）
   

2. 总运动时间、定时器间隔时间 、步长 ；（步长=(总距离/总运动时间)*定时器间隔时间）
   

3. 运动的方式:匀速、减速、加速、变速