JS实现运动缓冲效果的封装函数示例

2018-02-19 09:52:29来源:作者:人点击

分享

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

  • js实现缓冲运动效果的方法
  • JS实现多物体缓冲运动实例代码
  • JS多物体实现缓冲运动效果示例
  • JS实现物体带缓冲的间歇运动效果示例
  • javascript 缓冲运动框架的实现
  • JS实现的抛物线运动效果示例
  • JS运动特效之完美运动框架实例分析
  • JS运动特效之同时运动实现方法分析
  • JS运动特效之任意值添加运动的方法分析
  • JS小球抛物线轨迹运动的两种实现方法详解

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台