Easy GWT Animations

Question

I've started looking at some external GWT libraries for animations, but they all seemd a bit overkill for what i want.

I'm trying to mimic JQuery Tools scrollabel plugin in GWT for a scrolling navigation (think iphone). User clicks an item, page scrolls to the child panel of that item, which may also have children that can be clicked.

All I need to do is slide a div, x number of pixels backwards and forwards over some fixed rate of time

The only real tutorial i've found on writing animations in GWT is 2 years old and seems a bit verbose, (managing individual frames etc...)

Is there no simpler solution for easily moving a div from one position to another without requiring all the extra cruft?

Forgive me but I'm coming from jQuery coding that has this built in simply and easily.

Answer 1

GWT 2's built in Animation class is quite good. All you need to do is extend the class, implement onUpdate(), and then call run() to start the animation. I haven't used the scrollTop property so I can't guarantee this will work right, but it should give you the basic idea:

public class ScrollAnimation extends Animation {
    private final Element e;
    private int scrollStart;
    private int scrollStop;

    public ScrollAnimation(Element e) {
        this.e = e;
    }

    public scrollTo(int position, int milliseconds) {
        scrollStart = e.getPropertyInt("scrollTop");
        scrollStop = position;
        run(milliseconds);
    }

    @Override
    protected void onUpdate(double progress) {
        int position = scrollStart + (int)(progress * (scrollStop - scrollStart));
        e.setPropertyInt("scrollTop", position);
    }
}

Answer 2

For my purposes, I just wanted to animate a panel moving. It turns out this is built in to LayoutPanel, so I didn't need to touch the Animation class at all.

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Animation