第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',width:'300px',height:600};

3、适配器

 /*设计模式 -- 适配器*/
 function adapter(source){
     /*给我的数据格式*/
     /*var json = {top:'300px',width:'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');
     }
 }