How to best approach this kind of animation

[iki_xx]

Hi all,

I'm working on a project which will have full browser/ full screen galleries for desktop computers.

It will probably run on previous generation of processors.

This picture explains the type of the transitions I'm going for.

 

 

 

 

 

 

So as you can see, I have an image at the bottom of the stack(desert image), and the next image in the gallery will come on top, with those masked transitions revealing it slowly.

Currently I'm using just plain masks and scaling then horizontally across the screen. It works fairly well on my machine, but I have no way of testing it on older computers.

 

I will also create various other transitions regarding stripes like fading in new image over the old by fading in one stripe at the time, blinds transition etc...

 

I'm interesting in hearing your thoughts on optimizing this kind of animations. The gallery will be stretched accross the whole browser so the dimensions can be pretty big.

I was reading about BlittingMask class, never used it before, can that help to improve the performance of the gallery? Should I use bitmap caching ?

 

How would you approach building this kind of stuff.

 

Any help is much appreciated.

[Carl]

these 2 techniques may interest you:

 

http://www.snorkl.tv/2011/08/tile-trans ... d-masking/

 

http://www.snorkl.tv/2010/11/timelinema ... mega-mask/

 

unfortunately I can't really guess exactly what impact these techniques would have on "older computers" or how much of an advantage BlitMask would have. I almost wonder if BlitMask would cause more overhead as it seems you would be constantly increasing the size of the BlitMask and re-sampling more and more pixels. you would have to test.

[iki_xx]

Carl, those are some excellent tutorials!

 

Those are the exact transition effects I want to use, the question is should I use "masks" or "bitmaps" for those kinds of animations.

if you look at your animations:

 

 

 

 

 

 

They could be achieved by using the source image, and slicing it in a few bitmaps, and animate those parts back in to source.

 

- What do you think is the best approach?

 

- Also, should the source image be cached as bitmap, when doing masked animations?