Community
Participate
Working Groups
In this release, we plan to improve the animation support. See dependent bugs.
Some wild ideas that i don't want to open bugs for (yet): - Fly in/out for shells - Roll in/out for combo-boxes - Cross-fade effect for images on buttons/items. - Animated progress-bar-indicator (change in size and animated fill) - Animated "snap" for dragged coolbar-items, table/tree-columns If we would use transformations, we could also do more advanced stuff like windows 7 and mac os x.
Also: Items (Tree, Table, List) should support hover-animation.
I also just saw that in skype (windows), the hover of menu-items in the menubar is animated, which looks quite nice... It could also be done for menu-items...
Performance of animation can possibly be improved in Firefox and Webkit using "requestAnimationFrame": http://paulirish.com/2011/requestanimationframe-for-smart-animating/
I did some basic refactorings in CVS HEAD: - There is now one VisibilityAnimatinMixin.js that handles all cases of appear or disappear animations (menu, tooltip, etc). It's an improved version of the FadeAnimationMixin.js. In theory all widgets that support appear/disappear animations support the same ones. (Not all combinations tested). - Its possible to have multiple animationRenderer attached to the same widget, which was a mojor blocker for many animations. - Several minor changes in AnimationRender.js.
Added support for flyIn animations on shell. Not yet document or used in default theme, so the name could still be changed. This looks pretty good: Shell[APPLICATION_MODAL] { animation: flyInTop 200ms ease-out; }
Created attachment 212293 [details] "proper" height animation in IE (test) There will be an issue when animating width or height of certain widgets in IE. Right now we are animating the height in IE in the case of the slideIn/slideOut animations. In IE (and older browser using SVG) the border isn't animated with the height. In other browser it appears that the widget is growing vertically, while in IE it appears as if its gradually revealed. This works for appear/disappear animations, but when animating height changes (e.g. for shells, composites), it might appear broken. With this patch i fixed this by re-layuting the border while rendering each frame, but this leads to very sloppy, almost broken looking animations. Its not an option. (The patch is NOT in CVS, its only here to document the issue.) So if we support width/height animations, we should only support widgets that can't have rounded border/gradient/shadows or look okay with this quirk (ExpandBar, PrograssBar might work). Other widgets could be supported, but in CSS3-enabled browser only.
Added fly-out support for shell, also curretnly undocumented and unused, so it can still be renamed. Note that having the shell-overlay fade and the flyin/out at the same time is too much to handle for old IE. It should be changed so that animations are played in sequence, not at the same time.
Okay, flyIn and flyOut are now played before the ClientDocumentBlocker animation in IE7/8, and simultaniously in other browser. Changes in CVS HEAD.
Enabled the VisibilityAnimationMixin for Composite in CVS HEAD. In contrast to Shell, i also documented the slideIn/Out and fadeIn/Out animation, even though they may not always look really good in IE7/8, depending on the widgets and their theming in the composite. The rationale behind this is that the porpose of having composite support animations is to be able to animate any (single) widget by putting it within a composite. So while some widgets may no look 100% right, is works well for many (but not shell), and those should not be excluded. We could make a note about this in the theming documentation. (Also, Menu also supports both and can have the same problem depending on the theming.)
