什么是在网络应用程序中创建动画的基础知识？

我正在研究如何在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

回答