How to mimic Keyboard animation on iOS 7 to add "Done" button to numeric keyboard?

Question

I had been doing something like this to mimic the keyboard animation on older version of iOS.

CGRect keyboardBeginFrame;
[[note.userInfo objectForKey:UIKeyboardFrameBeginUserInfoKey] getValue:&keyboardBeginFrame];
self.doneKeyboardButton.frame = CGRectMake(0, (keyboardBeginFrame.origin.y + keyboardBeginFrame.size.height) - 53, 106, 53);
[[[[UIApplication sharedApplication] windows] lastObject] addSubview:self.doneKeyboardButton];

CGPoint newCenter = CGPointMake(self.doneKeyboardButton.superview.frame.origin.x + self.doneKeyboardButton.frame.size.width/2,
                                self.doneKeyboardButton.superview.frame.size.height - self.doneKeyboardButton.frame.size.height/2);

[UIView animateWithDuration:[[note.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] floatValue]-.02
                      delay:.0
                    options:[[note.userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue]
                 animations:^{
                     self.contentView.frame = CGRectOffset(self.contentView.frame, 0, -TextFieldViewMovement);
                     self.doneKeyboardButton.center = newCenter;
                 }
                 completion:nil];

However, this has stopped working on iOS7. It seems like the values returned are no longer exactly correct, and the Done button no longer exactly mimics the Keyboard display animation.

Gambrell

I tried the approach as you aselect the answer. But I do not know how you are setting the frame. – Marissamarist

Esspecially self.contentview.frame. – Marissamarist

Answer 1

In iOS 7, the keyboard uses a new, undocumented animation curve. While some have noted that using an undocumented value for the animation option works, I prefer to use the following:

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:[notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue]];
[UIView setAnimationCurve:[notification.userInfo[UIKeyboardAnimationCurveUserInfoKey] unsignedIntegerValue]];
[UIView setAnimationBeginsFromCurrentState:YES];

// work

[UIView commitAnimations];

While block based animations are the recommendation, the animation curve returned from the keyboard notification is an UIViewAnimationCurve, while the option you would need to pass to block based animations is an UIViewAnimationOptions. Using the traditional UIView animation methods allows you to pipe the value directly in. Most importantly, this will use the new undocumented animation curve (integer value of 7) and cause the animation to match the keyboard. And, it will work just as well on iOS 6 and 7.

Emilemile

Simple! Robust! Genius! This solution also lets me get rid my AACViewAnimationOptionsFromCurve function. – Tend

Just replaced all my keyboard animation blocks with this old style. Feels like a step back, but it works. Looking forward to going back to blocks once Apple realizes its mistake. – Middy

I am reading that you can simply shift the curve value by 16 to get the options value. options = curve << 16; But either way it is not working for me. – Hoofer

@Hoofer get the curve with UIViewAnimationCurve curve = [[info objectForKey:UIKeyboardAnimationCurveUserInfoKey] integerValue] and use block animation like this UIView animateWithDuration:duration delay:delay options:(curve << 16) animations: - hope that helps. – Porbeagle

Translating this to Swift is straightforward, except for the curve param which requires this bit of ugly: var curve:UIViewAnimationCurve = UIViewAnimationCurve(rawValue: info[UIKeyboardAnimationCurveUserInfoKey]!.integerValue)!. – Munn

To those who think this a step backwards: You could always wrap this in a method and make your method take (and execute) a block. Then your frequently repeated code is nice at least. – Imprimatur

Answer 2

I had the same issue and managed to get the animation working with the following parameters for iOS 7:

    [UIView animateWithDuration:0.5
                          delay:0
         usingSpringWithDamping:500.0f
          initialSpringVelocity:0.0f
                        options:UIViewAnimationOptionCurveLinear
                     animations:animBlock
                     completion:completionBlock];

EDIT: these values were obtained through debug, and can change with new iOS versions. @DavidBeck's answer works for me in iOS 7 also so I'm linking it here.

Gwen

I'm marking you as correct because my original solution is not very stable. – Gambrell

@DavidBeck's answer is better because it's simple, theoretically perfect, and stable (backward & forward-compatible), whereas the arguments used in this answer might not be exact, and even if they are perfect for iOS 7.0 (as @Sabobin commented), they might be off for other versions of iOS. For example, I'm pretty sure they're off for iOS < 7.0. – Tend

perfect, help me so much +1 – Faulk

Answer 3

Apple is using some undocumented animation with the value 7 in iOS 7.

