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

Question

我正在研究如何在 HTML5 应用程序中创建简单的动画。我想从页外 Canvas 开始(top 设置为窗口高度的 100%)，并将其设置为屏幕中间、其他 Canvas 上方的动画。

我尝试过 Google，但搜索结果是动画 div 和 Canvas 内动画的混合体，我尝试过的任何操作似乎都不起作用。例如，jQuery animate() 函数，如所讨论的 here .

我还尝试动态创建 Canvas 并在屏幕上为其设置动画，但这不起作用。我当前的代码如下:

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

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

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

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

一个简单的Example从他们的网站。