How to replace one UI element by another with custom animation?

Question

I want to implement nested commentaries(like stickers) in my own document viewer. At first, it should be UITextView, but when resignFirstResponder executes, it should become just a small button. The main question is: how to animate this? I've read Quartz 2d programming guide from Apple, but it didn't gave me any ideas. I don't asking for exact or ready solution: keywords, links to articles or documentation are enough. Thanks for future responses.

The thing is that I wanna try making such an animations by hands. — folex, Jun 28 '12 at 13:48
what is wrong with cross-fading by e.g. animating the changes of the alpha value of a control (UIView)? — Till, Jun 28 '12 at 13:53
Yep, I've read about cross-fading. But I want something less static. E.g. like when deleting photo from album. — folex, Jun 28 '12 at 14:04

score 1 · Accepted Answer · answered Jun 28 '12 at 14:14

1

You could use this method

[UIView animateWithDuration: delay: options: animations: completion:];

So if you wanted to fade in a button and fade out the textfield it would be

//Starting properties
myButton.alpha = 0;
myTextField.alpha = 1;

//Do the animation
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationCurveEaseInOut animations:^{
    myButton.alpha = 1;
    myTextField.alpha = 0;   
} completion:^(BOOL finished) {
    if (finished) {
        NSLog(@"finished animating");
    }
}];

This will change the opacity of the 2 objects from 0 - 1 / 1 - 0 over 300ms

You can animate many properties this way like size, position, opacity etc.

answered Jun 28 '12 at 14:14

Thanks, but I know how to do such a simple animation. I don't know how to create custom one. – folex Jun 28 '12 at 14:21
@folex please describe in some more words what you call a custom animation. – Till Jun 28 '12 at 14:22
I mean handmade animation. E.g. when you specifying every transformation or something like that. I can't describe it more formally, because if I could I would just google it :) Maybe there is no way to do so? Anyway, I'll try to figure it out after reading Core Animation programming guide. – folex Jun 28 '12 at 14:32
1

@folex you should really check that guide first as pretty much all standard transformations are animate able using Core animation. When things get more involved, you may end up having to use pre rendered frame-animations (e.g. using UIImageView's animate feature). – Till Jun 28 '12 at 14:34

score 0 · Answer 2 · answered Jun 28 '12 at 14:00

You could do it the same way that Apple fades between two different elements in QuickLook. You can see the effect yourself in slow-motion by pressing shift+space with an item selected in Finder.

The animation basically is a cross-fade at the same time that the frame changes. You should probably render both the button and the text view into images and do the animation with two image views (that only exist during the animation) to be able to stretch the images as the aspect ratio changes when the frames change.

You will need Core Animation to render the views into images but the rest of the images are only frame and alpha/opacity animations so you should be able to do them with UIView animations (if Core Animation seems to complicated for you). Though Core Animation will give you some more fine grained control when it comes to tweaking the animation.

How to replace one UI element by another with custom animation?

2 Answers2