What are the basics for creating animations in web apps?

1
votes

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.

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.

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 (this is called when a button is pressed)

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

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

2
javascripthtmlanimationcanvasjquery-animate

2 Answers

0
votes

I'd recommend a library like Tween.js.

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.

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.

0
votes

You need to set the position of your div to absolute (fiddle):

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

The default position of elements is static (see here) which is no good when you're trying to animate directional properties. From the documentation for jQuery.animate:

Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.