Transitions

Transitions


Transitions are time-varying visual filters. Their role is to visually transition a control from one state to the next. A common example is changing the SRC of an image to change one image to another onscreen. A transition would provide some kind of animated effect to bring in the new image. Transitions can also be applied to make a control gradually fade in or fade out by changing the visibility property.

Transition filters have methods and events for manipulation. When the filter wants to fire an event, the onfilterchange event is fired. This event can be used to script the srcFilter property on the event object, and then supplies all the necessary information about the event. In this way a script can know when a transition has completed. The methods for the filters allow a transition to be applied and played.

The Apply method freezes the visual appearance of the control by first applying the transition, allowing changes to be made without an immediate repaint such as specifying a new image. The Play method then invokes the transition. At any time, the script can "cut to the chase" and finish the transition by calling Stop. The following example shows how to perform an automatic slide show between images.

<HTML>
<HEAD><TITLE>Transition Blend Demo</TITLE>
<SCRIPT language="JavaScript">
var fRunning = 0
function startTrans()
{
    if (fRunning == 0)
    {
        fRunning = 1
        SampleID.filters.blendTrans.Apply();
        SampleID.src = "sunset.jpg";
        SampleID.filters.blendTrans.Play()
    }
}
</SCRIPT>
<SCRIPT for="SampleID" event="onfilterchange">
fRunning = 0
</SCRIPT>
</HEAD>
<BODY>
<IMG id="SampleID" src="beach.jpg" style="filter:blendTrans(duration=3)" onclick="startTrans()"><BR>
Click image for Transition Filter: Blend
</BODY>
</HTML>


Two transition filters ship with Internet Explorer 4.0, blend and reveal. The blend transition allows a simple fade-in or fade-out with a specified duration, while the reveal transition specifies multiple effects such as boxin, boxout, horizontal blinds, and so on.

The following HTML is an example of a simple transition between two images. Clicking the button runs the doTrans script, which first calls Apply on the revealTrans filter to stop painting of the image. It then sets an alternative image and calls Play on the filter to proceed with the transition. In this case the transition type is set to 8, which corresponds to the vertical blinds transition effect. This is applied using an inline style on the IMG tag.

<HTML>
<HEAD><TITLE>Transition Sample</TITLE>
<SCRIPT LANGUAGE=JavaScript>
Function doTrans()
{
    theImg.filters.item[0].Apply();
    theImg.src="circles.bmp";
    theImg.filters.item[0].Play();
}
</SCRIPT>
</HEAD>
<BODY style="background-color:darkblue">
<IMG ID=theImg width=200 height=200
src="clouds.bmp" style="filter:revealTrans(Duration=3.3, Transition=8);">
<BR>
<INPUT type=button value="Start Transition" onClick="doTrans()">
<IMG src="clouds.bmp" style="position:relative; width:1; height:1;visibility:hidden">
<IMG src="circles.bmp" style="position:relative; width:1; height:1; visibility:hidden">
</BODY>
</HTML>


This example also demonstrates the differences between asynchronous and synchronous changes. Changing the innerText of an element is synchronous—the action is completed by the time the statement has executed. Changing the src is effectively asynchronous. Although the actual src property changes immediately, the visual state of the IMG element isn't fully updated until the actual download of the new image is complete. A careful script would wait for the onload event on the image. "Pre-loading" graphics with separate IMG tags is a good way to avoid the synchronicity issue but it will only work if the transition is applied after all image downloads are complete.

© 1997 Microsoft Corporation. All rights reserved. Terms of Use.