div盒子的緩動函數封裝

時間 2019-11-18

標籤 div 盒子緩動函數封裝欄目 CSS 简体版

原文原文鏈接

1.2. 緩動動畫html

1.2.1. 原理公式

動畫公式json

leader = leader + step框架

勻速動畫公式函數

step = 定值動畫

leader = leader + stepspa

緩動動畫公式code

step = ( target - leader ) / 10htm

leader = leader + step對象

緩動動畫的好處blog

他的移動是有盡頭的。不像基礎勻速運動那樣無限移動。

有很是逼真的緩動效果，實現的動畫效果更細膩。

若是不清除定時器，物體永遠跟着目標leader在移動。

@體驗緩動動畫

1.2.2. 函數封裝

@緩動動畫改進

屢次點擊按鈕重複開啓定時器

永遠沒法真正到達目標

到達目標後清理定時器

@緩動函數封裝

需求：可以讓任意對象移動到指定位置

1.2.3. 案例

@筋斗雲案例

1.3. 封裝緩動框架

1.3.1. 封裝緩動框架（任意數值屬性）

@獲取計算後樣式的方法

工做中咱們常常須要獲取一個盒子的最終樣式

好比就要獲取未加定位的盒子的left屬性值

那麼如何到計算後的樣式屬性值呢：

w3c

window.getComputedStyle(元素,僞元素)["left"]

div.currentStyle.left或 div.current["left"]

第二個參數是僞元素，咱們傳入null便可

@封裝獲取樣式屬性值的兼容方法

需求：獲取任意對象的計算後的任意屬性

@封裝緩動框架（任意數值屬性）

1.3.2. 封裝緩動框架（多個數值屬性）

1.3.3. 封裝緩動框架（升級版定時器）

@手風琴特效

1.3.4. 封裝緩動框架（添加回調函數）

@開機動畫

1.3.5. 封裝緩動框架（透明度和層級）

w3c

opacity:x;

x爲0-1

IE 8

filter:alpha(opacity=x);

x爲0-100

代碼以下：

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         #demo {
  8             width: 100px;
  9             height: 100px;
 10             padding: 50px;
 11             background-color: red;
 12             position:absolute;
 13         }
 14         #demo2 {
 15             width: 200px;
 16             height: 200px;
 17             background-color: blue;
 18             position: absolute;
 19         }
 20     </style>
 21 </head>
 22 <body>
 23 <button id="btn">按鈕300</button>
 24 <div id="demo" ></div>
 25 <div id="demo2"></div>
 26 <script>
 27     var btn = document.getElementById("btn");
 28     var demo = document.getElementById("demo");
 29     btn.onclick = function(){
 30 //        animate(demo,'width',300);
 31 //        animate(demo,'width',500);
 32 //        animate(demo,'height',500);
 33 //        animate(demo,'left',500);
 34 //        animate(demo,{"width":500,"height":400});
 35 //        animate(demo,{"width":500,"height":400,"left":300});
 36         animate(demo,{"width":500,"height":400,"zIndex":1});
 37     }
 38     var o = {
 39         'name': "123",
 40         'age' :123,
 41         sex :"男"
 42     }
 43     var json = {
 44         "width":500,
 45         "height":500
 46     }
 47 
 48     //想讓當前的函數，改變元素的任意多個屬性     width: 500  height 500
 49     function animate(obj,json,fn){
 50         clearInterval(obj.timerId);
 51         obj.timerId =  setInterval(function(){
 52 //            var leader = obj.offsetLeft;//先要得到原來的對象的位置
 53             var flag = true;// 假設全部的屬性都達到了目標值
 54             for(var key in json){
 55                 if(key =="opacity"){  // 判斷透明度的
 56                     // key就是至關因而obj的attr  json[key]就至關於以前的target
 57                     var leader = parseInt(getStyle(obj,key)*100) ||0; // 先要得到原來對象的原屬性的值
 58                     // 將當前取到的透明度的值擴大100倍，方便咱們的運算  0.2   0.3   0.25
 59                     var target = json[key]*100; // 將目標值也要擴大100倍
 60                     var step = (target - leader )/10;
 61                     step =step>0?Math.ceil(step):Math.floor(step);
 62                     // 緣由：
 63                     // 1.offsetLeft只會得到整數，不會得到小數，因此設置步長 的時候，讓步長 也變成 整數
 64                     // 2. 步長有正數，也有負數，這個時候取一箇中間點進行判斷，是向上取整，仍是向下取整數
 65 //            console.log(step);
 66                     leader = leader + step;
 67                     obj.style[key] = leader/100; // 改爲對應的屬性
 68 
 69                 }else if(key == "zIndex"){
 70                     var target = json[key];
 71                     obj.style[key] = target; // 改爲對應的屬性
 72                 }else {
 73                     // key就是至關因而obj的attr  json[key]就至關於以前的target
 74                     var leader = parseInt(getStyle(obj,key)) ||0; // 先要得到原來對象的原屬性的值
 75                     var target = json[key];
 76                     console.log(leader); // offsetLeft只會獲取整數
 77                     var step = (target - leader )/10;
 78                     step =step>0?Math.ceil(step):Math.floor(step);
 79                     // 緣由：
 80                     // 1.offsetLeft只會得到整數，不會得到小數，因此設置步長 的時候，讓步長 也變成 整數
 81                     // 2. 步長有正數，也有負數，這個時候取一箇中間點進行判斷，是向上取整，仍是向下取整數
 82 //            console.log(step);
 83                     leader = leader + step;
 84                     obj.style[key] = leader + 'px'; // 改爲對應的屬性
 85                 }
 86                 if(leader != target){ //全部的屬性都到達了指定的目標值的時候，才能清除定時器
 87                    flag = false;//有一個不知足條件，就讓當前的標識變爲false
 88                 }
 89             }
 90                 if(flag){ //全部的都知足條件的狀況下，才清除定時器
 91                     clearInterval(obj.timerId);
 92                     if(fn){ // 判斷參數中是否有回調函數，若是有，則執行
 93                         fn();
 94                     }
 95                 }
 96         },15)
 97     }
 98 
 99     // 此函數能夠得到對象的任意屬性
100     function getStyle(obj,attr){
101         // 能力檢測
102         if(obj&&obj.currentStyle){ // 當前傳進來的是一個真實的對象，並且此對象支持currentStyle
103             return obj.currentStyle[attr];
104         }else {
105             return getComputedStyle(obj,null)[attr];
106         }
107     }
108 </script>
109 </body>
110 </html>