代号一 - Popup like Form Transition

Question

根据 material 过渡指南，我想在应用程序屏幕上建立特定的外观和感觉，以传达这些内容的层次结构。意思是，从左到右过渡的所有内容都处于相同的级别或重要性。较小的表单或简短的用户输入将作为简单的弹出窗口进出，不是水平而是垂直。

预期行为：

幻灯片表单使用默认过渡。 Show() 会将源向左滑动，目标从右侧滑入。 showback() 将从左侧滑入源，向右滑入目标。
弹出窗体使用自定义过渡：show() 将使源保留在原位（不以任何其他方式滑动或过渡），目标（弹出窗体）将从下方滑入。 Showback() 将导致源（弹出窗口）向底部滑出，露出下面的目标（主要window）。

实际行为

幻灯片在我的场景中按预期工作。
show() 导致弹出窗体从底部滑入屏幕，而源窗体保留在原位，被遮盖（如预期）。但是 showback() 导致主要 window 从顶部滑入，覆盖弹出屏幕。

显示实际行为的完整代码示例

public class MyApplication {

private Form current;
private Resources theme;

private Transition defaultInTrans = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, true, 300);
private Transition defaultOutTrans = CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, true, 300);
private Transition popupInTrans = CommonTransitions.createCover(CommonTransitions.SLIDE_VERTICAL, false, 300);
private Transition popupOutTrans = CommonTransitions.createSlide(CommonTransitions.SLIDE_VERTICAL, false, 300);

public void init(Object context) {
    theme = UIManager.initFirstTheme("/theme");
    Toolbar.setGlobalToolbar(true);
}

public void start() {
    if (current != null) {
        current.show();
        return;
    }
    new MainForm().show();
}

public void stop() {
    current = getCurrentForm();
    if (current instanceof Dialog) {
        ((Dialog) current).dispose();
        current = getCurrentForm();
    }
}

public void destroy() {
}

class MainForm extends Form {
    public MainForm() {
        setLayout(BoxLayout.y());

        Button slideBut = new Button("Slide Form");
        Button popBut = new Button("Popup Form");
        add(slideBut).add(popBut);

        slideBut.addActionListener(e -> {
            new SlideForm().show();
        });

        popBut.addActionListener(e -> {
            new PopupForm(this).show();
        });
    }
}

class SlideForm extends Form {
    public SlideForm() {
        Style bg = getContentPane().getUnselectedStyle();
        bg.setBgTransparency(255);
        bg.setBgColor(0x00ff00);
        getToolbar().setBackCommand("", e -> {
            new MainForm().showBack();
        });
        add(new Label("Slide Form content"));
    }
}

class PopupForm extends Form {
    public PopupForm(Form orig) {
        Style bg = getContentPane().getUnselectedStyle();
        bg.setBgTransparency(255);
        bg.setBgColor(0xff0000);

        getToolbar().setBackCommand("", e -> {
            new MainForm().showBack();
            orig.setTransitionInAnimator(defaultInTrans);
            orig.setTransitionOutAnimator(defaultOutTrans);
        });
        add(new Label("This is a popup!"));

        // remove source animation to remain in place
        orig.setTransitionInAnimator(null);
        orig.setTransitionOutAnimator(null);

        // add transition for target popup to appear and vanish from/to the bottom
        setTransitionInAnimator(popupInTrans);
        setTransitionOutAnimator(popupOutTrans);
    }
}

}

具有不同的 CommonTransition 类型、in transition 与 out transition、transition direction 参数以及 show() 与 showback() 的方向非常混乱。

如何实现弹出表单正确滑出的预期行为？
是否有更好的方法或需要更少的代码来实现此目的？

谢谢。

Answer 1

封面具有 in/out 效果，而幻灯片只有出效果。当你从形式 A 滑到形式 B 时，有一个动作包括两种形式，反向时效果完全相同。然而，有了盖子，它会在形式 A 的顶部滑动，而后者则保持在原位，然后从它滑落，使其看起来就像形式 A 一直在它下面。

这意味着过渡入场和过渡出都用于传达两种封面模式。然而，这可能会与 A 形式的转换发生冲突，因此我们需要暂时禁用它。

例如：

removeTransitionsTemporarily(backTo);
f.setTransitionInAnimator(CommonTransitions.createCover(CommonTransitions.SLIDE_VERTICAL, false, 300));
f.setTransitionOutAnimator(CommonTransitions.createUncover(CommonTransitions.SLIDE_VERTICAL, true, 300));        


public static void removeTransitionsTemporarily(final Form f) {
    final Transition originalOut = f.getTransitionOutAnimator();
    final Transition originalIn = f.getTransitionInAnimator();
    f.setTransitionOutAnimator(CommonTransitions.createEmpty());
    f.setTransitionInAnimator(CommonTransitions.createEmpty());
    f.addShowListener(new ActionListener() {
        @Override
        public void actionPerformed(ActionEvent evt) {
            f.setTransitionOutAnimator(originalOut);
            f.setTransitionInAnimator(originalIn);
            f.removeShowListener(this);
        }
    });
}

代号一 - Popup like Form Transition

Codename One - Popup like Form Transition

forms

transition

codenameone