Super smooth motion of objects
Sometimes web developers have a problem that requires a smooth movement of the object across the screen. This could be a boot string, some kind of sprite (for example, cars on keyboardboards ) or something else. The problem arises when a shift even by one point seems too sharp and spoils the overall feeling of what is happening. How to avoid it? Use anti-aliasing techniques.
We made a small example (and then another with a looped background ) in which you can see how a smooth shift looks like with subpixel precision and anti-aliasing, and what the same shift looks like without this effect.
How is this done?
This is done with the help of sprites, as well as a "smart" reduction of the original image. Now, in order.
')
First, we took a large image of a typewriter:
Then, cleaned it of an unnecessary background:
Then we placed 4 identical machines with a step of 600 points in one large file (2400x260 points).
After that, we shifted each copy of the machine by one point, relative to the previous frame. That is, the second machine - to the point, the third - for two, and the fourth - for all three. Now on our sprite there is a machine that travels a distance of 4 points in 4 frames.
It remains the last action, to make the machine drive one point in 4 frames and make it as smooth as possible. To do this, we reduce the image 4 times, not forgetting to enable the anti-aliasing option when decreasing in your editor, and get a picture of this type (which, by the way, we use in our example):
Below is a picture in which you can see in the zoom how the machine passes through one point:
Next thing is small: how to use this sprite? The easiest way: while moving the picture, determine the fractional part and use it to select the desired frame. Since web tools do not allow inaccurate positioning, we place the sprite exactly along the coordinate we need, for example, at position X = 15.25 we place the image at 15 point along the X axis, and we transfer the fractional part to the sprite number, in our case it will be second sprite.
In principle, according to a similar scheme, you can make a movement along two axes, as well as use this method for smooth background animation, for example, for css background animation for custom buttons or other similar js effects.
We made a small example (and then another with a looped background ) in which you can see how a smooth shift looks like with subpixel precision and anti-aliasing, and what the same shift looks like without this effect.
How is this done?
This is done with the help of sprites, as well as a "smart" reduction of the original image. Now, in order.
')
First, we took a large image of a typewriter:
Then, cleaned it of an unnecessary background:
Then we placed 4 identical machines with a step of 600 points in one large file (2400x260 points).
After that, we shifted each copy of the machine by one point, relative to the previous frame. That is, the second machine - to the point, the third - for two, and the fourth - for all three. Now on our sprite there is a machine that travels a distance of 4 points in 4 frames.
It remains the last action, to make the machine drive one point in 4 frames and make it as smooth as possible. To do this, we reduce the image 4 times, not forgetting to enable the anti-aliasing option when decreasing in your editor, and get a picture of this type (which, by the way, we use in our example):
Below is a picture in which you can see in the zoom how the machine passes through one point:
Next thing is small: how to use this sprite? The easiest way: while moving the picture, determine the fractional part and use it to select the desired frame. Since web tools do not allow inaccurate positioning, we place the sprite exactly along the coordinate we need, for example, at position X = 15.25 we place the image at 15 point along the X axis, and we transfer the fractional part to the sprite number, in our case it will be second sprite.
In principle, according to a similar scheme, you can make a movement along two axes, as well as use this method for smooth background animation, for example, for css background animation for custom buttons or other similar js effects.
Source: https://habr.com/ru/post/67179/
All Articles