However the declaration of UIViewAnimationCurve defines values for 0 to 3

typedef enum {
   UIViewAnimationCurveEaseInOut, // 0
   UIViewAnimationCurveEaseIn,
   UIViewAnimationCurveEaseOut,
   UIViewAnimationCurveLinear // 3
} UIViewAnimationCurve;

The UIViewAnimationOptions you need for block based animations is defined as

enum {
   // ...
   UIViewAnimationOptionCurveEaseInOut            = 0 << 16,
   UIViewAnimationOptionCurveEaseIn               = 1 << 16,
   UIViewAnimationOptionCurveEaseOut              = 2 << 16,
   UIViewAnimationOptionCurveLinear               = 3 << 16,

   UIViewAnimationOptionTransitionNone            = 0 << 20,
   // ...
};

It seems that Apple reserves 4 bits for the animaton curve (20 - 16 = 4) which allows values from 0 to 15 (so there are probably more undocumented values).

With this knowledge you can simply transform an UIViewAnimationCurve into UIViewAnimationOptions by shifting it about 16 bits. In your example this means:

options:[[note.userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] intValue] << 16

Repeated

I'm sure you mean 4 bits. :) – Chatterton

And still this approach hard codes an enum's value into your program's logic. Not good from my perspective, very non OO oriented. – Emotional

Answer 4

You can use animateWithDuration block and set curve inside it. It's clean and work well.

UIViewAnimationCurve curve = [[notification.userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] integerValue];
double duration = [[notification.userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];

[UIView animateWithDuration:duration
                    delay:0
                  options:UIViewAnimationOptionBeginFromCurrentState 
               animations:^{
                 [UIView setAnimationCurve:curve];
                 /* ANIMATION HERE */
                 // don't forget layoutIfNeeded if you use autolayout
               }
               completion:nil];

Happy coding!

UPDATE

You can use a simple UIViewController category written by me https://github.com/Just-/UIViewController-KeyboardAnimation

Isham

Answer 5

If you mean to add the button inside a toolbar (similarly as the mobile Safari does it), you can just use the property inputAccessoryView (both UITextField and UITextView have it) and save yourself all the trouble. This hidden gem is little known, I am glad that I stumbled upon it.

It works on both iOS 6 and iOS 7, I am using it in my app Routie.

Leprose

Not a bad idea, but this question was focused more on how to actually add an overlay button inside the unused button space in the number pad. – Gambrell

Ah, ok. I thought it was meant that the button will be above the keyboard. Where exactly it is supposed to be added? Lower left corner? I don't know, it seems very unusual. But maybe I could help out, because I am going to create the whole keyboard myself (I need . and - there), and put it on GitHub. – Leprose

Answer 6

This is working just fine for me... The duration is caught when the keyboard is shown. I know hardcoding the options means that it could break in the future, but it works for 7 and 8. That is good enough for us for now...

[UIView animateWithDuration:self.animationDuration
                      delay:0.0
                    options:UIViewAnimationOptionCurveEaseInOut
                 animations:^{
                     [self.view layoutIfNeeded]; completion:^(BOOL finished) {
                     if (finished)
                     {
                         if (completion)
                             completion();
                     }
                 }];

Boland

Actually, after thinking about this for about -3 seconds, I went with Anton's answer. – Boland

Answer 7

iOS 10+
Swift 5

A more modern alternative (iOS 10+ and Swift) is to use UIViewPropertyAnimator, which not only accepts UIView.AnimationCurve but is a more modern animator.

Most likely you'll be working with UIResponder.keyboardAnimationCurveUserInfoKey, which we are to treat as an NSNumber. The documentation for this key is (Apple's own notation, not mine):

public class let keyboardAnimationCurveUserInfoKey: String // NSNumber of NSUInteger (UIViewAnimationCurve)

Using this approach, we can eliminate any guesswork and just plug and play:

if let kbDuration = notification.userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? NSNumber,
    let kbTiming = notification.userInfo?[UIResponder.keyboardAnimationCurveUserInfoKey] as? NSNumber, // doc says to treat as NSNumber
    let timing = UIView.AnimationCurve.RawValue(exactly: kbTiming), // takes an NSNumber
    let curve = UIView.AnimationCurve(rawValue: timing) // takes a raw value {
    let duration = kbDuration.doubleValue
    let animator = UIViewPropertyAnimator(duration: duration, curve: curve) {
        // add animations
    }
    animator.startAnimation()
}

Deepseated