Transition library, Part 3.

For the final installment in this series you will see how to add a couple of more complex transitions to the existing selection.  You'll also see the relatively simple barn-door transition.  As the groundwork for the rest of the library is already in place we can segue smartly into the code. 

The barn-door. 

This simple effect is created by dividing the final image into two parts and stretching each half across the original image until it's completely covered.  Figure one shows the barn-door transition at work. 

Figure 1. The Barn-Door transition.

The code that creates this effect is shown here. Remember that the transition is dependent on the elapsed time since the transition started and that the code must calculate the exact effect seen at that moment.

The Checkerboard.

This effect divides the control into squares and gradually fills them with the final image. The number of vertical or horizontal divisions are controlled by the properties HorizontalDivisions and VerticalDivisions. Figure 2 shows the checkerboard transition in progress.

Figure 2. The Checkerboard transition.

The code that handles the drawing for the Checkerboard case is shown here.

The case handler begins by creating a GraphicsPath object. Depending on the percentage of progress made through the transition, rectangles of a calculated width are added to the path, one for each row-column position. This path is used to create a region that clips the final image.

The Spiral

For the final transition in this library a complex shape is used to create the shape of a Nautilus shell that gets progressively larger as it rotates. Figure 3 shows the Spiral transition in action.

Figure 3. The Spiral transition.

This effect takes advantage of the GraphicsPath fill-mode settings to produce a clipping region. There are two settings for the GraphicsPath.FillMode property. Winding and Alternate. The default is Alternate which enables you to create regions with holes in. The other mode, Winding, examines the outer edges of the path and ignores lines inside it to produce a completely filled shape.

Figure 5 illustrates how a simple calculation enables a series of points to draw a spiral pathway from the center of the control. The path is closed to make the final shell shape and, depending on the number of horizontal divisions, has more or less turns for the 100% complete shape. 

The spiral path.

If the GraphicsPath was created with the default fill mode, the spiral would look like the image shown in figure 6. Because Winding is used explicitly we get the desired effect.

Figure 6. Choosing the correct fill-mode is important.

The code that handles the Spiral drawing case is shown here.

Wrapping up.

The test harness has been updated to include the properties of the ImageTransitionControl so that you can play with all the options.

The ImageTransitionControl is useful in it's own right and hopefully, with the information and diversity of the transitions in this series, you'll see how you can extend it to create your own transition types.

This ends the Transition series.

You can find the Source Code files here.

 

Return to Part 2.

Return to the main index.