0

我有一个自定义类，如下所示，它可以正常工作，按钮会增大/缩小以适应文本，并且单击时 bg 图像会发生变化。我要解决的问题是如何在单击/未单击时“淡入”一个或其他图像这是我的代码

public ExpandingOvalButton(String text) {
    if (text.length() > 15) {
        label.getElement().getStyle().setFontSize(20, Unit.PX);
    } else {
        label.getElement().getStyle().setFontSize(30, Unit.PX);
    }

    int width = 120;
    initWidget(panel);

    label.setText(text);
    // width = width + (text.length() * 8);
    String widthStr = width + "px";
    image.setWidth(widthStr);
    image.setHeight("100px");
    button = new PushButton(image);
    button.setWidth(widthStr);
    button.setHeight("50px");
    panel.add(button, 0, 0);
    panel.add(label, 18, 14);
}

public void isClicked()
{
    image.setUrl("images/rectangle_green.png");
}

public void unClicked()
{
    image.setUrl("images/rectangle_blue.png");
}

@Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
    return addDomHandler(handler, ClickEvent.getType());
}

public void setButtonEnabled(boolean enabled) {
    // panel.setVisible(enabled);
    // this.label.setVisible(enabled);
    this.button.setVisible(enabled);
}
4

2 回答 2

0

您可以使用GwtQuery。它提供了fadeIn 和fadeOut 效果（以及许多其他JQuery 好东西），它是跨浏览器兼容的，而且似乎非常活跃。

于 2013-03-28T10:17:15.810 回答
0

这是一个用于淡化任何元素的通用实用程序类：

public class ElementFader {

    private int stepCount;

    public ElementFader() {
        this.stepCount = 0;
    }

    private void incrementStep() {
        stepCount++;
    }

    private int getStepCount() {
        return stepCount;
    }

    public void fade(final Element element, final float startOpacity, final float endOpacity, int totalTimeMillis) {
        final int numberOfSteps = 30;
        int stepLengthMillis = totalTimeMillis / numberOfSteps;

        stepCount = 0;

        final float deltaOpacity = (float) (endOpacity - startOpacity) / numberOfSteps;

        Timer timer = new Timer() {

            @Override
            public void run() {
                float opacity = startOpacity + (getStepCount() * deltaOpacity);
                DOM.setStyleAttribute(element, "opacity", Float.toString(opacity));

                incrementStep();
                if (getStepCount() == numberOfSteps) {
                    DOM.setStyleAttribute(element, "opacity", Float.toString(endOpacity));
                    this.cancel();
                }
            }
        };

        timer.scheduleRepeating(stepLengthMillis);
    }
}

调用代码例如：

new ElementFader().fade(image.getElement(), 0, 1, 1000); // one-second fade-in
new ElementFader().fade(image.getElement(), 1, 0, 1000); // one-second fade-out
于 2013-03-26T20:40:56.593 回答