Search code examples
iosiphoneuser-interfaceuikit-dynamics

Rubber like bouncy button with UIKit dynamics


I would like to create a rubber-like button in my iOS app: when the user taps the button it would shrink its frame and when the user releases the tap it would grow, expand a bit and then turn back to its original size with a bouncing effect just like if it was made from rubber. I saw this kind of button in some other apps and I am pretty sure that they used iOS 7 UIKit dynamics to implement this effect. I checked out the different behaviours of UIKit dynamics but none of them seems to be useful as none of them changes the size of the frame. I was wondering if there any hint out there on how to implement this behaviour?


Solution

  • This is probably not UIKitDynamics but just an animation.

    UIKitDynamics is used for moving things around the screen and applying physics to collisions etc...

    What you could use is the new animation method...

    - (void)animateWithDuration:(NSTimeInterval)duration
                          delay:(NSTimeInterval)delay
         usingSpringWithDamping:(CGFloat)dampingRatio
          initialSpringVelocity:(CGFloat)velocity
                        options:(UIViewAnimationOptions)options
                     animations:(void (^)(void))animations
                     completion:(void (^)(BOOL finished))completion;
    

    This will animate a change but apply a spring like effect to the animation curve.

    If you change the frame of the button inside the animations block it will "spring" the new frame and look rubbery.

    You can read more about it here... http://www.oliverfoggin.com/animate-with-springs/