Super smooth movement of objects

Sometimes, web developers get a task that requires a smooth movement of the object on the screen. This may be a download string, sprite, or something else. The problem occurs when the shift seems to be too abrupt even at one point, and that messes up the overall impression of the event. How do we avoid it? Should we use anti-aliasing techniques?

This can be done using the sprites, as well as smart reduction of the original image. Here are some steps that you need to follow:

First, we have a large image of a car.

Then, we removed unnecessary background.

Next, we placed 4 identical that include 600 dots in a single large file (2400x260).

After that, we moved every copy of car at one dot with respect to the previous frame. That is, the second car was moved at one dot, the third was moved at two dots, and the fourth was moved at three dots. Now we got a car on our sprite, which covers the distance of 4 dots for 4 frames.

Finally, we have the last step, namely, it is to make the car goes for 4 frames one dot, and it has to be done as smoothly as possible. To do this, we reduce the image in 4 times, and at the same time remembering to enable the anti-aliasing feature in the editor, and we get a picture of this kind:

Below is a picture, which shows as the car goes through the same dot:

Here comes a question, how do we use this sprite? This is the simplest way: while the picture moves, we determine the fractional part and use it to select the proper frame. As the Web resources do not allow using an inaccurate positioning, so we place the sprite exactly on the right coordinate, for example, at the position X = 15,25, we place a picture on 15th dot along axis X, and the fractional part is transferred in the sprite number, in this case it will be second sprite.

Generally, using the same technique we can do motion along two axes, and also this method can be used to smooth animation background, such as animation backgrounds in CSS for the custom buttons or other similar JS effects.
BumBum 4 october 2012, 19:32
Vote for this post
Bring it to the Main Page


Leave a Reply

Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute