在Web应用程序中创建动画的基础是什么？

Question

我正在研究如何在HTML5应用程序中创建一个简单的动画。我想从一个离页画布开始（ top 设置为窗口高度的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的向上方。

Answer 1

您需要将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：

  

方向属性（顶部，右侧，底部，左侧）无法辨别   如果元素的位置样式属性是静态的，则对元素产生影响   它是默认的。

Answer 2

我推荐像Tween.js这样的库。

您在问题中引用的动画类型为“线性”，即您以恒定速率将对象从A移动到B.

像Tween.js这样的库可以执行此操作以及各种类型的缓动（您在示例中显示的减速/加速效果）和“弹性”算法。

来自其网站的简单Example。