多物体运动的简单Demo(二)

作者: 做有趣的恶魔 | 来源:发表于2017-04-24 11:27 被阅读30次

多物体运动的简单Demo(二)
多物体运动的简单Demo(一)
简易运动函数
对于javascript运动的理解
物体运动简单动画AnimationCurve
ios 11 使用vision开始物体跟踪
《利维坦》第二章读书笔记
机械运动（二运动的描述）
一组神奇的物理动图，有趣有知识
Unity3d-OnMouseAPI之选择物体，移动物体。

一、Html布局

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

二、Css样式

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

三、Js部分

改变添加边框后的宽/高度

 window.onload = function(){
      var aLi = document.getElementsByTagName("li");
      for (var i = 0; i < aLi.length; i++) {
        aLi[i].timer = null;
        //多物体运动 必须给每个li定义定时器
        aLi[i].onmouseover = function(){
          startMove(this,400);
        }
        aLi[i].onmouseout = function(){
          startMove(this,200);
        }
      }
   }

startMove = function(obj,iTarget){
      clearInterval(obj.timer);
      //开启定时器前先关闭所有定时器
      obj.timer = setInterval(function(){
        var icur = parseInt(getStyle(obj,'width'));
        //获取目标区域的当前宽度 并赋值给icur
        var speed = (iTarget -icur)/8;
        speed = speed > 0?Math.ceil(speed):Math.floor(speed);
        //缓冲运动 speed>0向上取整 speed<0向下取整
        if(icur == iTarget){
          clearInterval(obj.timer);
        }else{
          obj.style.width = icur + speed + "px";
        }
      },30)
    }

//offsetWidth包括了border margin等属性的宽度 并不是li内容的宽度
 //应该封装getStyle函数获取width等样式
 getStyle = function(obj,attr){
      if(obj.currentStyle){
        //currentStyle IE浏览器
        return obj.currentStyle[attr];
      }else{
        return getComputedStyle(obj,false)[attr];
        //getComputedStyle 第二个参数为垃圾参数 写什么都可以 习惯false  FF Chrome浏览器
      }
    }

自定义改变添加边框后的宽/高度

//将 startMove()函数进一步封装 添加参数attr
startMove = function(obj,attr, iTarget){
      clearInterval(obj.timer);
      //开启定时器前先关闭所有定时器
      obj.timer = setInterval(function(){
        var 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);
        }else{
          obj.style[attr] = icur + speed + "px";
          //注意不能再用 .attr设置属性 而是用中括号 [attr]
        }
      },30)
    }

window.onload = function(){
      var aLi = document.getElementsByTagName("li");
        aLi[0].onmouseover = function(){
          startMove(this,'width',400);
        }
        aLi[0].onmouseout = function(){
          startMove(this,'width',200);
        }
        aLi[1].onmouseover = function(){
          startMove(this,'height',400);
        }
        aLi[1].onmouseout = function(){
          startMove(this,'height',200);
        }
        aLi[2].onmouseover = function(){
          startMove(this,'width',400);
        }
        aLi[2].onmouseout = function(){
          startMove(this,'height',200);
        }
    }

自定义改变透明度

//以上并不能实现对透明度的更改 1、opacity为小数 2、透明度没有px单位

 startMove = function(obj,attr, iTarget){
      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);
        }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)
    }

aLi[0].onmouseover = function(){
          startMove(this,'opacity',100);
   }
 aLi[0].onmouseout = function(){
          startMove(this,'opacity',30);
   }