User Interface Transitions
User Interface Transitions¶
User Interface Transitions are transitions that occur when opening or closing User Interfaces.
User Interface Transitions¶
Fade In¶
Fade In transitions gradually reveal the interface by fading in from a solid color.
Properties¶
System¶
| Name | Explanation | Type |
|---|---|---|
| Blend Mode | The blend mode used when compositing the transition to the screen. | BlendMode |
| Color | The solid color to fade from. | Color |
| Duration | The duration of the transition in milliseconds. | Number |
| Easing Function | The easing function to determine the progress of the transition. | Easing Function |
Fade Out¶
Fade Out transitions gradually hide the interface by fading out to a solid color.
Properties¶
System¶
| Name | Explanation | Type |
|---|---|---|
| Blend Mode | The blend mode used when compositing the transition to the screen. | BlendMode |
| Color | The solid color to fade from. | Color |
| Duration | The duration of the transition in milliseconds. | Number |
| Easing Function | The easing function to determine the progress of the transition. | Easing Function |
Instant¶
Instant transitions complete immediately with no visual effect.
Note: No properties are available for this transition, as it occurs instantly.
Properties¶
System¶
| Name | Explanation | Type |
|---|---|---|
| Blend Mode | The blend mode used when compositing the transition to the screen. | BlendMode |
| Duration | The duration of the transition in milliseconds. | Number |
| Easing Function | The easing function to determine the progress of the transition. | Easing Function |
Movement¶
Movement transitions slide the interface into view from a starting position to an ending position.
Properties¶
System¶
| Name | Explanation | Type |
|---|---|---|
| Blend Mode | The blend mode used when compositing the transition to the screen. | BlendMode |
| Duration | The duration of the transition in milliseconds. | Number |
| Easing Function | The easing function to determine the progress of the transition. | Easing Function |
| End Pixel X | The ending X coordinate in pixels. | Number |
| End Pixel Y | The ending Y coordinate in pixels. | Number |
| End Relative X | The ending X coordinate relative to the screen. | Number |
| End Relative Y | The ending Y coordinate relative to the screen. | Number |
| Start Pixel X | The starting X coordinate in pixels. | Number |
| Start Pixel Y | The starting Y coordinate in pixels. | Number |
| Start Relative X | The starting X coordinate relative to the screen. | Number |
| Start Relative Y | The starting Y coordinate relative to the screen. | Number |
| Use Relative Coordinates | Whether to use screen-relative coordinates instead of pixel coordinates for the start and end positions. | Toggle |