JavaScript运动动画核心机制与实现详解

本文旨在整理并分享JavaScript运动动画的学习心得与关键技术点。

以下是经过系统梳理后的核心内容总结。

基础速度动画与停止控制

第一点：基础速度动画的实现原理。

首先，通过封装函数实现匀速运动，核心依赖于setInterval定时器机制。

oDiv.style.left=oDiv.offsetLeft+10+"px";
},30).

关于为何使用offsetLeft而非left属性，经查阅资料可知：

a.offsetLeft和left的相同之处都是表示子节点相对于父节点的左位置。 b.但是left是既可以读又可以写的，而offsetLeft是只读的； c.并且offsetLeft是没有单位的，获取子节点位置的时候后面不带px。

此处引申参考了相关技术博客，链接为：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201372885729561/。

其次，实现运动节点的停止控制。通过if语句判断offsetLeft是否达到目标值0，若满足则执行clearInterval(timer)。注意timer需预先初始化为null，并将定时器句柄赋值给该变量以便后续管理。

此外，需解决运动过程中的重复触发问题。若在运动未结束时再次触发，会导致速度累加。解决方法是在每次新运动开始前执行clearInterval(timer)以清除旧定时器。

最后，优化移入移出效果。通过传入速度speed和目标位置iTarget两个参数，实际上可根据iTarget的位置动态计算速度，从而简化为单一参数控制。

透明度渐变与缓冲运动算法

第二点：透明度渐变效果的实现。

其逻辑与速度动画类似，区别在于目标值iTarget代表透明度，流程同样包含清除旧定时器并开启新定时器进行判断。

定义透明度参数alpha，需注意定时器内的代码写法：

alpha+=speed；
oDiv.style.filter='alpha(opacity:'+alpha+')'; //这是非常重要的一种方法，注意是这样写的
oDiv.style.opacity=alpha/100; //注意不要忘记除以100

上述操作均针对行内样式进行设置。

第三点：缓冲运动的算法逻辑。

缓冲运动的核心特征是速度与距离成正比：距离越大速度越快，距离越小速度越慢。

基于此特性，需重新定义速度变量，初始速度为0，现改为动态计算。

var speed=iTarget-oDiv.offsetLeft;

随后重新定义定时器逻辑：

oDiv.style.left=oDiv.offsetLeft+speed+'px';

此时发现速度值过大，需进行缩放处理：

var speed=(iTarget-oDiv.offsetLeft)/10;

由此引入一个关键问题：由于屏幕最小显示单位为px，计算结果可能出现小数，导致最终left值无法精确等于目标iTarget。解决方案是引入Math.floor()向下取整或Math.ceil()向上取整。在定义speed后添加如下判断：

speed=speed>0?Math.ceil(speed):Math.floor(speed);

此举确保速度始终为整数，并在接近临界值时速度归零，从而精确停止。

多物体运动冲突与样式获取

第四点：多物体运动的实现与冲突解决。

首先获取所有运动物体形成数组，利用for循环遍历。在循环内绑定节点事件，函数内部使用this指代当前节点，例如调用startMove(this, iTarget)，函数定义时接收参数startMove(obj, iTarget)。

在获取当前宽度offsetWidth时，需使用obj参数获取对应值。

当鼠标移动极快时，可能出现节点宽度未恢复原状的现象。这是因为多个节点共用同一个定时器，前一个节点运动未结束时，后一个节点已清除其定时器。解决方法是为每个节点分配独立的timer属性，即在for循环中执行aDiv[i].timer=null，并在函数内部使用obj.timer替换全局timer。这提示我们共用定时器易引发冲突。

在透明度运动中，若用alpha替代speed，即使定时器不共用，多物体运动仍会出现问题，原因是alpha变量被所有节点共享导致相互干扰。解决方式类似timer，即在for循环中为每个节点单独分配alpha属性。

总结而言，解决运动冲突的核心策略要么初始化变量，要么为每个物体个性化分配变量。

第五点：获取元素样式的兼容性问题。

在调整节点宽度（如移入放大、移出缩小）的定时器中，若节点设置了border边框，会导致移入时尺寸小于目标值，移出时大于目标值。原因在于offset属性计算包含了width+padding+scrollbar+border，每次offset变化会额外增加border*2的数值，而定时器中每次减少的数值未包含此部分。

解决此问题的方法是在行内样式中直接设置width，并使用parseInt(oDiv.style.width)替代offsetLeft。但考虑到并非所有样式都写在行内，需定义一个函数来获取链入样式：

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //ie浏览器
　　　　}
}else{
return getComputedStyle(obj,false)[attr]; //其他浏览器
　　　　}
　　}

对于font-size等属性，在JavaScript中统一写作fontSize。

任意属性支持与链式同时运动

第六点：支持任意属性值的运动框架。

所有offset系列属性均存在小bug，应使用getStyle函数替代，该函数常与parseInt()配合使用，并通过变量保存结果。

在设置style.width时，也可采用对象键值对写法style['width']。

对于多物体属性值的调整，可将样式属性作为参数封装，使运动函数接收(obj, attr, iTarget)三个参数。

上述运动框架不适用于透明度变化，因为透明度涉及小数。原因有二：一是parseInt会截断小数，二是attr赋值时通常拼接px单位。对此，可通过if判断单独处理透明度，将parseInt替换为parseFloat，并移除px单位的拼接。

计算机浮点运算存在固有误差，例如0.07*100并不严格等于7。为此引入Math.round()函数进行四舍五入处理，以解决精度问题。

第七点：链式运动的实现。

引入move.js框架支持链式调用。

在运动函数中传入回调函数fn()，通过if判断若存在fn()则执行该回调。

第八点：同时运动的处理机制。

若编写两个独立的运动函数来控制同时运动，会发生函数覆盖导致冲突。

利用JSON对象处理多属性运动，通过for(i in json)遍历JSON。运动函数参数调整为obj, json, fn。

此时不再使用单一的iTarget值，而是通过json[attr]获取对应属性的目标值。

至此，JavaScript运动动画的核心知识点已完整阐述，希望这些内容能对读者学习JS运动动画有所帮助。