1

我正在研究如何在 HTML5 应用程序中创建简单的动画。我想从一个离页画布开始（顶部设置为窗口高度的 100%），然后将其动画到屏幕中间，在我的其他画布上方。

我试过谷歌，但搜索结果是画布内的动画 div 和动画的混合，我尝试过的任何东西似乎都不起作用。例如，这里讨论的jQuery animate()函数。

我也尝试过动态创建画布并在屏幕上对其进行动画处理，但这不起作用。我目前的代码如下：

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");
});

我怎样才能正确地让它动画？最终结果应该类似于此 MoonBase 动画的向上方向。

4

2 回答 2

0

您需要将您的位置设置div为absolute（小提琴）：

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

元素的默认位置是static（请参阅此处），这在您尝试为方向属性设置动画时并不好。从jQuery.animate 的文档中：

方向属性（上、右、下、左）如果元素的位置样式属性是静态的（默认情况下是静态的），则对元素没有明显的影响。

于 2013-04-08T23:52:15.043 回答
0

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

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

像Tween.js这样的库以及各种类型的缓动（您在示例中显示的减速/加速效果）和“弹性”算法都可以做到这一点。

他们网站上的一个简单示例。

于 2013-04-08T23:57:58.650 回答