Easy GWT Animations
Asked Answered
A

2

5

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.

Alteration answered 14/4, 2010 at 16:22 Comment(0)
F
5

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);
    }
}
Flavourful answered 14/4, 2010 at 21:41 Comment(2)
thx i'll try that out when I get a chance. One thing though, your constructor is named wrong.Alteration
ok this "works" but see my next post for why this isn't working exactly right: #2669565Alteration
C
0

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

Collins answered 23/3, 2011 at 5:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.