Morphing from an image to a shape in Silverlight 3

Question

Hi,

I have a requirement to morph from an image (png) to a shape (polygon) in Silverlight 3 as an effect, but of course there is no built in transition or method to do this.

At the moment the best I have is fade one out and the other in, but can anyone suggest a decent alternative that may work or look better?

Regards

Moo

Answer 1

I'm not a silverlight programmer, and don't know the details of what you want to do, so this is just a shot in the dark, but... if the shape you want the image to morph to is always going to have the same initial visual appearance (or some limited set of appearances) you might try morphing from the original image to an image of that shape, and then swapping the image that's the morph target for the geometry once you're done the morph. Course whether that would work or not is very dependent on the details of what you're doing. Sorry if you've already considered that and ruled it out.

Answer 2

You could possibly morph the image brush to the path of the shape by using an appropriate projection matrix. Or render a shape using the image brush and then morph that shape to the target shape, i.e. go from a rectangle to the target shape but using the image brush as the shape background. You may need to still warp the image brush somehow though.

An example of rendering a warped image is here in Charles Petzold's blog.

Answer 3

In Blend:

1. Create a rectangle. Set stroke to No Brush and Fill to Tile Brush.
2. For the ImageBrush of the Tile Brush, select your image.
3. In the object browser, select the rectangle, right click > Path > Convert to Path.
4. Use the pen tool to add some points to the path.
5. Add a storyboard.
6. Add a keyframe at 1 second. Blend will go into record mode
7. Use the direct selection tool to move the points into the polygon shape you want. Test out your animation.

At this point, the image morphs into a shape, but the image is still there. If you need to remove the image as well as morph it:

1. In your storyboard, at the keyframe at 1 second, change the opacity to 0.
2. Create a copy of the rectangle, but make sure fill is set to No Brush and Stroke is set to a color and width. Set the opacity to 0.
3. Add points, and mimic the animation you just set up for the image's rectangle.
4. Add a keyframe at 1 second for this element. In record mode, change the opacity to 100%.

The end result will be both paths morphing, the one with the image fading out while the one with no fill fading in.