javascript完美运动

BenCHou 发布于2019-08-23 11:38 / 2837人阅读

摘要：在这个完美运动框架中，我们可以只让一个物体的一个属性运动，可以链式调用，也可以几个属性同时运动。能解决我们项目中遇到的大部分运动。运动框架演变过程运动实现留言板的例子完美运动运动，高度展开发布

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

完美运动框架代码

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

function startMove(obj, json, fnEnd) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    for(var attr in json){
      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 = (json[attr] - cur) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      if (cur === json[attr]) {
        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)
}

用完美运动框架做一个宽高同时运动的实例



  
    完美运动

如果我们直接按照上面的方式，当我们运行下面代码的时候

startMove(oDiv,{width:101,height:300,opacity:100});

发现页面是有问题的，why?

if (cur === json[attr]) {
        clearInterval(obj.timer);
        if(fnEnd)fnEnd();//运动结束后，如果fnEnd参数传递进去了就执行fnEnd函数
      }

我们发现width先执行完成，当一个属性执行完成之后我们就关掉了定时器，所以没有达到我们预期的效果。我们看看怎么解决。
我们可以判断当所有值都达到目标点的时候在结束运动。

修改之后的运动框架如下

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

function startMove(obj, json, fnEnd) {
  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);//有可能会出现误差0.07*100
      }
      else{
        cur=parseInt(getStyle(obj,attr));
      }
      var speed = (json[attr] - cur) / 6;
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      if(cur!=json[attr]){//假设有没到目的地的值我们设置为false
        bStop=false;
      }
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
    if (bStop) {//如果bStop为true代表值都到目的地，这时候我们才关定时器
      clearInterval(obj.timer);
      if(fnEnd)fnEnd();//运动结束后，如果fnEnd参数传递进去了就执行fnEnd函数
    }
  }, 30)
}

测试例子如下



  
    完美运动

到目前为止，我们可以在任何地方用我们的运动框架做运动效果。

运动框架演变过程

运动实现留言板的例子



  
    完美运动

云服务器 GPU云服务器 JavaScript缓冲运动水平运动停止运动左右运动

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

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

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

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

Pines_Cheng 2019-08-21 10:46 评论0 收藏0
Vue2.0 仿滴滴出行项目

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。效果预览 showImg(h...

ShevaKuilin 2019-08-21 11:44 评论0 收藏0
js设计模式--策略模式

摘要：将不变的部分和变化的部分隔开是每个设计模式的主题，策略模式也不例外，策略模式的目的就是将算法的使用与算法的实现分离开来。前言本系列文章主要根据《JavaScript设计模式与开发实践》整理而来，其中会加入了一些自己的思考。希望对大家有所帮助。文章系列 js设计模式--单例模式 js设计模式--策略模式 js设计模式--代理模式概念策略模式的定义是:定义一系列的算法，把它们一个...

bigdevil_s 2019-08-23 14:27 评论0 收藏0
学不动了，来点有趣的吧

摘要：学不动了，那就来点有趣的本着折腾的性格，一直想写一个完全由我个人完成的动画，终于在前段时间完成了的重写，并完善了，先看看动画效果如何可以在这里查看不同动画组合成的效果，也可以在上查看具体的代码编写。前言这不 webpack 又升级了。。。前端的发展可谓是异常的迅速，各大框架层出不穷，每当有新框架出现，或是老框架升级，评论区总是哀嚎遍野，学不动了，真的学不动了。学不动了，那就来点...

FrozenMap 2019-08-30 11:00 评论0 收藏0
学不动了，来点有趣的吧

摘要：学不动了，那就来点有趣的本着折腾的性格，一直想写一个完全由我个人完成的动画，终于在前段时间完成了的重写，并完善了，先看看动画效果如何可以在这里查看不同动画组合成的效果，也可以在上查看具体的代码编写。前言这不 webpack 又升级了。。。前端的发展可谓是异常的迅速，各大框架层出不穷，每当有新框架出现，或是老框架升级，评论区总是哀嚎遍野，学不动了，真的学不动了。学不动了，那就来点...

yexiaobai 2019-08-23 17:50 评论0 收藏0