javascript勻速動畫和緩衝動畫詳解-js教程-PHP中文網

首頁

web前端

js教程

javascript勻速動畫和緩衝動畫詳解

高洛峰

Dec 09, 2016 pm 03:21 PM

javascript

關於網頁中的動畫，在css3中我們已經可以使用一些屬性快速的做出來，但是有時為了瀏覽器的兼容性我們還是需要使用js來製作網頁中的動畫。

使用js做動畫最重要的一個函數就是setInterval函數，這裡不再贅述，不懂可以直接百度用法。本文主要講動畫的原理已經在製作過程中的重點。

老規矩，先上程式碼，能直接看懂的可以節省時間。

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>move</title>
  <link rel="stylesheet" href="move1.css">
</head>
<body>
  <input type="button" value="匀速移动" id="move1">
  <input type="button" value="渐变移动" id="move2">
  <div id="box1" class="box"></div>
  <div id="box2" class="box"></div>
  <script type="text/javascript" src="move1.js"></script>
</body>
</html>

css部分：

   
*{
  margin: 0px;
  padding: 0px;
}
.box{
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
  margin-top: 10px;
}

js的是，一定要對全局的margin和padding清零，否則的話他在計算的時候初始的margin和padding會影響計算，從而導致有時候運動不停止的情況。

javascript部分程式碼的解析在原始碼中已經很詳細了，以下主要講解原理。

勻速運動：

透過setInterval函數我們控制每多少毫秒運動的距離，然後在快要到達指定位置的時候，判斷步長（每多少毫秒運動的距離）和此時和目標位置的距離，如果步長大於此時和目標位置的距離，則直接定位到目標位置，這樣做是為了避免步長和總距離不是整數倍關係而產生最後到達位置和目標位置有差值的錯誤。

緩衝運動：

緩衝運動的基本函數是和勻速運動一樣的，只是緩衝運動的步長我們是透過和目標位置的距離來確定的，這樣我們的步長是不斷變小的，從而實現緩衝運動的效果。在確定步長的時候我們使用Math.ceil和Math.floor對步長值進行取整是為了避免出現小數，因為如果出現小數後面最後到達的位置肯定是和目標位置有誤差的。

注意事項：在每次移動開始前一定要使用clearInterval清除定時器。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。