Overview

Note:GIF QUALITY MAKES THE SHIMMER LESS SMOOTH (run the code for best display)

A call-to-action button that offers shimmer, movement, and off/on functionality. Great for getting a users attention in multiple ways!

Requirements

• Works on any iOS device

Example

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

Getting Started

Installation

Simple Usage

Basic

To add a BAShimmerButton to your app, add the line:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addCircularMask:button];
[button showButtonWithAnimation:@YES];//@NO skips the animation

Note: circular mask added beforehand Note: You can skip the first line, if you added the button in IB

This creates the following animation/button:

Advanced Usage

Listed below are examples of several properties that you can control.

Init

You can use initWithFrame: or simply adding the view in Interface Builder to use this button.

showButtonWithAnimation:(bool)animated

Calling this method shows the button, by passing in @NO, you will simply show the button. If you pass @YES, you'll see the following animation (same code in the basic section):

hideButtonWithAnimation:(bool)animated

Similar to the one above, but the reverse:

toggleButton

This will transiton the button from the on to off state, or vice versa. The IB action can be done like the example below:

- (IBAction)buttonPressed:(id)sender {
    BAShimmerButton *button = (BAShimmerButton*)sender;
    [button toggleButton];
}

You can then produce the following:

wiggleButton

To draw attention to your button, try this method:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addCircularMask:button];
[button showButtonWithAnimation:@NO];
[button wiggleButton];

which results in the following:

Icon Image

An icon image can be set for the button with the iconImage property. This also results in a mask of the image for the off state (color of your choosing).

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addCircularMask:button];
button.backgroundColor = [UIColor colorWithHex:0x420013];
button.shimmerColor = [UIColor colorWithHex:0xe33550];
button.iconImage = [UIImage imageNamed:@"icon"];
[button showButtonWithAnimation:@NO];//@NO skips the animation

This creates this button:

IconOff ImageColor

For the off state of the icon above, you can set different off colors:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.gradientSize = 0.3f;
button.backgroundColor = [UIColor colorWithHex:0x420013];
button.shimmerColor = [UIColor colorWithHex:0xe33550];
button.iconOffImageColor = [UIColor colorWithHex:0xfffffff];
button.iconImage = [UIImage imageNamed:@"icon"];
[button showButtonWithAnimation:@NO];

Note: Set before you set iconImage This creates the following view:

Shimmer Duration

If you want the shimmering to last longer/shorter, you can edit the shimmerDuration property:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.shimmerDuration = 1.0f;
[button showButtonWithAnimation:@NO];

This results in the following:

Shimmer Color

You can also change the overall color of the shimmer by editing the shimmerColor property:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
[self addRoundedSquareMask:button];
button.backgroundColor = [UIColor colorWithHex:0x22313F];
button.shimmerColor = [UIColor colorWithHex:0x3498db];
[button showButtonWithAnimation:@NO];

This creates the following effect:

Shimmer Direction

By default, the animation goes from left to right in a diagonal direction. You can change the direction by setting the shimmerDirection property with any of the following:

• BAShimmerDirectionTopToBottom
• BAShimmerDirectionBottomToTop
• BAShimmerDirectionLeftToRight
• BAShimmerDirectionDiagonalLeftToRight
• BAShimmerDirectionRightToLeft
• BAShimmerDirectionDiagonalRightToLeft

Setting a new direction can be done like so:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.shimmerDuration = BAShimmerDirectionTopToBottom;
[button showButtonWithAnimation:@NO];

This creates the following view:

Gradient Size

the gradient size can be adjust with the gradientSize property. This value is betwee 0 and 1 and determines how wide the entire shimmer should be:

BAShimmerButton *button = [[BAShimmerButton alloc] initWithFrame:self.view.frame];
button.gradientSize = 0.3f;
[button showButtonWithAnimation:@NO];

This creates the following button:

Author

Bryan Antigua, [email protected] - bryanantigua.com

License

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