时间:2021-05-26
基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出!
之前的模型是:
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);}以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了javascript运动框架用法。分享给大家供大家参考,具体如下:该运动框架可以实现多物体任意值运动运行效果截图如下:例子:运动框架#div1{w
javascript缓冲运动框架的实现框架的使用,大大的提高了我们的编码的效率,下面分享一个缓冲运动框架。实例代码:/***Createdbywangon201
在这篇文章打造通用的匀速运动框架(实例讲解)中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右)。缓冲
本文实例讲述了javascript弹性运动效果简单实现方法。分享给大家供大家参考,具体如下:弹性运动实现原理:加速运动+减速运动+摩擦运动运行效果截图如下:实例
本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考,具体如下:匀速运动步骤:1.清除定时器2.开启定时器3.运动是否完成:a、运动完成,清