TBIconTransitionKit is an easy to use icon transition kit that allows to smoothly change from one shape to another. Build on UIButton with CAShapeLayers It includes a set of the most common navigation icons. Feel free to recolor the them as you like and customise shapes — adjust the line spacing, edit the line width and it's cap.

Animation on dribbble.com

Both ways animated transitions:

• Menu ↔ Arrow
• Menu ↔ Cross
• Cross ↔ Plus
• Plus ↔ Minus

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Just add TBAnimationButton to you UIView with IB or code. You can use it with autolayout.

#import <TBIconTransitionKit/TBAnimationButton.h>

@interface TBViewController ()

@property (weak, nonatomic) IBOutlet TBAnimationButton *button;

@end

@implementation TBViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.button.currentState = TBAnimationButtonStateMenu;
}

- (IBAction)onButton:(TBAnimationButton *)sender
{
  if (sender.currentState == TBAnimationButtonStateMenu) {
    [sender animationTransformToState:TBAnimationButtonStateArrow];
  } else if (sender.currentState == TBAnimationButtonStateArrow) {
    [sender animationTransformToState:TBAnimationButtonStateMenu];
  }
}

Customize the design

• lineHeight
• lineWidth
• lineSpacing
• lineColor
• lineCap

After the change of one of this properties you have to call updateAppearance to update the view.

Requirements

• iOS 7 or higher
• Automatic Reference Counting (ARC)

Installation

TBIconTransitionKit is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "TBIconTransitionKit"

Author

• AlexeyBelezeko
• Oleg Turbaba

License

TBIconTransitionKit is available under the MIT license. See the LICENSE file for more info.