0

私は次のようなカスタムクラスを持っていますが、これは正常に動作します。ボタンはテキストに合わせて拡大/縮小し、クリックすると背景画像が変更されます。私が解決したい問題は、クリックされた/notClickedが呼び出されたときに、1つまたは他の画像を「フェードイン」する方法です。これが私のコードです

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

以下は、任意の要素をフェードするための一般的なユーティリティ クラスです。

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 に答える
0

GwtQueryを使用できます。フェードインとフェードアウトの効果 (および他の多くの JQuery グッズ) を提供し、ブラウザー間の互換性があり、かなりアクティブなようです。

于 2013-03-28T10:17:15.810 に答える