码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript 链式运动框架——逐行分析代码,让你轻松了运动的原理

时间:2014-12-29 13:41:17      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

所谓链式运动,就是一环扣一环。我们的很多运动实际上来说指的就是分阶段的,第一个阶段动完,下个阶段开始动。

这个链式运动框架就是用来处理这些问题的。

我们先来看下之前的运动框架,以下是Javascript 代码

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


function startMove(obj, attr, iTarget) {
    clearInterval(obj.time);
    obj.time = setInterval(function() {
        var cur = 0;

        if (attr == ‘opacity‘) {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 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.time);
            
            
        } 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);
}

实际上来说他就是相当于一个阶段型的运动框架,一个物体运动到某个地方就停下来了。

那么怎么能实现链式运动呢?

我们在加一个参数fnEnd ,这个是个函数,他会在运动结束的时候被调用。

当然这个函数可以传可以不传,所以需要做个判断。只有当传入的时候在调用即可。

原理就是: 一个运动完成 在开始下次的运动。

这样就能够完成链式运动,简单吧,让我们看看代码。

<style type="text/css">
            #div1{width: 100px; height: 100px; background: red;}
        </style>
<script src="js/move_lianshi.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("div1");
                
                oDiv.onmouseover=function(){
                    startMove(oDiv,width,300,function(){
                        startMove(oDiv,height,300);
                    });
                };
            }
        </script>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>

Javascript:

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


function startMove(obj, attr, iTarget,fnEnd) {
    clearInterval(obj.time);
    obj.time = setInterval(function() {
        var cur = 0;

        if (attr == ‘opacity‘) {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 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.time);
            
            if(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就会先变宽在变高。

我们现在这个运动框架还是会有局限性,那是什么呢?

那么就是不能同时运动,也就是说我想让Div 同时变大变宽 那又怎么办呢?

在下一次更新的时候,我们会解决这个问题,并且推出一个完美的运动框架,这个运动框架能够支持大多数的运动。

敬请期待~

Javascript 链式运动框架——逐行分析代码,让你轻松了运动的原理

标签:

原文地址:http://www.cnblogs.com/IcemanZB/p/4191312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!