Javascript在網頁編程中扮演著不可或缺的角色，動畫作為網頁設計很重要的一部分，解決了網站設計中要表現的動態效果。本文探討如何使用Javascript來實現移動動畫，以及常見的一些示例。

首先我們來看移動動畫的基本原理。在網頁中，我們可以將元素的位置用CSS來調整。但是，我們要讓元素動起來，就必須在一定的時間段內，連續改變它的位置，形成運動的視覺效果。

例如：

var elem = document.getElementById("myElement");
var pos = 0;
function move() {
pos += 1;
elem.style.left = pos + "px";
}
setInterval(move, 10);

這段代碼將使我們的元素myElement向右移動，直到超出頁面邊緣。我們使用了setInterval函數，它每10毫秒就會調用一次move函數。在這個函數中，我們將pos每次加1，然后將myElement的左位置改為pos，于是元素就開始向右滑動。

另外一種常見的移動動畫是使元素來回擺動，例如一個鐘擺：

var elem = document.getElementById("myElement");
var angle = 0;
var direction = "right";
function swing() {
if (angle === 45) {
direction = "left";
} else if (angle === -45) {
direction = "right";
}
if (direction === "right") {
angle += 1;
} else {
angle -= 1;
}
elem.style.transform = "rotate(" + angle + "deg)";
}
setInterval(swing, 10);

在這個例子中，我們使用了CSS transform屬性來使元素以角度旋轉。我們在每次調用swing函數時，將角度angle根據方向增加或減少1，并將元素的transform屬性設置為新的角度。

還有一種非常有用的移動動畫是隨著鼠標移動而移動。如果你曾經訪問過parallax scrolling滾動網站，則會發現這種技術的效果非常棒。

var elem = document.getElementById("myElement");
document.onmousemove = function(e) {
var x = e.clientX;
var y = e.clientY;
elem.style.left = x + "px";
elem.style.top = y + "px";
}

在這個例子中，我們使用了document.onmousemove事件，該事件會跟蹤鼠標位置。在每次調用函數時，我們將元素的左和上位置分別設置為鼠標指針的橫向和縱向坐標。這樣，元素就會跟隨鼠標指針移動。

以上是一些常見的Javascript移動動畫示例。它們可以為你的網站添加生動、有趣、甚至是互動的視覺效果。同時，我們還可以將這些技術應用到其他動畫效果中，例如逐幀動畫、粒子效果等。