Search code examples
cocoaanimationnstoolbarnstoolbaritem

how to implement the NSToolbarItem Animation like evernote

I want to implement an animation which is like the sync animation of evernote app on Max OS X.

The button looks like: enter image description here

When the animation runs, only is the white arrow rotating.

I tried to use Core Animation, and the steps are following:

1 I dragged a NSButton to the tool bar and set it to an outlet aBtn. I set the blue blackground image to the aBtn.

2 I created a CALayer instance variable aLayer and add it to the aBtn. So it can look like the button above.

3 when aBtn was clicked, I add the rotation animation the aLayer. It run perfectly well.

The problem is when I want to customize the tool bar, the aBtn shown in the tool bar palette didn't have the aLayer and only had the blue background image.

Then I tried to find the event or notification for the showing or closing of the tool bar palette. As a result I can reset the image of the aBtn before the tool bar palette was shown or hidden.However, I couldn't be notified when the tool bar palette was closed.

Could any one give any suggestion?

If you have good idea about how to implement this animation, please let me know.

Thanks!

Solution

  • I create a gif to store the animation, and create an NSImageView for the gif. Then I use -[NSToolBarItem setView:].

    Using gif is an easier way than implementing it with Core Animation.