这篇文章主要介绍了JavaScript运动框架的第五部分，链式运动到完美运动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于前几篇的运动框架基础，本文主要讲解一下链式运动，就是运动完后接着再运动，比如很多网站中，一个方框的出现和退出：出现时先变宽再变高，退出时先变矮再变窄退出！
之前的模型是：
startMove(obj,json);
现在改为：
startMove(obj, json, fn);
也就是在第一次运动结束的时候执行fn(); fn是传过来的一个参数，这个参数是个函数，定时器清理之后手动运行fn();如果想采用链式运动，那就是在fn中再调用startMove(obj, json, fn)，再在里面的fn中调用startMove(obj, json, fn)，可以一直玩下去
运动框架(五)：链式运动到完美运动
最后提取出来的完美运动框架如下，motionFrame.js：
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (var attr in json) { var cur = 0; if (attr === 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } if (cur != json[attr]) { bStop = false; } var speed = (json[attr] - cur)/10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); cur += speed; if (attr === 'opacity') { obj.style.filter = 'alpha(opacity:' + cur + ')'; obj.style.opacity = cur/100; } else { obj.style[attr] = cur + 'px'; } } if (bStop) { clearInterval(obj.timer); if (fn) fn(); } }, 30); }
以上是JavaScript运动框架之链式运动到完美运动的示例代码（五）的详细内容。更多信息请关注PHP中文网其他相关文章！
