I am tasked with converting Flash animations to HTML. Animation is quite complex and requires moving several images (9) from location (x, y) to location (x2, y2), while simultaneously increasing the image size from 215px to 930px in width.
When doing the initial testing of this animation with only 1-2 images, I noticed a lot of variability in the FF processing of this animation. To try to isolate the problem, I removed the dynamic resizing of the animation and simply moved it from point A to point B.
What was interesting was that I saw the same behavior when I simply moved an image of 930 pixels in size, which was resized to 215 pixels (using CSS width or the built-in width properties).
When I try the same animation with a different image, which is actually 215 pixels wide, it runs smoothly. Then I tried the same animation with the original 930px image (no resizing), and it worked well too.
This makes me wonder if the browser should “resize” the image to 215 pixels every time it moves, which leads to discontinuity. Is this a correct guess? If so, is there another way to optimize the animation that allows you to simultaneously resize the image and move the image?
Notes: 1) One optimization I made is to position the images absolutely, to minimize the fusion process. 2) I tested the animation using jQuery and the fX framework.
source share