本页面由葡萄牙语机器翻译,可能存在错误。葡萄牙语版本为准。
屏幕转场
在窗口 show()/hide() 时,CrossFly 可以通过捕捉切换前和后的画面并在两者之间插值来为切换添加动画。
你在 WindowStyle 中声明该效果;框架会自行触发转场。
完整示例(复制、粘贴并运行)
package com.exemplo;
import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
/** 可执行的主界面。将 launcher 指向此类(classname)并运行:gradlew :lwjgl3:run */
public class MainWindow extends Window
{
@Override
public void onShow() throws Exception
{
super.onShow();
// 在挂载 UI 之前声明过渡("之前"状态在首次 paint 时捕获)。
// getStyle() 在此推断 WindowStyle,此处定义了 transition(...)。
getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f); // 效果 + 时长(秒)
setLayout(new VerticalLayout());
Label titulo = new Label("Nova tela");
add(LAY_AUTO, titulo);
Button avancar = new Button("Avançar");
add(LAY_AUTO, avancar);
// 当压入另一个带 SLIDE_LEFT 过渡的窗口时,框架会自动为切换添加动画:
avancar.onAction(c -> new MainWindow().show());
}
}
下面的片段只展示了核心部分(放入
onShow()内部的内容)。要运行它们,请将其放入上面的MainWindow骨架中。
声明式的方式(推荐)
在窗口样式中定义效果 — 在 onShow() 中,任何内容显示之前:
@Override public void onShow() throws Exception {
super.onShow();
getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f); // 效果 + 时长(秒)
// … 挂载 UI …
}
或通过 WindowStyle 的字段/流式方法:
getStyle().transition = UIConstants.Transition.FADE; // 公有字段
getStyle().transitionDuration = 0.3f;
// 流式等价写法:
getStyle().transition(UIConstants.Transition.FADE).transitionDuration(0.3f);
可用效果(UIConstants.Transition)
| 值 | 效果 |
|---|---|
NONE |
即时切换(默认) |
FADE |
一个界面淡入覆盖另一个 |
SLIDE_LEFT / SLIDE_RIGHT |
沿水平轴滑动 |
SLIDE_UP / SLIDE_DOWN |
沿垂直轴滑动 |
SCALE |
新界面从中心放大 |
SCALE_DOWN |
当前界面向中心缩小 |
默认值:
WindowStyle.transition初始为NONE,transitionDuration初始为0.5s。Picker 已经 默认使用FADE。
底层原理
ScreenTransition.begin(Transition, duration) 将当前界面捕捉为“之前”,将新界面在下一帧捕捉为
“之后”并进行插值(使用内部的 AlphaAnimation)。你通常不会去调用它 —
当 transition != NONE 时,Window.show()/hide() 会调用它。
最佳实践
- 根据导航意图选择效果:
SLIDE_LEFT用于前进,SLIDE_RIGHT/SCALE_DOWN用于返回。 - 保持时长较短(0.25–0.4s)— 过长的转场会造成干扰。
- 在
onShow()中定义转场(在窗口被绘制之前)。
常见错误
- 定义转场太晚(在第一次 paint 之后)— “之前”的画面已经改变了。
- 时长过长导致导航变慢。
另请参阅
这个页面有帮助吗?感谢你的反馈!