I’m working on developing better user interfaces targeting Yosemite.
I’ve found a lot of interesting things experimenting with vibrancy, transparency, animations, custom controls, containers…
One that proves elusive to me is the one Apple uses in Mouse System Preferences (see screenshot)
It is a smooth animation triggered when you rollover the left menu of options.
I’ve managed to write a HTML5/CSS3 and put it on a canvas, but it is not the same.
While it doesn’t directly answer your question, we’ve got an article by Sam Rowlands in the next issue of xDev Magazine (coming out next week) that deals with animating controls. He demonstrates animating tabpanels with Core Animation, but the principle can be used for other controls and might do what you need.
Using the animator proxy of NSViews is a very simple way to get very smooth animations.
Here’s a function that will move controlToMove to the same frame as targetControl (with animation). I understand that the same technique can be used to change other properties of views and windows, but haven’t experimented much within Xojo.
[code]Sub moveToFrameOf(extends controlToMove as rectcontrol, targetControl as RectControl)
declare function animator lib “Cocoa” selector “animator” (obj as ptr) as ptr
declare function frame lib “Cocoa” selector “frame” (obj as ptr) as NSRect
declare sub setFrame lib “Cocoa” selector “setFrame:” (obj as ptr, frame as NSRect)
setFrame(animator(ptr(controlToMove.Handle)),frame(ptr(targetControl.Handle)))
End Sub
[/code]
If you’re interested in adopting Core Animation in your Xojo apps, I highly (of course I would) recommend that you get the forthcoming copy of xDev magazine. I’ll show you how to get the same animations as I used in App Wrapper 3 and in our forth coming applications.
CALayers are also a great way of providing animation and I’ll be covering those in a future edition too. There are some gotchyas and limitations with CALayers, which cause some interesting design decisions!
Animation is one of those things, if done right the user will notice that it’s cool and it will improve the perceived quality of your application.
Get it wrong, and it’s very easy to get wrong and it’ll go the other way, making your application look cheap, nasty and not well coded. If the animation is too long, it’s frustrating. If it’s jerky or has bad transitions, the animation will have a negative effect on your application.
Looking very much towards them. Im still doing my first steps with layer handling and there are really some quite tricky things I have the CIFilters running now and can assign a lot of attributes but I cannot make the Blendfilters work. Wasn’t it you too who was working on a CIFilter article for XDev?
Thanks a lot for all of them, from all authors I must say XDev is really a great ressource and inspiration.
Well, I disagree.
I am thinking about subtle animations, like the way native controls behave.
Maybe users don’t see/care about the smooth transitions when radio buttons or checkboxes are selected, but I believe they definitely perceive a high quality interface.
[quote=171620:@Paulo Vargas]These are very good examples, thank you jim mckay for Sharing !
[/quote]
No problem, these sort of things are fun to play with. I’ve added Window resizing and RectControl FadeIn/FadeOut to the example. I also added an example of checking whether properties are animatable (eg frameOrigin, bounds, alphaValue etc)
I do agree though that if you’re looking for anything more that a simple point to point animation, you’ll need to dig into CoreAnimation. The default animator is really only intended for the most basic UI animations.
I’m using overlayWindowMBS to do a fade transition when user switches from one presentation of a window to another one.
The idea is, that the Window fades out, rearranges to new size, position and contents and then fades in again with the new settings.
This worked very well until Yosemite. The vibrancy thing has killed that effect and OverlayWindowMBS is not working nicely there.
Is there a way to this with Core Animation? Is Jim’s last example working only for rectangle controls? Someone has an idea?
