AsFusion

Transitions added to Photoshow example

I added some transitions and a progress bar to our Photoshow example.

For the transitions, I wanted the previous image to fade out and the new image to fade in. But in the original code, the image was binding to the currently selected image, so whenever the selected image changed (by clicking on next or previous buttons), the source of the image would change. The biggest problem with this is that if I changed the currently selected image as soon as the user would click the buttons, the image would change without waiting for the fade out to complete. One of the main changes made to the code is that before I can change the source of the image, I need to wait until the previous image has completely faded out. I do this by using the effectEnd event of the Fade effect to know when this happens, and only then make the change in the image source.

The updateCurrentPicture() function changes the currently selected image.

To trigger the effect, I used the hideEffect property and when the user clicks “Next”, we set the picture.visible = false:

Adding the fade in effect is simple, and I used the showEffect property of the Image:

Another issue was that if I set picture.visible = true as soon as the previous image has faded out, the fade in effect would be applied on a picture that may still be loading, and I would miss the effect. To avoid this, I must wait until I am sure the image has loaded:

Next update would be to add a timer for autoplaying.

View example
Download the source