How to perform transition b/w 2 images like Google Street View?

[thephatp]

I have the need to "zoom in" on a background image and animation transition to a new image that effectively looks like I just zoomed in to another location. Really, I'll have to load another image, but the effect I'm looking for is exactly like Google's Street View transition.

In Street View, you see somewhere in the distance you want to go to, you click to "zoom" to that area, and the transition is basically:

• Blur current image
• Stretch bottom image
• Load new image behind (looks like the top half of the image view is the new image, and the bottom half of the image view is the old image)
• Sharpen (un-blur) the new image

I'll be doing this transition using vector artwork creating in Adobe Illustrator, so I can make the original images as big as needed. I just don't know how to perform the actual transition. I want it to appear to the user that they touch inside the image to "zoom to the next hill" but I need to actually load another image with new artwork on it.

Can I do this with one UIImageView? Or will I need two to accomplish the effect? Is it even possible to do like Google's transition?

Any help or guidance is greatly appreciated.

[Duncan C]

Originally Posted by thephatp

I have the need to "zoom in" on a background image and animation transition to a new image that effectively looks like I just zoomed in to another location. Really, I'll have to load another image, but the effect I'm looking for is exactly like Google's Street View transition.

In Street View, you see somewhere in the distance you want to go to, you click to "zoom" to that area, and the transition is basically:

• Blur current image
• Stretch bottom image
• Load new image behind (looks like the top half of the image view is the new image, and the bottom half of the image view is the old image)
• Sharpen (un-blur) the new image

I'll be doing this transition using vector artwork creating in Adobe Illustrator, so I can make the original images as big as needed. I just don't know how to perform the actual transition. I want it to appear to the user that they touch inside the image to "zoom to the next hill" but I need to actually load another image with new artwork on it.

Can I do this with one UIImageView? Or will I need two to accomplish the effect? Is it even possible to do like Google's transition?

Any help or guidance is greatly appreciated.

Sounds like you'll need more than one image. Does the UIKit render PDF documents as vector images, scaling as needed? And if so, is it fast enough to animate well? If not, you might want to render the PDF to it's largest size, then scale it down using a transform as the starting appearance.

Do some reading on CALayers. In UIKit, all views are backed by a layer, and if you change the transform property of a layer, the system animates the change automatically. I'm not sure about blurring, but you could easily animate scaling, rotation, and changes in opacity using simple layer animations.

[thephatp]

Originally Posted by Duncan C

Sounds like you'll need more than one image. Does the UIKit render PDF documents as vector images, scaling as needed? And if so, is it fast enough to animate well? If not, you might want to render the PDF to it's largest size, then scale it down using a transform as the starting appearance.

Do some reading on CALayers. In UIKit, all views are backed by a layer, and if you change the transform property of a layer, the system animates the change automatically. I'm not sure about blurring, but you could easily animate scaling, rotation, and changes in opacity using simple layer animations.

Duncan, thank you for the detailed response. I have not done any work with layers, but that sounds like a great place to start. I'll see what I can come up with and report back, though it may be awhile. Thanks for getting me on the right track.