Re: Moving Animation

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"));

      }

    });

On Wed, Oct 24, 2012 at 3:47 PM, Tony Rah <xsegrity@gmail.com> wrote:

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+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Deepak Singh

--
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/-/QAU6Wpj8OzgJ.

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

--
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-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.