什麼是在網絡應用程序中創建動畫的基礎知識？

我正在研究如何在HTML5應用程序中創建簡單的動畫。我想從一個離頁的畫布開始（頂部設置爲窗口高度的100％），並將其設置爲屏幕中間，在其他畫布上方。什麼是在網絡應用程序中創建動畫的基礎知識？

我試過Google，但搜索結果是在畫布中混合了動畫效果的div和動畫，沒有任何我嘗試過的效果。例如，jQuery animate（）函數，如討論here。

我也嘗試過在屏幕上動態創建一個畫布並對其進行動畫處理，但那不起作用。我當前的代碼如下：

HTML

<div id="view-addUser" > 
    <canvas id="view-canvas"></canvas> 
</div>

CSS

#view-addUser 
{ 
    left: 25%; 
    top: 100%; 
    width: 75%; 
    height: 75%; 
}

的javaScript（當按下一個按鈕，這是所謂的）

$("#view-addUser").animate({ 
    top: 100 
}, 3000, function() { 
    alert("animation complete"); 
});

我怎樣才能正確地獲得這個動畫？最終的結果應該是像this MoonBase animation的向上的方向。

2013-04-08 Phil

我推薦一個庫，如Tween.js。

您在問題中指向的動畫類型是「線性」類型，即您將對象從A移動到B的速度不變。

像Tween.js這樣的庫可以完成各種類型的緩動（您在示例中顯示的緩慢/加速效果）和「彈性」算法。

一個簡單的Example從他們的網站。

2013-04-08 23:57:58 Jarrod

我是吐溫庫的忠實粉絲，但我認爲這可能是矯枉過正，因爲OP只是想將元素上移到位。 – 2013-04-09 00:01:47

@ net.uk.sweet我認爲「只想將元素上移到位」僅僅是一個理解基礎知識的例子。我假設他有更實際的用法。它也不會像jQuery那樣矯枉過正:) – Jarrod 2013-04-09 00:03:37

是的，關於jQuery的公平點 - 猜測我只是假設他可能已經在使用它了。 – 2013-04-09 00:27:31

你需要設置你的div到absolute的（fiddle）位置：

#view-addUser 
{ 
    position: absolute; 
    left: 25%; 
    top: 100%; 
    width: 75%; 
    height: 75%; 
    border: 1px solid red; 
}

元素的默認位置是static（見here），這是當你想要進行動畫方向屬性沒有好。從documentation for jQuery.animate：

方向性（上，右，下，左）對元素沒有明顯的效果如果他們的位置樣式屬性是靜態的，它是在默認情況下它。

2013-04-08 23:52:15

回答