JS实现运动缓冲效果的封装函数示例
程序员文章站
2022-03-16 16:21:40
本文实例讲述了js实现运动缓冲效果的封装函数。分享给大家供大家参考,具体如下:
之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。
/*...
本文实例讲述了js实现运动缓冲效果的封装函数。分享给大家供大家参考,具体如下:
之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。
/* 物体多属性同时运动的函数 obj:运动的物体 otarget:对象,属性名为运动的样式名,属性值为样式运动的终点值 ratio:速度的系数 */ function buffermove(obj, otarget, fn,ratio = 8) { clearinterval(obj.itimer); obj.itimer = setinterval(function () { // 此处设定开关bbtn,假设所有的属性均已运动完毕true var bbtn = true; for(var sattr in otarget){ // 获取当前值,此处兼容透明度的变化 if(sattr === 'opacity') { var icur = parsefloat(getstyle(obj, sattr) * 100); } else { var icur = parseint(getstyle(obj, sattr)); } // 计算速度,此处可判定方向,如向左或向右,先透明后出现或先出现后透明等 var ispeed = (otarget[sattr] - icur) / ratio; ispeed = ispeed > 0 ? math.ceil(ispeed) : math.floor(ispeed); // 计算下一次的值 var inext = icur + ispeed; // 赋值给对应样式 if(sattr ==='opacity') { obj.style.opacity = inext / 100; obj.style.filter = 'alpha(opacity=' + inext +')'; } else { obj.style[sattr] = inext + 'px'; } // 清除定时器,当前的位置和终点值是否相等,相等则说明结束 if(inext !== otarget[sattr]) { bbtn = false; } } // 如果bbtn的值为true,则说明所有的属性均已运动完毕,回调函数fn() if(bbtn) { clearinterval(obj.itimer); if(fn){ fn(); } } }, 50); }
以上封装函数也可以用于单个属性,多样式运动,比如:
buffermove(obj,{"left":200,"width":400,"opacity":80},fn,8);
就这样。
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。