資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中區分手動動畫和自動動畫？
通常，JavaScript 中的動畫是為了獲得不同的效果並使物件在頁面上移動。您可以使用 JavaScript 中的手動或自動動畫來移動和動畫化任何型別的 HTML 元素。
在本教程中，我們將學習如何在 JavaScript 中區分手動動畫和自動動畫。
手動動畫
在解釋 JavaScript 中使用的兩種常見動畫型別之間的區別之前，我們必須學習手動動畫物件的過程。
在手動動畫下，動畫過程不是自動化的。以下是使用 DOM 物件屬性和 JavaScript 函式實現簡單動畫的方法。以下列表包含不同的 DOM 方法。
我們使用 JavaScript 函式getElementById獲取 DOM 物件，然後將其分配給全域性變數 imgObj
我們定義了一個初始化函式init()來初始化imgObj，其中我們設定了它的位置和左側屬性
我們在視窗載入時呼叫初始化函式。
最後，我們呼叫moveRight()函式將左側距離增加 10 畫素。您也可以將其設定為負值以將其移動到左側。
步驟
步驟 1 - 選擇或確定使用者需要手動動畫的物件或影像。
步驟 2 - 確定元素的位置和大小。
步驟 3 - 新增一個按鈕或另一個元素，該元素可以與 onClick 方法一起使用以手動動畫化物件。
步驟 4 - 確定每次點選時物件的變化或移動。
示例
以下示例顯示瞭如何建立物件或新增影像，這些影像可以使用 moveRight() 或 moveLeft() 函式手動移動或動畫化。
<html> <head> <title>JavaScript Manual Animation</title> <script> var imgObj = null; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 +'px'; } window.onload =init; </script> </head> <body> <form> <img id="myImage" src="https://tutorialspoint.tw/javascript/images/javascript-mini-logo.jpg" /> <p>Click button below to move the image to right</p> <input type = "button" value = "Click Me" onclick = "moveRight();" /> </form> </body> </html>
自動動畫
自動動畫建立更好且更使用者友好的軟體和線上遊戲。使用自動動畫的主要好處是為物件的一定效果或移動設定時間。
我們將自動化手動動畫中討論的過程。我們可以使用 JavaScript 函式setTimeout()來自動執行此過程，如下所示：
這裡我們添加了更多方法。所以讓我們看看這裡有什麼新東西：
moveRight()函式呼叫setTimeout()函式來設定 imgObj 的位置。
- 我們添加了一個新函式stop()來清除setTimeout()函式設定的計時器，並將物件設定在其初始位置。
步驟
步驟 1 - 查詢或建立將用於自動動畫的物件。
步驟 2 - 選擇物件初始樣式和位置。
步驟 3 - 根據需要新增按鈕以啟動和停止動畫過程。
步驟 4 - 確定動畫需要停止或重新啟動的時間或位置。
示例
您可以從以下示例中看到，物件可以在特定點自動停止動畫。此示例可用於實驗並找出 JavaScript 中自動動畫的範圍
<html> <head> <title>JavaScript Automated Animation</title> <script> var imgObj = null; var animate ; function init() { imgObj = document.getElementById('myImage'); imgObj.style.position= 'relative'; imgObj.style.left = '0px'; } function moveRight() { imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px'; animate = setTimeout(moveRight,20); // call moveRight in 20msec } function stop(){ clearTimeout(animate); imgObj.style.left = '0px'; } window.onload =init; </script> </head> <body> <form> <img id="myImage" src="https://tutorialspoint.tw/javascript/images/javascript-mini-logo.jpg" /> <p>Click the buttons below to handle animation</p> <input type = "button" value = "Start" onclick = "moveRight();" /> <input type = "button" value = "Stop" onclick = "stop();" /> </form> </body> </html>
我們如何區分手動動畫和自動動畫？
步驟 1 - 找出您是否必須進行手動更改才能獲得結果。
例如，如果您想訂閱某個網站，您可以看到一個自動彈出的訂閱表單，或者您必須單擊一個按鈕才能看到該表單。
步驟 2 - 檢查動畫的時間限制。
在手動動畫中，您不會看到動畫在沒有單擊按鈕的情況下工作。通常，在自動動畫中，淡入或其他功能可以繼續。
使用滑鼠移動的 JavaScript 動畫
您可以看到滑鼠移動時的各種動畫。在建立響應式按鈕、影像和其他元素時，我們通常使用 JavaScript。在這種方法中，您將看到影像大小如何隨著滑鼠在元素上移動而變化。
語法
以下語法顯示瞭如何使用 onMoveOver 和 onMoveOut 使用者行為更改元素。
if(document.images){
var animation1 = new Image();
var animation2 = new Image();
}
onMouseOver = animation2.src;
onMouseOut = animation1.src;
示例
以下示例顯示了物件如何隨著滑鼠在元素上移動而更改其大小或位置。
<html> <head> <script> if(document.images){ var animation1 = new Image(); // Preload an image animation1.src = "https://demo.sirv.com/nuphar.jpg?w=400&h=250"; var animation2 = new Image(); // Preload second image animation2.src = "https://demo.sirv.com/nuphar.jpg?w=200&h=450"; } </script> </head> <body> <h3> Change in image size with the <i> movement of a mouse </i>. </h3> <a id = SVG href = "#" onMouseOver = "document.myImage.src=animation2.src;" onMouseOut = "document.myImage.src = animation1.src;"> <img id = SVG name = "myImage" src = "https://demo.sirv.com/nuphar.jpg?w=400&h=250" /> </a> </body> </html>
使用上述方法，您可以找到已在 JavaScript 函式中傳遞的引數數量。執行此程式碼後，您將看到結果輸出。
412 次瀏覽
