首先非常网友Adam‘的无私分享，把Jquery核心动画功能用原生JS写出来，而且代码非常少，为了方便网友们学习，每个功能都把注释写得非常详细，一共带有10个Demo，此次JavaScript学习笔记一(运动原理)有以下内容：
一、基础运动框架
1. 需要初始化一个定时器 var timer = null;
2. 清除时间轴 clearInterval(timer);
3. 设置补间动画（30针/秒） timer = setInterval(function(){},30);
4. 设置速度(越大越快，越小越慢) var speed = 10;
5. 判断结束位置 if( 当前值 < 目标值 ){}
6. 如果到达目标值，则清除时间轴 clearInterval(timer);
7. 未达到目标值，则 当前值 加 速度目标当前值 += 速度
二、缓冲运动
1. 逐渐变慢,最后停止
2. 距离越远,速度越大 -- 速度由距离决定 -- 速度 = （目标值 - 当前值）/ 缩放系数
3. Math.ceil() // 向上取整 Math.floor() // 向下取整
三、运动框架改进
1. 改进定时器,给多个事件元素绑定定时器,作为物体属性 oList[i].timer = null;
2. 改进参数,给多个事件元素绑定参数,作为物体属性 oList2[d].alpha = 30;
3. 多物体运动不要有公共参数
四、弹性运动 ， 碰撞运动
1. 加减速运动 减速运动
if(demo9.offsetLeft < 200){
iSpeed+=1;
} else if(demo9.offsetLeft >= 0) {
iSpeed-=1;
};
2. 弹性运动 不适用 height width 不能为负数速度 += ( 目标值 - demo9.offsetLeft )/5;
3. 摩擦力：速度 *= 0.7;
4. 碰撞运动
10个Demo如下：
Example - 1 - 小方块匀速运动 [ 停止条件 ： Math.abs(div1.offsetLeft - nTarget) < num ]
Example - 2 - 图片淡入淡出[ 透明度兼容IE,FF： opacity:0.3; filter:alpha(opacity:30) ]
Example - 3 - 小方块缓冲左右运动 [ 速度取整：iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed) ]
Example - 4 - 右边浮动层 [ parseInt(iTarget) ]
Example - 5 - 多个DIV改变宽度 [ 给每个元素绑定时间轴 oList[i].timer = null ]
Example - 6 - 多个IMG改变透明度 [ 给每个元素绑定属性 oList[i].alpha = null ]
Example - 7 - 任意值运动框架( 混合多维动画 )
Example - 8 - 完美运动框架
Example - 10 - 碰撞运动
如果您觉得本文的内容对您的学习有所帮助：
关键字：
网友Adam‘ JavaScript学习笔记 运动原理