Moving Animation

[Deepak Singh]

Hi,

I need to do an animation something like following,

I have a <HTMLPanel> element. Now at a certain event, i would like to add this <HTMLPanel> to a shortlisted panel(say a HorizontalPanel).

The position of HorizontalPanel is:  bottom:0px;position:fixed. So this panel always lies at bottom of the browser and is fixed.

The <HTMLPanel> should make a move from its current position on screen and merge into HorizontalPanel. The movement should be visible to the user. Also, the size of <HTMLPanel> should go on minimizing as it moves towards HorizontalPanel.

how can i achieve this animation ?

I think i am clear what i want to say. If anything else to understand, let me know.

Thanks

Deepak Singh

[Deepak Singh]

Any help please....

--
Deepak Singh

[Fabricio Pizzichillo]

Hi, take a look at this example, may be help you

http://code.google.com/p/google-web-toolkit/source/browse/releases/2.4/samples/expenses/src/main/java/com/google/gwt/sample/expenses/client/SlidingPanel.java

Regards

2012/10/23 Deepak Singh <deepaks...@gmail.com>

Any help please....

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Deepak Singh]

Hi Fabricio,

I am looking for animation something like google hotel finder.

Go to   http://www.google.com/hotelfinder

Search hotels for a city.

Select a hotel and click on 'Add to shortlist' button for the hotel. Here you will notice that the image of that hotel is making a nice movement from its current position(top) to bottom(shortlist).

Regards

Deepak

--
Deepak Singh

[Jens]

Use GWT's Animation class for full cross browser animation. You can implement your custom animations and also run them in parallel, e.g. a fade-in animation and a bouncing-drop animation in parallel similar to what Googles Hotel Finder uses.

Other options are CSS3 transitions and/or animations but as far as I know GWT has no notion of the transitionEnd/animationEnd JS event so you do not know when a CSS3 animation has finished. But you can easily patch GWT to support these CSS3 events if you want to use CSS3.

-- J.

[Jens]

Basic example can be found in the showcase: http://gwt.google.com/samples/Showcase/Showcase.html#!CwAnimation

-- J.

[Deepak Singh]

Any hint / guide over the logic how to implement because i feel panic how to write custom animation as i never did this and used gwtquery for all animations.

Regards

Deepak 

On Tue, Oct 23, 2012 at 9:47 PM, Jens <jens.ne...@gmail.com> wrote:

Basic example can be found in the showcase: http://gwt.google.com/samples/Showcase/Showcase.html#!CwAnimation

-- J.

--

You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/gBcmnMOpiIUJ.

To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Tony Rah]

Here are some tips for such a thing in GWTLand. These are off the top of my head so there might be some missing pieces.

1. Use the GWT Animation class. Read its java doc. It will tell you everything you need to know about how it works.

2. Override the onStart method and hold onto the widget to be moved, start location left/top, finish location left/top. You will use these on the onUpdate method. You will also want to detach you widget from its current parent, attach it to the RootPanel, set its css to position absolute, its left/top to the start location that you captured.

3. In the onUpdate method you will be given a progress argument. This argument will range between .0-1.0. You will want to do a little math here to determine the incremental left/top of the widget given the progress. You can use the start and finish location you captured in the onStart to perform this calculation. This will give you your movement across the screen.

4. Override the onFinish. Here you will want to detach your widget from the RootPanel and attach it to the new parent in the target destination. You can also add the bouncy effect using another GWT Animation if you like.

5. After all that you will call the run method on the animation and give it a duration in milliseconds.

You will likely have to tweak and tune the code to achieve the exact effect you want but this should get you started. You could also play with css3 transitions to get your animation effects but it is not supported in all browsers and might be a bit difficult (if not impossible) given the effects you are trying to achieve.

Good luck...

x

On Tuesday, October 23, 2012 1:00:07 PM UTC-6, Deepak Singh wrote:

Any hint / guide over the logic how to implement because i feel panic how to write custom animation as i never did this and used gwtquery for all animations.

Regards

Deepak 

On Tue, Oct 23, 2012 at 9:47 PM, Jens <jens.ne...@gmail.com> wrote:

Basic example can be found in the showcase: http://gwt.google.com/samples/Showcase/Showcase.html#!CwAnimation

-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/gBcmnMOpiIUJ.

To post to this group, send email to google-we...@googlegroups.com.

To unsubscribe from this group, send email to google-web-toolkit+unsub...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

[Manuel Carrasco Moñino]

Use the animate method from gwtquery to move the widget to the panel position (just a line of code) , dont forget to add a callback function in order to add the widget to the panel after the animation has been finished and maintain the gwt widget hierarchy.

BTW: gquery uses gwt-animate as its low-level function.

Example code:

    // Create your widgets and add to the document

    final HorizontalPanel panel = new HorizontalPanel();

    final HTMLPanel widget = new HTMLPanel("Hello World");

    RootPanel.get().add(panel);

    RootPanel.get().add(widget);

    

    // Style your widgets, gwtquery makes it easy

    $(panel).css($$("bottom:0px; position:fixed; border: solid 1px; width: 200px; height: 40px;"));

    $(widget).css($$("top: 50%; left: 50%; position:fixed; border: solid 1px; width: 150px"));

    

    // Compute the final position of your widget

    Properties props = $$("top: " + $(panel).top() + ", left:" + $(panel).left());

    // animate it and run a callback function

    $(widget).animate(props, 2000, new Function(){

      public void f() {

        panel.add(widget); 

        $(widget).css($$("position: relative"));

      }

    });

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/QAU6Wpj8OzgJ.

To post to this group, send email to google-we...@googlegroups.com.

To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.