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);
}

怎么修改呢? 实际上很简单, 在过去的框架中,你每一次只能传一个样式,和一个值。那么现在把这些改成一个json对象。相信大家就明白了。

我们调用的时候就是startMove(oDiv,{width:200,height:200}); 如果需要的话就在加上回调函数。那么我们具体看看代码是怎么修改的。

function startMove(obj, json, fnEnd)
{
  var MAX=18;
  //每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)
  //并且关闭或者开启都是当前物体的定时器,已防止与页面上其他定时器的冲突,使每个定时器都互不干扰
  clearInterval(obj.timer);
  obj.timer=setInterval(function (){

    var bStop=true; // 假设:所有的值都已经到了

    for(var name in json)
    {
      var iTarget=json[name]; // 目标点

      //处理透明度,不能使用parseInt否则就为0了 

      if(name=='opacity')
      {

        // *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入
        var cur=Math.round(parseFloat(getStyle(obj, name))*100);
      }
      else
      {
        var cur=parseInt(getStyle(obj, name)); // cur 当前移动的数值
      }

      var speed=(iTarget-cur)/5; // 物体运动的速度 数字越小动的越慢 /5 : 自定义的数字

      speed=speed>0?Math.ceil(speed):Math.floor(speed);

      if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;

      if(name=='opacity')
      {
        obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE
        obj.style.opacity=(cur+speed)/100; //ff chrome
      }
      else
      {
        obj.style[name]=cur+speed+'px';
      }

      // 某个值不等于目标点
      if(cur!=iTarget)
      {
        bStop=false;
      }
    }

    // 都达到了目标点
    if(bStop)
    {
      clearInterval(obj.timer);

      if(fnEnd) //只有传了这个函数才去调用
      {
        fnEnd();
      }
    }
  }, 20);
}

为什么会有bstop的假设呢?

其实如果我这样调用startMove(oDiv,{width:101,height:200}); 宽度变成101 已经完成运动了,高度没有到, 但是我们可能已经关闭了当前的定时器。运动已经结束了,就会出现一个特殊情况下的bug。解释一下:

实际上来说,需要所有的运动都到了才关闭定时器,反过来说,如果没有不到的,那就关闭。在程序上就是定义一个布尔值,一开始为true,假设

所有的值都已经到了,如果说有一个值不等于目标点,bstop为false 。 在整个循环结束后,bstop 为ture 就说明所有运动都完成了,这个时候就关闭定时器。

那么这个运动框架基本已经完成了,适用css2 不适用css3。

总结:

运动框架的演变过程

startMove(iTarget) 运动框架
startMove(obj,iTarget) 多物体
startMove(obj,attr,iTarget) 任意值
startMove(obj,attr,iTarget,fn) 链式运动
startMove(obj,json,fn) 完美运动

O(∩_∩)O谢谢 ~

(0)

相关推荐

  • JavaScript运动框架 链式运动到完美运动(五)

    基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出! 之前的模型是: startMove(obj, json); 现在改为: startMove(obj, json, fn); 也就是在第一次运动结束的时候执行fn(); fn是传过来的一个参数,这个参数是个函数,定时器清理之后手动运行fn();如果想采用链式运动,那就是在fn中再调用startMove(obj, json, fn),再在里面

  • JavaScript运动框架 解决速度正负取整问题(一)

    这里说的运动是指缓冲运动,缓冲运动会使物体逐渐'着陆',而不是'硬着陆',到达目标位置的过程中速度越来越慢,看起来很舒服. 缓冲的特点: 速度随着距离的缩短而降低 速度 = (目标值 - 当前值) / 缩放系数: 速度一定要是整数 比如,一个div从最左边运动到left等于400的位置停下,可以如下实现: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>运

  • JavaScript运动框架 多值运动(四)

    多值运动,也就是对于某个对象来说,不仅仅只是其中一个属性值在变化,而是好多个,比如宽,高,字体,透明度等等同时变化 当然了,多值运动会产生一个问题,就是定时器何时关闭的问题!当然是所有的属性值都运动到目标值了才能清理定时器,也就是等最慢的.就好比十个人一起聚餐,不能等到来一个人就开吃! 前几篇讲的都是一个元素对象中某一个属性的运动,这次讲同一个元素对象中多个属性值的缓冲运动,那么每个属性都有个终点(目标点),我们把这些属性及其目标值写成一个对象的形式,或者是json状!容易产生的问题就是上面说的

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • JS多物体 任意值 链式 缓冲运动

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h

  • JavaScript运动框架 解决防抖动问题、悬浮对联(二)

    本文实例是对JavaScript运动框架(一)的应用 scrollTop:有时候网页很长,其高度大于显示器高度,会产生滚动,那么在高度方向上,"滚走"的部分就是scrollTop var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; offsetTop:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离.所谓的定

  • JavaScript运动框架 多物体任意值运动(三)

    前面两篇都是单物体的运动,本文开始讲多物体的运动,比如多个div的各自不同的属性如宽,高,字体大小,透明度的缓冲运动变化. 从本文起,就不再使用offsetWdith,offsetHeight了等等,因为会出现问题,比如加个border,offsetWidth就会出现严重问题,参见我个人的博客JavaScript中offsetWidth的'bug'及其对策解决方案就是封装getStyle(obj, attr) 函数,用了获取运动中的当前值! function getStyle(obj, name

  • javascript运动框架用法实例分析(实现放大与缩小效果)

    本文实例讲述了javascript运动框架用法.分享给大家供大家参考,具体如下: 该运动框架可以实现多物体任意值运动 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red;

  • js运动框架_包括图片的淡入淡出效果

    复制代码 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><font face="Verdana, Geneva, sans-serif"></font>&l

  • JavaScript 创建运动框架的实现代码

    封装好的运动框架Move(obj,attr,iTarget),可直接调用: 可用于设置width.border.fontSize.marginLeft.opacity等许多常见属性值的变速变化,实现各种有趣效果. 兼容IE和FF. 复制代码 代码如下: /****************    *    *   IE-BUG:    *   在IE中,设置opacity属性时,元素样式中需要设置opacity属性,才能读取到opacity值.    *    *   obj:元素对象.   at

随机推荐