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

2024-04-27 14:14:38

字体：大中小

来源：转载

供稿：网友

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

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

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

我们先来看下之前的运动框架,以下是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就会先变宽在变高。

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