第209天：jQuery运动框架封装（二）

运动框架

一、函数------单物体运动框架封装

1、基于时间的运动原理

动画时间进程

动画距离进程

图解：

物体从0移动到400

当物体移动到200的时候 走了50%

同样的，物体总共运行需要4秒

如果已经过了2.5秒，也表示走了50%

2、动画时间进程

运动公式： s= 总距离（最终的位置 -- 起始位置）X动画时间进程

代码实现：

function move(){
      /*计算现在的时间*/
      var pass = +new Date();
      var yongshi = pass - now;
      /*动画时间进程 = 用时/总时间*/
       var tween = yongshi/5000
      /*s = 总距离X进程*/
      div.style.left = 500*tween +'px';

}

3、封装成小函数

计算tween（动画时间进程）

//  我们封装成一个函数  复习函数的封装性
function getTween(now,pass,all){
    var yongshi = pass-now;
    console.log(yongshi)
    var jincheng =yongshi/all;
    return jincheng;
}

4、停止 --单一功能原则

基础理解：就是一个函数尽量保证只有一个功能

本质：保证一个函数只有一个变化源

封装变化点

单属性运动

/*单个属性运动公式*/
/*起始距离+总距离X动画时间进程*/
function oneProperty(dom,name,start,juli,tween){
    dom.style[name]= (start+juli*tween)+'px'
}

二、全局变量污染

解决全局变量变量污染问题

使用函数  在函数中定义私有变量（定义子函数）

闭包

对象

立即函数+闭包

1、解决问题 - 使用内嵌函数方式封装框架

 //  time 表示动画持续总时间 juli表示动画走的总距离
  //  封装的最后效果是这个整体不依赖外面的任何变量，如果需要外界提供数据，
  // 应该以参数的形式，整个框架只是针对参数进行编程
 function animate(id,time,juli) {
     //将一个物体在n秒内从0移动到juli
     var now = +new Date();
  var pass=  +new Date();//初始化为当前时间
  var tween=0 //初始化为0 表示动画进度为0 还没有开始
  var timer;
timer = setInterval(move,30);

     //封装动画时间进程
     function getTween(now,pass,all){
         var yongshi = pass-now;
         console.log(yongshi)
         var jincheng =yongshi/all;
         return jincheng;
     }


     /*停止*/
     function stop(){
         clearInterval(timer);
     }

     /*单个属性运动公式*/
     /*起始距离+总距离X动画时间进程*/
     function oneProperty(id,name,start,juli,tween){
         $$.css(id,name,(start+juli*tween)+'px')
         /*dom.style[name]= (start+juli*tween)+'px'*/
     }

     //  每次循环执行的代码
     function move() {
         //动画停止的条件
         if(tween>=1) {
             stop()
         }else {
             pass = +new Date();
             tween = getTween(now,pass,5000)
             oneProperty('div','left',0,400,tween)
         }
     }
 }

2、多属性运动框架

规划入口

var json = {top:'300px','300px',height:600};

3、适配器

/*设计模式 -- 适配器*/
function adapter(source){
    /*给我的数据格式*/
    /*var json = {top:'300px','300px',height:600};*/
    /*我需要的数据格式*/


    /* 计算一个属性：id name 起始距离 总距离 tween*/
    /*juli:最终位置 ---起始位置*/
    /* start：$$.css('left')*/
    /*parseFloat($$.css('left'))*/
    /*juli:300 - start*/

    var styles=[]
    /*  var styles=[
     {name:'top',start:0,juli:0},
     {name:'width',start:0,juli:0},
     {name:'height',start:0,juli:0}]
     */
    for(var item in source){
        var style ={}
        /*属性名称*/
        style.name = item;
        /*起始位置*/
        style.start = parseFloat($$.css(id,item))
        /*距离 = 起始位置 -- 初始位置*/
        style.juli = parseFloat(source[item]) - style.start
        styles.push(style)
    }
    return styles
}

4、透明度问题

function oneProperty(id,name,start,juli,tween){
    if(name == 'opacity') {
        $$.css(id, name, start+juli*tween);
    }
    else {
        $$.css(id, name, start+juli*tween+'px');
    }
}