什么是网络应用程序的创建动画的基本知识？ [英] What are the basics for creating animations in web apps?

问题描述

我期待到如何在HTML5应用程序创建一个简单的动画。我想（用的上方的设置窗口高度的100％），以启动与关闭页的画布，以动画在屏幕中间，我上面的其他油画。

I am looking into how to create a simple animation in an HTML5 app. I want to start with an off-page canvas (with top set to 100% of the window height), and animate it to the middle of the screen, above my other canvases.

我曾尝试谷歌，但搜索结果是一个画布中div的动画和动画的混合，并没有什么我试图似乎工作。例如， jQuery的动画（）的功能，这里所讨论的。

I have tried Google, but the search results are a mix of animating divs and animation within a canvas, and nothing I have attempted seem to work. For example, the jQuery animate() function, as discussed here.

我也试图动态创建一个画布和动画在屏幕上，但没有奏效。我现在的code是如下：

I have also tried to dynamically create a canvas and animate it on screen, but that did not work. My current code is as follows:

HTML

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

CSS

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

的javaScript （这被称为当按钮为pressed）

javaScript (this is called when a button is pressed)

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

我怎样才能正确地得到这个动画？最终的结果应该是这样rel=\"nofollow\">这个月球基地动画

How can I correctly get this to animate? The final result should be something like the up-direction of this MoonBase animation.

推荐答案

我建议一个图书馆一样的 Tween.js 。

I'd recommend a library like Tween.js.

你在你的问题指的是那种动画的类型是线性的，即你从A以恒定速度移动你的对象到B

The kind of animation you're refering to in your questions is of type "linear" i.e. you move your object from A to B at a constant rate.

如 Tween.js 做到这一点，以及各类宽松（该库减速/加速效果，你会显示在你的例子）和弹性的算法。

A library like Tween.js does this as well as various types of easing (the slow down/speed up effect you're showing in your example) and "elastic" algorithms.

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

A simple Example from their site.

这篇关于什么是网络应用程序的创建动画的基本知识？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！