Animated Resize

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Animated Resize

Jonathan Wolfe
Hi,

Is there an efficient way (maybe global way)  to add a visual effect when widgets resize?

window.setHeight( 60 );
window.setHeight( 260 ); // expand to this size slowly rather than instantaneously.

Or do I have to implement an animation for every widget resize event:
var desc = {duration: 1000, timing: "ease-out", keyFrames : {
  0 : {"width" : "30px"},
  70 : {"width" : "100px"},
  100 : {"width": "30px"}
}};
var box = document.getElementById("box");
qx.bom.element.Animation.animate(box, desc);

Thanks!
Jonathan



------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Animated Resize

Andreas Parusel
Hi,

there is no shortcut to magically handle all widgets, you are right assuming that you would have to register a handler for the resize-Event on each widget.

Generally I’m skeptical if it’s such a good idea what you’re planning: 

Animating a few simple divs should work, but if you have lots of widgets in your page, you might run into performance issues. Furthermore, the animations and the actual resizing of widgets would be out of sync. You would most likely first see the animation and then after a short moment, qooxdoo’s lay outing-system would change the widget’s size slightly delayed after the new layout has been calculated.

But give it a try if you want (maybe only a few widgets first) and see if you’re happy with the result.

Best regards
Andreas
      

Am 20.04.2015 um 15:33 schrieb Jonathan Wolfe <[hidden email]>:

Hi,

Is there an efficient way (maybe global way)  to add a visual effect when widgets resize?

window.setHeight( 60 );
window.setHeight( 260 ); // expand to this size slowly rather than instantaneously.

Or do I have to implement an animation for every widget resize event:
var desc = {duration: 1000, timing: "ease-out", keyFrames : {
  0 : {"width" : "30px"},
  70 : {"width" : "100px"},
  100 : {"width": "30px"}
}};
var box = document.getElementById("box");
qx.bom.element.Animation.animate(box, desc);

Thanks!
Jonathan


------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Animated Resize

Jonathan Wolfe
Thanks Andreas! That helps a lot!


 Jonathan Wolfe Meteorologist  
        Charleston Pilot Project  

        Charleston, WV National Weather Service
        304-746-0190

On Mon, Apr 20, 2015 at 12:35 PM, Andreas Parusel <[hidden email]> wrote:
Hi,

there is no shortcut to magically handle all widgets, you are right assuming that you would have to register a handler for the resize-Event on each widget.

Generally I’m skeptical if it’s such a good idea what you’re planning: 

Animating a few simple divs should work, but if you have lots of widgets in your page, you might run into performance issues. Furthermore, the animations and the actual resizing of widgets would be out of sync. You would most likely first see the animation and then after a short moment, qooxdoo’s lay outing-system would change the widget’s size slightly delayed after the new layout has been calculated.

But give it a try if you want (maybe only a few widgets first) and see if you’re happy with the result.

Best regards
Andreas
      

Am 20.04.2015 um 15:33 schrieb Jonathan Wolfe <[hidden email]>:

Hi,

Is there an efficient way (maybe global way)  to add a visual effect when widgets resize?

window.setHeight( 60 );
window.setHeight( 260 ); // expand to this size slowly rather than instantaneously.

Or do I have to implement an animation for every widget resize event:
var desc = {duration: 1000, timing: "ease-out", keyFrames : {
  0 : {"width" : "30px"},
  70 : {"width" : "100px"},
  100 : {"width": "30px"}
}};
var box = document.getElementById("box");
qx.bom.element.Animation.animate(box, desc);

Thanks!
Jonathan


------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



------------------------------------------------------------------------------
BPM Camp - Free Virtual Workshop May 6th at 10am PDT/1PM EDT
Develop your own process in accordance with the BPMN 2 standard
Learn Process modeling best practices with Bonita BPM through live exercises
http://www.bonitasoft.com/be-part-of-it/events/bpm-camp-virtual- event?utm_
source=Sourceforge_BPM_Camp_5_6_15&utm_medium=email&utm_campaign=VA_SF
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel