CODEWITHSUNDEEP
objective-cioscore-animation
andreineamtu
andreineamtu

Reputation: 41

How to create an "Add to reading list" animation effect

I'm trying to make an animation effect similar to the one on Safari(iPhone) when you add an element to the reading list. It's similar to the one that appears when starting to download an item from App Store application: the application item drops to the dock to start downloading. First it bounces up and then goes to the dock. It's a very nice effect that Apple uses on their OS.

I have an image view on screen that I want to drop with this kind of animation to my toolbar in my application.

If there is someone who did it or know what's the name of the effect, could please tell me how to do it.

Thank you.

Upvotes: 1

Views: 584

Answers (1)

David Rönnqvist
David Rönnqvist

Reputation: 56625

"Add to reading list" shows no animation on my phone but of your description it sounds like the "Open in background"-animation in Safari (iPhone). My answer describes that animation.

I wrote a thing like that a few months ago and much of it is doable while some of it is not. Your questions showed me that more people are to know how it is done so I wrote a blog post about it. I will describe the high level approach and challenges here but you can read more about it in that post.

Getting to content to animate

If you choose to animate the view that is on screen down to the (in your case) tool bar then you will only have to access its layer. If you want the original view to remain and animate a visual copy (like the "open in background"-Safari animation) down to the bar item then you should create a new layer and draw the content of your layer into an image and set that image as the content of the layer that you are animating

Calculating the end position

The start position of the animation is simply the frame of the view. The end position is very tricky since bar items (both tool bar items and tab bar items) are not UIView subclasses and doesn't have a public view property. This causes problems when you want to shake the bar item later on.

I decided to make a visual approximation of the end position using some simple heuristics. If you know before hand that you will only animate to a single bar item then the end position can be hard coded to a suitable frame.

Animating along a path

There is nothing special to moving, scaling and rotating the layer from the start to the end position. If you want to read more about how I did it you can look at the post I wrote.

Shaking the bar item

This cannot be done without a lot of custom code or using private API at the moment. Since bar items doesn't have a view or a layer there is no accessible layer for you to animate. I guess that you could have a custom animating image that does the shake and set that during the animation and set the new image afterwards. The approach of drawing into an image and animating that doesn't work that well either since there is no accessible layer who can draw its content into the image (you want this for the special effect of the tool bar item and tab bar item).

...put all this together and tweak it to your special needs and you will have an animation that resembles the animation you are looking for.

Upvotes: 1

Related Questions