Animation for better UI in Mac OS Yosemite

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.

Any clues?
I know this can prove to be difficult…

I think it’s an OS X animation which can either be addressed by NSViewAnimation or, lower-level, by CAAnimation.

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.

I’m glad to hear that. Subtle and well-placed animations like this opens a whole new world in desktop software.

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]

Example Project

[quote=171424:@jim mckay]Using the animator proxy of NSViews is a very simple way to get very smooth animations.

<…>
Example Project[/quote]

Cool! Thanks a lot! Great that you thought of making an example project. For me this is the quickest way to learn.

Thanks, this is wonderful!
and you can make funny things with it - coffee or beer

Funny coincidence! I just finished the first steps of CAAnimations. In this case on a CALayer, therefore only the background is moved:

https://dl.dropboxusercontent.com/u/21200221/Xojo/CAAnimation.mov

Core Animation is the way, I’ll be doing more tutorials as time goes by.

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!

I don’t know about these animations. Isn’t this either

  1. make it so subtle that 90% of user don’t care or don’t see it
  2. or make so so annoying that 90% of users will hate you?

For instance, I always tone the animations down on Windows, Mac and iOS.

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. I’m 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? :wink:
Thanks a lot for all of them, from all authors – I must say XDev is really a great ressource and inspiration.

These are very good examples, thank you jim mckay for Sharing !

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.

And what a wide field that is!: Redirecting... · objc.io

Thanks @jim mckay for sharing!

Today I’m starting with “Core Animation for Mac OS X…” So far, so good

link text

I find it fascinating so many of us are working on the same thing at the same time again …

Hope to get this open source soon:
https://dl.dropboxusercontent.com/u/21200221/Xojo/CoreAnimatePosition.mov

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?