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