應用到的知識點

• 點擊事件

• 給元素設置一個絕對定位

• 定時器(setInterval)

封裝動畫1的步驟:

• 讓元素設置為絕定位
• 設置元素的開始位置(從哪開始移動)
• 設置元素的目標位置(移動到哪)
• 設置元素每次移動的距離
• 設置元素每次移動的時間間隔(越短越好)

封裝動畫1遇到的問題

• 如果快速的點擊按鈕,動畫會有一個加速的效果

  原因: 多次點擊按鈕的時候,在程序中相當于開啟了多個定時器導致的

• 如何解決?

  解決途徑: 不管點擊多次按鈕,始終只有一個定時器

• 解決問題的核心步驟

  1. 將 var timeID = null; 設置為一個全局的公共變量2. 判斷是否存在,如果存在就停住定時器,然后子在開啟新的定時器(排他思想) //先判斷程序中是否有定時器 if(timeID != null) {//代表已經存在定時器, 立即將存在的定時器刪除掉clearInterval(timeID);timeID = null; }

將動畫2封裝成一個函數,方便以后調用

如果將動畫封裝成一個函數后,每次點擊都是從開始的位置 0 重新執行程序

• 怎么解決?

  讓元素的 current 值 始終 和 元素實際移動后的位置保持一致

• 在解決方案中有什么問題?

  如何獲取當前元素的位置? DOM.offsetLeft ----> 左側的距離位置 DOM.offsetTop ----> 上邊的距離current = 當前元素的位置;

• 最后的解決方案

  在函數中設置:current = element.offsetLeft;

為什么當頁面中出現多個元素的時候,動畫只能讓最后一個元素執行動畫?

• 為什么?

  點擊按鈕的時候, 程序中共用了一個定時器導致的

• 怎么解決

  每一個元素(對象)應該對應一個定時器在每一個timeID綁定一個對象function animation(element, current, target, step, time) {//讓curren 值始終和當前元素的位置保持一致current = element.offsetLeft;//先判斷程序中是否有定時器if(element.timeID != null) {//代表已經存在定時器, 立即將存在的定時器刪除掉clearInterval(element.timeID);element.timeID = null;}element.timeID = setInterval(function(){//開始移動元素的位置if(current >= target) {current = target;clearInterval(element.timeID);}else {current += step;}//設置box的位置element.style.left = current + 'px';}, time); }

為什么元素從右向左移動的時候沒有動畫效果了?

• 為什么?

  我們在程序中原來只是簡單的判斷 開始位置和結束位置 值的大小,而現在 向左移動的時候,開始位置的值就是比目標位置的值要大,所以動畫就停止了條件判斷寫的有問題:if(current >= target) {current = target;clearInterval(element.timeID);}

• 怎么解決?

  應該是求兩點之間的距離 和 每次移動的距離比較大小1.在確定當前位置是否移動到了終點位置(目標位置), 要通過計算兩點之間的距離實現 if(Math.abs(target - current) <= Math.abs(step)) {current = target;clearInterval(element.timeID); }else {current += step; }2.當元素向左移動的時候,保證每次移動的距離 step 是一個負數(向左移動為負)//開始移動元素的位置 if(current > target) {// 設置為負數step = -Math.abs(step); }

動畫的最后一個問題,動畫沒有執行完,又可以執行另外一個動畫

• 相對定位
• 絕對定位(有一個參照元素 + 脫標)
• 固定定位
• margin
• padding
• 2d位移
• 3d位移

• 就是用來保存元素位置信息的
• 不能設置