javascript链式运动框架

booster 发布于2019-08-23 11:37 / 2825人阅读

摘要：我们可以在运动框架的基础上，在加上一个函数，当运动执行完成之后执行的操作。链式运动框架有可能会出现误差运动结束后，如果参数传递进去了就执行函数链式运动例子我们用上面的链式运动框架做一个先运动调整宽度，再运动调整高度，最后运动调整透明度。

前面介绍的运动都是一个物体运动之后就结束了，如果一个物体运动之后，还有其他的操作，比如一个div先变宽，然后变高、最后变透明度，我们前面的运动框架就不满足情况了。我们可以在运动框架的基础上，在加上一个fnEnd函数，当运动执行完成之后执行的操作。

链式运动框架

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (cur === iTarget) {
      clearInterval(obj.timer);
      if(fnEnd)fnEnd();//运动结束后，如果fnEnd参数传递进去了就执行fnEnd函数
    } else {
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
  }, 30)
}

链式运动例子

我们用上面的链式运动框架做一个div先运动调整宽度，再运动调整高度，最后运动调整透明度。



  
    链式运动

GPU云服务器云服务器 JavaScript缓冲运动 javascript框架 javascript框架分类 javascript开源框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97214.html

JavaScript完美运动框架的进阶之旅

摘要：运动框架动起来进行运动的节点定时器你没看错，就是那么简单。直接在定时器内部，判断到达目标值，清除定时器就行拉运动框架运动终止进行运动的节点运动终止条件。转自个人博客三省吾身丶丶原来是JS动画效果，但是我会过头再看的时候，发现太粗略了，于是重新写了一篇。喜欢别只收藏啊，点个推荐，大兄弟^ ^！运动框架的实现思路运动，其实就是在一段时间内改变left、right、width、hei...

Pines_Cheng 2019-08-21 10:46 评论0 收藏0
jquery运动

摘要：运动做链式运动的时候可以使用回调函数，多写几个运动。然后逐一运动这些调用。默认是，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选参数规定是否立即完成当前动画。清除当前运动停止滑动点击这里，向下滑动面板在前面封装的move.js框架，在jquery中有同样封装好的功能animate()。使用方法非常类似，下面我们看看animate的使用方法，有了原生的运动方法，然后再使用jq...

ThreeWords 2019-08-23 11:40 评论0 收藏0
javascript完美运动

摘要：在这个完美运动框架中，我们可以只让一个物体的一个属性运动，可以链式调用，也可以几个属性同时运动。能解决我们项目中遇到的大部分运动。运动框架演变过程运动实现留言板的例子完美运动运动，高度展开发布前面的运动，每次只能改一个值，你改div的width的时候，就不能改div的高度，改高度的时候就不能改宽度，如果我的运动想同时改宽度和高度，怎么实现？在这里我们把属性和目标值用json实现。在这...

BenCHou 2019-08-23 11:38 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&插件&框架&工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0