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
bottom-shutter Animation
bw-to-color Animation
cage Animation
diagonal Animation
domino Animation
fade Animation
fade-out-fade-in Animation
flash Animation
left Animation
left-shutter Animation
newWave Animation
particle Animation
rain Animation
right Animation
right-shutter Animation
scale Animation
squeeze Animation
top Animation
top-shutter Animation
vertical-doors Animation
vertical-flash Animation
zoom-both Animation
zoom-in Animation
zoom-out Animation
