Transition Effects. Part 2.
Previously, you saw how the basic transition effect class
managed timing, repainting and the simple fade effect. You also saw a
selection of potential transition affects that the control will eventually
implement. Now, we'll see four of the seven remaining effects in
code.
As you saw with the fade effect, the paint routine might
be called at any moment and the control needs to calculate the exact percentage
of transition to display at that time. Furthermore, to ensure that the
transitions are painted quickly, the routines used are not complex so that as
many updates as possible are seen within the allotted time of the transition.
In this article, we'll deal with a few mundane
transitions and also show off some of the clever things that we can do with GDI+
just to keep things interesting.
The Slide
Possibly the simplest transition is the slide, this
takes the final image and moves it across the original so that it is covered.
Figure 1 shows the slide in action.
Figure 1. The slide transition.
The cover image begins off screen to the
left and slides to the right covering the original. This is a simple
process of changing the X position of the cover image according to the current
percentage. This code handles the case for
the slide option.
The Iris
The iris transition was favoured by silent film makers
in the days of Charles Chaplin and Buster Keaton. The trick is to calculate an
ellipse that will completely cover the original image at 100%. This is done by
using 1.414 or root 2 as a multiplication factor. An ellipse that is 1.414 times
as high and 1.414 times as wide as any given rectangle will cover it completely
when placed centrally over the rectangle. This ellipse is used to
generate a clipping region through which the overlay image is allowed to show.
Figure 2 shows the iris in action.
Figure 2. The Iris Transition
This code
shows the case handler for the Iris draw option. Once again, short and simple to
maximize the throughput.
The Spin
Matrices may be used to displace the
image as seen in the slide transition but the spin uses the Matrix to scale,
rotate and position the overlay image. This technique uses an image scale which
is determined by percentage done, coupled with a rotation that makes the overlay
tumble onto the screen. This code shows the Spin
case handler and the illustration in Figure 3 shows the spin in action.
Figure 3. The Spin transition.
The Blinds
Finally, the blinds transition
cuts the image into horizontal bands that open out like the rotating slats of a
Venetian Blind. The source image is cut into strips by selecting the relevant
area and then drawing that into a modified rectangle on the original.
This code shows the Blinds case and the image in
Figure 4 shows the effect in action.
Figure 4. The Blinds transition.
Summary.
This time, you've seen four out of seven
new effects. Note once again how the code that handles the draw routine in
each case is very compact and doesn't waste time on unnecessary frills.
When expanding this component that principle is very important to keep in mind.
The next article will finish up this series by showing you the Barn-door, Spiral, and
Checker-Board transitions.
Figure 5.
You can find the Source Code files here.
Return
to Part 1.
Read on Part 3.
Return
to the main index.