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

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

我们先来看下之前的运动框架,以下是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 链式运动框架——逐行分析代码，让你轻松了解运动的原理的更多相关文章

  1. Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

    大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function ...

  2. Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理

    等待已久的可变大,变宽 等一系列效果运动框架出炉了,现在还是个初级版本,能满足需求.我们看看是如何实现的. 我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如: oDiv.style.h ...

  3. javascript链式运动框架案例

    javascript链式运动框架 任务描述: 当鼠标移入红色矩形时,该矩形宽度逐渐增加至400px,之后高度逐渐增加至400px; 当鼠标移出红色矩形时,该矩形高度逐渐减小至200px,之后宽度逐渐减 ...

  4. Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

    看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解 接下来 讲一下关于缓冲运动的原理 ,我会逐行分析代码,代码简单易懂,能马上理解其中的原理,适用于初学者. #div ...

  5. Javascript 链式作用域 function fn(){}和var fn=function(){}区别

    其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...

  6. Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. <style type="text/css"> div { width: 100px; heig ...

  7. JavaScript 链式结构序列化详解

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...

  8. 浅析 JavaScript 链式调用

    对$函数你已经很熟悉了.它通常返回一个html元素或一个html元素的集合,如下: function$(){ var elements = []; for(vari=0,len=arguments.l ...

  9. iOS端JSON转Model链式编程框架SuperKVC使用方法与原理

    背景 在client编程中.字典转模型是一个极为常见的问题,苹果提供了KVC来实现NSDictionary到Model的注入,可是KVC仅仅能进行单层浅注入.且无法处理类型转换.key与属性名不正确应 ...

随机推荐

  1. 使用Zbar实现简单的二维码扫描

    导入ZBarSDK导入系统库 AVFoundation.framework,CoreMedia.framework,CoreVideo.framework,QuartzCore.framework,l ...

  2. 【转】关于ios10中ATS的问题

    原文连接:https://onevcat.com/2016/06/ios-10-ats/ WWDC 15 提出的 ATS (App Transport Security) 是 Apple 在推进网络通 ...

  3. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...

  4. J - A + B Problem II（第二季水）

    Description I have a very simple problem for you. Given two integers A and B, your job is to calcula ...

  5. c++网络通信（与服务器通信聊天）和c#网络通信

    c++网络通信(有待整理) 链接:http://pan.baidu.com/s/1i3nMLKT 密码:ksi8 c#网络通信(tcp/udp两部分) TCP发送端: using System; us ...

  6. drupal7创始人root忘记密码的解决办法

    在index.php中的drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);之后加入 require_once 'includes/password.inc'; echo ...

  7. you can Solve a Geometry Problem too（hdoj1086）

    Problem Description Many geometry(几何)problems were designed in the ACM/ICPC. And now, I also prepare ...

  8. HeadFirst设计模式读书笔记(5)-单例模式

    单例模式:确保一个类只有一个实例,并提供一个全局访问点. 应用场景:数据库连接.线程池.缓存.对话框.处理偏好设置.注册表的对象.日志对象.充当打印机.显卡等设备的驱动程序对象.任务管理器.网站的计数 ...

  9. Ubuntu 12.04设置豆沙绿

    首先确保已安装dconf-editor sudo apt-get install dconf-tools     然后打开dconf-editor 找到:org – gnome -desktop – ...

  10. QP在STM32F10X上第一个应用

        两天没有写博客了,这两天主要还是在考虑软件的结构性问题,用不用QP?用不用ST库函数?看了ucos,freertos,tinyos以及Contiki,库函数的问题看了使用库的软件结构,直接操作 ...