物体运动框架

最新推荐文章于 2022-02-21 19:41:16 发布

where_slr

最新推荐文章于 2022-02-21 19:41:16 发布

阅读量254

点赞数 1

分类专栏： Javascript 文章标签：函数 javascript

本文链接：https://blog.csdn.net/where_slr/article/details/72822893

版权

Javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

要有封装的思想，把一系列操作不重复的地方提取出来，作为参数传入，并且复杂动作分解成几个小的运动

多物体运动，变量不能公用，会造成资源抢夺
缓冲运动时，与目标距离不同，速度也变化，并且会有小数所以要速度判定

function(){
            var aLi  =document.getElementsByTagName("li");  
            for(var i = 0;i<aLi.length;i++){
                aLi[i].timer = null;//多物体运动，变量不能公用，会因为造成资源抢夺
                aLi[i].alpha = 30;
                aLi[i].onmouseover = function(){
                    startMove(this,100);
                }
                aLi[i].onmouseout= function(){
                    startMove(this,30);
                }
            }
    }
    function startMove(obj,iTarget){
            clearInterval(obj.timer);
            var speed;
            obj.timer = setInterval(function(){     
            speed = (iTarget-obj.alpha)/10;
                //由目标和现值决定正负值,注意要取整，当距离小于10的时候，除了之后会是小数，这样会造成最后距离偏差
                //凡是有变速运动都要有这个速度的判定
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            if(iTarget == obj.alpha){
                clearInterval(obj.timer);
            }else{
                obj.alpha+=speed;
                obj.style.filter = "alpha(opacity:"+obj.alpha+")";
                obj.style.opacity = obj.alpha / 100;
            }
        },30)

    }

定时器部分

timer = setInterval (function(){
            var speed = 0;
            if(oDiv.offsetLeft > iTarget ){
                //如果当前offsetLeft 大于目标值，即0-->-200那么速度是负的
                speed = -10;
            }else{
                //如果当前offsetLeft 小于目标值，即-200-->0那么速度是正的
                speed = 10;
            }
            if(oDiv.offsetLeft == iTarget){
                clearInterval(timer);
             }else{
                oDiv.style.left = oDiv.offsetLeft + speed+"px";
             } 
        },20);

获取要变化的样式

function getStyle(obj,attr){ //解决offset样式属性的bug
        if(obj.currentStyle){
            return obj.currentStyle[attr];//IE获得其属性
        }else {
            return getComputedStyle(obj,false)[attr];//火狐获得其属性
        }

    }
//return 的是字符串，要转换成整型parseInt()

运动框架

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>链式动画</title>
  <style>
    *{
        margin:0;
        padding:0;
    }
    li {
        width:200px;
        height:100px;
        margin-bottom:10px;
        background-color:yellow;
        border:2px solid blue;
        opacity:0.3;
        filter:alpha(opacity:30);/*IE环境*/
    }
  </style>
  <script src="startMove.js"></script>
    <script>
        window.onload = function(){
            var aLi  =document.getElementById("li1");   
            //移入
            aLi.onmouseover = function(){
                startMove(aLi,'width',400,function(){                   
                    startMove(aLi,'height',200,function(){
                        //console.log(this);//此时是window调用
                        startMove(aLi,'opacity',100);
                    });
                });
            }
            //移出
            aLi.onmouseout = function(){
                startMove(aLi,'opacity',30,function(){
                    startMove(aLi,'height',100,function(){
                        startMove(aLi,'width',200);
                    });
                });
            }
    }

    </script>

 </head>
 <body>
    <ul>
        <li id="li1"></li>
    </ul>
 </body>
</html>

function startMove(obj,attr,iTarget,fn){
            //获取参数
            clearInterval(obj.timer);
            var speed,icurr;
            obj.timer = setInterval(function(){
                if(attr == 'opacity'){
                    icurr =Math.round(parseFloat(getStyle(obj,attr))*100);//透明度是小数,计算机的取值，用Math.round()四舍五入
                }else{
                     icurr = parseInt(getStyle(obj,attr));//获取当前属性
                }
            //计算速度
            //凡是有变速运动都要有这个速度的判定
            //speed = (iTarget-obj.offsetWidth)/10;
                speed = (iTarget - icurr)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //判定动画结束
            if( icurr == iTarget){
                //if(iTarget == obj.offsetWidth){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                }
            }else{
                //动画过程
                if(attr == 'opacity'){
                    obj.style.filter = "alpha(opacity:"+(icurr+speed)+")";//IE
                    obj.style.opacity = (icurr+speed)/100;//非IE
                }else{
                    obj.style[attr] = icurr + speed +"px";
                }
                //obj.style.width = obj.offsetWidth + speed +"px";

            }
        },30)

    }
    //获取当前参数的属性值
    function getStyle(obj,attr){  //解决offset样式属性的bug        
        if(obj.currentStyle){
            return obj.currentStyle[attr];//IE获得其属性
        }else {
            return getComputedStyle(obj,false)[attr];//火狐获得其属性
        }

    }

同时发生动作
用到json键值对

<script>
        window.onload = function(){
            var aLi  =document.getElementById("li1");   
            //移入
            aLi.onmouseover = function(){
                startMove(aLi,{width:201,height:200,opacity:100});

            }
            //移出
            aLi.onmouseout = function(){
                startMove(aLi,{width:200,height:100,opacity:30});
            }
        }

    </script>

**move.js:**
//startMove(obj,{attr1:iTarget,attr2:iTarget},fn);
function startMove(obj,json,fn){
            //1.获取参数
            clearInterval(obj.timer);
            var speed,icurr;
            obj.timer = setInterval(function(){

            var flag = true;

            for(var attr in json){              
                if(attr == 'opacity'){
                    icurr =Math.round(parseFloat(getStyle(obj,attr))*100);//透明度是小数,计算机的取值，用Math.round()四舍五入
                }else{
                     icurr = parseInt(getStyle(obj,attr));//获取当前属性
                }

            //2.计算速度
            //凡是有变速运动都要有这个速度的判定
            //speed = (iTarget-obj.offsetWidth)/10;
                speed = (json[attr] - icurr)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            //3.判定动画是否全部执行结束
            if( icurr  != json[attr]){
                    flag = false;//不是，就赋值false
                }
                //动画过程
            if(attr == 'opacity'){
                    obj.style.filter = "alpha(opacity:"+(icurr+speed)+")";//IE
                    obj.style.opacity = (icurr+speed)/100;//非IE
                }else{
                    obj.style[attr] = icurr + speed +"px";
                }
                //obj.style.width = obj.offsetWidth + speed +"px";              
                }

            if(flag){   //如果全部完成
                    clearInterval(obj.timer);
                    if(fn){
                        fn();
                    }
                }
        },30)

    }
    //获取当前参数的属性值
    function getStyle(obj,attr){  //解决offset样式属性的bug        
        if(obj.currentStyle){
            return obj.currentStyle[attr];//IE获得其属性
        }else {
            return getComputedStyle(obj,false)[attr];//火狐获得其属性
        }

    }