使用JavaScript怎么实现一个运动缓冲效果

这篇文章给大家介绍使用JavaScript怎么实现一个运动缓冲效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

具体如下：

/*   物体多属性同时运动的函数   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怎么实现一个运动缓冲效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。