J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

Visual Guide to Screen Transitions

Screen Transitions

This guide shows you the available effects for screen transitions.
You can apply any effect by setting the screen-change-animation attribute within the screen's CSS style, e.g.:

.screenAlert {
	padding: 2px;
	background-color: #a999;
	layout: horizontal-shrink | vertical-shrink | center | bottom;
	screen-change-animation: left;
}

Direction of the Transition

Screen transitions may have a direction - when you show a screen with a defined screen-change-animation, the animation will be played in the forward mode. When you are showing a screen without a defined screen-change-animation and the previous screen has a defined animation, the animation will be played in the backward direction.
When both the previous as well as the next screen do have a screen-change-animation, the animation of the next screen will take precedence and it will be played in the forward direction. The only exception to this rule is when the previous screen is an Alert - in that case the Alert's screen-change-animation will be played in the backward direction, even if the next screen has also a defined animation.
Note that not all animations do honor the direction of the transition.

You can override the automatic direction detection with the screen-change-animation-direction CSS attribute that can have forward or backward as values:

.myAnimation {
  screen-change-animation: left-shutter;
  screen-change-animation-direction: forward;
}

Duration of the Transition

Most transitions can be timed using the screen-change-animation-duration CSS attribute. The default duration is 400ms.

.myAnimation {
  screen-change-animation: left-shutter;
  screen-change-animation-duration: 2s;
}

Acceleration Function of the Transition

The acceleration of the transition is calculated in the same way as for CSS animations. You can specify a function for the forward-running and another one for the backward-running transition:

.myAnimation {
  screen-change-animation: left-shutter;
  screen-change-animation-function-forward: linear;
  screen-change-animation-function-backward: exponential-out;
}

Specifying Animations Programmatically

Sometimes you want to specify which transition is being used when displaying a screen. You can do this by specifying a style when calling Display.setCurrent(Displayable). This style then needs to contain a screen-change-animation CSS attribute.

polish.css:

.myAnimation {
  screen-change-animation: left-shutter;
  screen-change-animation-duration: 800ms;
  screen-change-animation-direction: forward;
}

Java code:

//#style myAnimation
display.setCurrent( nextScreen );

Show Cases

The following movies show the main menu as the last screen and the popup alert as the next screen, before returning to the main menu again.

bottom Animation

Move in the next screen from the bottom with the bottom screen-change-animation.

bottom-shutter Animation

Move in the next screen from the bottom using a shutter with the bottom-shutter screen-change-animation.

bw-to-color Animation

Fade the next screen from black/white to the original color with the bw-to-color screen-change-animation.

cage Animation

Make every second pixel row visible in a linear movement with the cage screen-change-animation.

diagonal Animation

Move in the next screen diagonally using the diagonal screen-change-animation.

domino Animation

Zoom out the last screen in a somewhat weird animation with the domino screen-change-animation.

fade Animation

Fade in the next screen smoothely with the fade screen-change-animation.

fade-out-fade-in Animation

Fade out the last screen, then fade in the next screen using the fade-out-fade-in screen-change-animation.

flash Animation

Tear the last screen horizontally open from within its center with the flash screen-change-animation.

left Animation

Move in the next screen from the left with the left screen-change-animation.

left-shutter Animation

Move in the next screen from the left with a shutter using the left-shutter screen-change-animation.

newWave Animation

Splash in the next screen using something like a zipper with the newWave screen-change-animation.

particle Animation

Zoom into single pixels of the last screen to show the next screen with the particle screen-change-animation.

rain Animation

Splash in the next screen in a rain-like fashion with the rain screen-change-animation.

right Animation

Move in the next screen from the right with the right screen-change-animation.

right-shutter Animation

Move in the next screen from the right with a shutter using the right-shutter screen-change-animation.

scale Animation

Scale in the next screen with the scale screen-change-animation.

squeeze Animation

Squeeze out the last screen with the squeeze screen-change-animation.

top Animation

Move in the next screen from the top with the top screen-change-animation.

top-shutter Animation

Move in the next screen from the top with a shutter using the top-shutter screen-change-animation.

vertical-doors Animation

Displays the next screens by something like doors that close from top and bottom and meet in the middle with the vertical-doors screen-change-animation.

vertical-flash Animation

Tear the last screen vertically open from within its center with the vertical-flash screen-change-animation.

zoom-both Animation

Zoom both the previous as well as the next screen with the zoom-both screen-change-animation.

zoom-in Animation

Zoom in the next screen with the zoom-in screen-change-animation.

zoom-out Animation

Zoom out the next screen with the zoom-out screen-change-animation.
back to top