链式运动与同时运动的简单Demo

作者: 做有趣的恶魔 | 来源:发表于2017-04-24 13:06 被阅读10次

链式运动与同时运动的简单Demo
JavaScript 运动 02 —— animate 函数增强
js运动5 链式运动框架
几个很有效的伸展动作
简单的链式编程demo
多物体运动的简单Demo(一)
多物体运动的简单Demo(二)
运动与公益同时进行
简单运动
运动轨迹的demo封装

链式运动

一、Html布局

<body>
  <div id="test"></div>
</body>

二、Css样式

<style>
    body{
      margin:0;
      padding: 0;
    }
    #test{
      width:200px;
      height: 100px;
      background: yellow;
      margin-bottom: 20px;
      filter:alpha(opacity:30); /*针对 IE8 以及更早的版本*/
      opacity:0.3;
      border: 4px solid blue;
      /*添加一个宽度为4px的边框*/
    }
</style>

三、Js部分

startMove = function(obj,attr,iTarget,fn){
//链式运动需要添加一个回调函数作为参数
  clearInterval(obj.timer);
  //开启定时器前先关闭所有定时器
  obj.timer = setInterval(function(){
    var icur = 0;
    if(attr == 'opacity'){
      icur = Math.round(parseFloat(getStyle(obj,attr))*100);
      //如果是opacity则应用parseFloat 之后×100是为了方便兼容alpha
      //parseFloat取到的是多位小数 所以用Math.round四舍五入
    }else{
      icur = parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget -icur)/8;
    speed = speed > 0?Math.ceil(speed):Math.floor(speed);
    //缓冲运动 speed>0向上取整 speed<0向下取整
    if(icur == iTarget){
      clearInterval(obj.timer);
      if(fn){
        fn(); //上一个动作完成时判断是否需要执行下一个动作
      }
    }else{
      if(attr == 'opacity'){
        obj.style.filter = 'alpha(opacity: '+(icur+speed)+')';
        //针对 IE8 以及更早的版本
        obj.style.opacity = (icur+speed)/100;
        //针对FF Chrome
      }else{
        obj.style[attr] = icur + speed + "px";
      }
    }
  },30)
}

window.onload = function(){
  var myDiv = document.getElementById("test");
  myDiv.onmouseover = function(){
    //链式调用
    startMove(this,'width',400,function(){
      startMove(myDiv,'height',400,function(){
        startMove(myDiv,'opacity',100);
      });
    });
  }
  myDiv.onmouseout = function(){
    //注意动作执行顺序
    startMove(this,'opacity',30,function(){
      startMove(myDiv,'height',100,function(){
        startMove(myDiv,'width',200);
      });
    });
  }
}

getStyle = function(obj,attr){
  if(obj.currentStyle){
    //currentStyle IE浏览器
    return obj.currentStyle[attr];
  }else{
    return getComputedStyle(obj,false)[attr];
    //getComputedStyle 第二个参数为垃圾参数 写什么都可以 习惯false  FF Chrome浏览器
  }

同时运动

使用Json修改运动框架

startMove = function(obj,json,fn){
  var flag = true;//假设所有运动都达到目标值的flag

  clearInterval(obj.timer);
  //开启定时器前先关闭所有定时器
  obj.timer = setInterval(function(){
    for(var attr in json){
      var icur = 0;
      if(attr == 'opacity'){
        icur = Math.round(parseFloat(getStyle(obj,attr))*100);
        //如果是opacity则应用parseFloat 之后×100是为了方便兼容alpha
        //parseFloat取到的是多位小数 所以用Math.round四舍五入
        }else{
          icur = parseInt(getStyle(obj,attr));
        }
        var speed = (json[attr] -icur)/8;
        speed = speed > 0?Math.ceil(speed):Math.floor(speed);
        //缓冲运动 speed>0向上取整 speed<0向下取整
        if(icur != json[attr]){
          //如果不是所有的运动达到目标值
          flag = false;
          if(attr == 'opacity'){
              obj.style.filter = 'alpha(opacity: '+(icur+speed)+')';
              //针对 IE8 以及更早的版本
              obj.style.opacity = (icur+speed)/100;
              //针对FF Chrome
            }else{
              obj.style[attr] = icur + speed + "px";
            }
        }else{
          //如果全部运动达到目标值，关闭定时器
          clearInterval(obj.timer);
          if(fn){
              fn(); //判断是否需要执行回调函数
          }
        }
     }
  },30)
}

var myDiv = document.getElementById("test");
  myDiv.onmouseover = function(){
    startMove(this,{width:400,height:400,opacity:100},function(){
      alert("变换完成～");
    });
  }
  myDiv.onmouseout = function(){
    startMove(this,{opacity:30,height:100,width:200});
  }