UIButton sublass for loading and transition animation.

Overview

TransitionButton

CI Status Version License Platform Carthage compatible

Concept

Source: Dribbble

Preview

  • Expand animation:

  • Shake animation:

Example

To run the example project, clone the repo, then open the workspace TransitionButton.xcworkspace run using iOS Example scheme.

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

To integrate TransitionButton into your Xcode project using CocoaPods, specify it in your Podfile:

use_frameworks!

pod 'TransitionButton'

Then, run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate TransitionButton into your Xcode project using Carthage, specify it in your Cartfile:

github "aladinway/TransitionButton"

Run carthage update to build the framework and on your application targets’ “General” settings tab, in the “Embedded Binaries” section, drag and drop the built TransitionButton.framework from the Carthage/Build folder on disk.

Usage

TransitionButton is a subclass of UIButton. In addition to all what UIButton provides. TransitionButton has two main methods :

  • startAnimation() : start animating the button with a loading spinner, it should be called just before starting a task, exemple: before a network call to check the login information.

  • stopAnimation(animationStyle: StopAnimationStyle, revertAfterDelay delay: TimeInterval, completion: (() -> Void)?) : stop animating the button.

    • animationStyle: the style of the stop animation.
    • revertAfterDelay: revert the button to the original state after a delay to give opportunity to custom transition.
    • completion: a completion block to be called once the animation finished, it may be useful to transit to another view controller, example transit to the home screen from the login screen.

For the stop Animation paramteter StopAnimationStyle there is three styles :

  • StopAnimationStyle.normal: just revert the button to the original state.
  • StopAnimationStyle.expand: expand the button and cover all the screen, useful to do transit animation.
  • StopAnimationStyle.shake: revert the button to original state and make a shaoe animation, useful to reflect that something went wrong

Example

Void in // 4: Stop the animation, here you have three options for the `animationStyle` property: // .expand: useful when the task has been compeletd successfully and you want to expand the button and transit to another view controller in the completion callback // .shake: when you want to reflect to the user that the task did not complete successfly // .normal button.stopAnimation(animationStyle: .expand, completion: { let secondVC = UIViewController() self.present(secondVC, animated: true, completion: nil) }) }) }) } } ">
import TransitionButton  // 1: First import the TransitionButton library
import UIKit

class FirstViewController: UIViewController {
    
    let button = TransitionButton(frame: CGRect(x: 100, y: 100, width: 100, height: 40)) // please use Autolayout in real project
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.addSubview(button)
        
        button.backgroundColor = .red
        button.setTitle("button", for: .normal)
        button.cornerRadius = 20
        button.spinnerColor = .white
        button.addTarget(self, action: #selector(buttonAction(_:)), for: .touchUpInside)
    }
    
    @IBAction func buttonAction(_ button: TransitionButton) {
        button.startAnimation() // 2: Then start the animation when the user tap the button
        let qualityOfServiceClass = DispatchQoS.QoSClass.background
        let backgroundQueue = DispatchQueue.global(qos: qualityOfServiceClass)
        backgroundQueue.async(execute: {
            
            sleep(3) // 3: Do your networking task or background work here.
            
            DispatchQueue.main.async(execute: { () -> Void in
                // 4: Stop the animation, here you have three options for the `animationStyle` property:
                // .expand: useful when the task has been compeletd successfully and you want to expand the button and transit to another view controller in the completion callback
                // .shake: when you want to reflect to the user that the task did not complete successfly
                // .normal
                button.stopAnimation(animationStyle: .expand, completion: {
                    let secondVC = UIViewController()
                    self.present(secondVC, animated: true, completion: nil)
                })
            })
        })
    }
}

When using the expand animation it's important that you use a custom fade animation to move from the frist view controller to the second view controller to override the native slide animation. You can use the call CustomTransitionViewController it's a subclass of UIViewController which provides a built-in fade transition animation, here is how your second view contoller should looks like :

import TransitionButton

class SecondViewController: CustomTransitionViewController {

}

And you are done.

Author

Alaeddine M. [email protected]

License

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

Comments
  • Issues with tabBarController

    Issues with tabBarController

    So I am trying to accomplish this but the setup of my app is a tabBarController which contains the main controllers not just a simple UIViewController. How would I make that work in that case

    opened by Smiller193 6
  • Failed to render and update auto layout status for ViewController

    Failed to render and update auto layout status for ViewController

    Hello guys, Did either of you get this kind of error while using the TransitionButton? The project compiles normally, but this error persists when you open the storyboard.

    captura de tela 2018-06-09 as 15 37 33

    opened by thomasmbr 5
  • The button doesn't fill the full screen size

    The button doesn't fill the full screen size

    You can see at the image the size of the button once it finished it's stop animation.

    2018-04-02 15 45 56

    Here it's original layout: 2018-04-02 15 47 55

    Is it me doing something wrong, or is it the problem with the library?

    opened by volkoivan 5
  • Fixes for Swift Package Manager #47

    Fixes for Swift Package Manager #47

    see issue https://github.com/AladinWay/TransitionButton/issues/47 and comment this comment : https://github.com/AladinWay/TransitionButton/issues/47#issuecomment-730203695

    opened by kenji21 4
  • Navigation Controller transition

    Navigation Controller transition

    Hello, the transition animation not working well with Navigation controller .. tried to present it like this but not working:

                              let storyboard = UIStoryboard(name: "Main", bundle: nil)
     let navController = storyboard.instantiateViewController(withIdentifier: "FinalBuy") 
     as!FinalBuyViewController
                                self.present(navController, animated: true, completion: nil)
    

    the effect is now working but the navigation bar is not showing .. any solutions guys ?

    opened by ghost 4
  • Auto Layout messes up spinner alignment?

    Auto Layout messes up spinner alignment?

    Loving the library! Only thing is, when using Auto Layout constraints, it appears as though the spinner completely miss-aligns like so: https://i.imgur.com/K0o9vYi.png

    Heres my constraints on the button in Interface Builder:

    https://i.imgur.com/JqJK8P4.png

    opened by jh97uk 4
  • Spinner not showing

    Spinner not showing

    When creating Button object I have given the frame .zero after that I am adding constraints programatically, In that case spinner is not showing. If I create Button with some frame then Spinner is visible but as per frame given not as per updated constraints

    opened by Shekhar175 4
  • cornerRadius ignored coming back to the original state

    cornerRadius ignored coming back to the original state

    cornerRadius property is not restored to user custom value when coming back to the original state (ie. stopping animation with shake).

    I've fixed it by adding self.layer.cornerRadius = self.cornerRadius to the last line of setOriginalState() func.

    private func setOriginalState() {
            self.animateToOriginalWidth()
            self.spiner.stopAnimation()
            self.setTitle(self.cachedTitle, for: .normal)
            self.setImage(self.cachedImage, for: .normal)
            self.isUserInteractionEnabled = true // enable again the user interaction
    	self.layer.cornerRadius = self.cornerRadius
    }
    

    Hope you will add it to the main branch asap. Have a nice day and thank you for your work.

    bug 
    opened by malcommac 4
  • Fix bug where spinner isn't updated when button's frame is updated

    Fix bug where spinner isn't updated when button's frame is updated

    I found this bug when trying to create a TransitionButton with one rect, then added it to a stackView. The stackView updated the frame of the button, but the spinner's frame wasn't updated, causing it to become un-centered

    opened by j55blanchet 3
  • TransitionButton Crash when using with XIB

    TransitionButton Crash when using with XIB

    Hello,

    First congratulations for the excellent library you created.

    I'm having a problem and would like help, I'm using the TransitionButton on an XIB, and the app is crashing with the error below:

    Basically I am adding a UIButton and changing its parent class to TransitionButton, I define my @IBOutlet with the type TransitionButton and when I try to access the button.spinnerColor or button.startAnimating () the app crashes with the error:

    2017-09-22 11: 12: 18,978 Reserve [99333: 22192085] Unknown class _TtC7Reserve16TransitionButton in Interface Builder file.

    Any idea?

    Thanks a lot

    invalid 
    opened by maclacerda 3
  • demo app crashes

    demo app crashes

    1. run the project
    2. tap on the first button
    3. tap on the <- button

    the app crashes on line: let toView = transitionContext.view(forKey: .to)! Fatal error: Unexpectedly found nil while unwrapping an Optional

    opened by GINNOV 2
  • Fillet cannot be restored to its original state

    Fillet cannot be restored to its original state

    Hi AladinWay: When I used it, I found that the rounded corners could not be restored to the original state.According to https://github.com/AladinWay/TransitionButton/issues/52, I modified self.layer.cornerRadius = layer.cornerRadius undersetOriginalState, he changed it, and I hope it can be resolved in the next version.Thank you

    opened by chenjc0317 1
  • Crash on iOS 9

    Crash on iOS 9

    init(frame: CGRect) {
        super.init() 
    
        self.setToFrame(frame) // this line
        
        self.fillColor = nil
        self.strokeColor = spinnerColor.cgColor
        self.lineWidth = 1
        
        self.strokeEnd = 0.4
        self.isHidden = true
     }
    
    opened by IvanGzx 0
  • Bitcode Processing Failed

    Bitcode Processing Failed

    While processing your iOS app, errors occurred in the app thinning process, and your app couldn’t be thinned. If your app contains bitcode, bitcode processing may have failed. Because of these errors, this build of your app will not be able to be submitted for review or placed on the App Store.

    opened by ghost 0
  • Added Spiner animation types feature

    Added Spiner animation types feature

    I have added spinner animation types.

    Following types are here:

    - DefaultSpinner:      LineSpinFadeLoader animation.
    - BallRotate:             BallRotate animation.
    - BallPulse:               BallPulse animation.
    - AudioEqualizer:     AudioEqualizer animation.
    - BallClipRotate:       BallClipRotate animation.
    - BallScale:               BallScale animation.
    
    opened by Rahul-Mayani 0
Owner
null
UIButton-based view with fade in/out animation features

JTFadingInfoView Overview JTFadingInfoView is google's material design like notification view with smooth fade in/out animation features, based on UIB

Junichi Tsurukawa 129 Mar 19, 2022
A Custom UIButton with Centralised Styling and common styles available in Interface Builder

DesignableButton DesignableButton is a UIButton subclass that uses a centralised and reusable styling. In InterfaceBuilder, drag and drop a Designable

Idle Hands Apps 93 Aug 14, 2022
Multiple state tap-to-toggle UIButton (like old camera flash button)

Multiple State Toggle UIButton A UIButton subclass that implements tap-to-toggle button text. (Like the camera flash and timer buttons) Usage Just cre

Yonat Sharon 83 Oct 11, 2022
🔥 PMSuperButton is a powerful UIButton coming from the countryside, but with super powers! 😎

PMSuperButton is a powerful UIButton coming from the countryside, but with super powers! ?? An easy way to create custom and complex buttons with cust

Paolo Musolino 720 Nov 17, 2022
Custom UIButton effect inspired by Google Material Design

ZFRippleButton iOS Custom UIButton effect inspired by Google Material Design written in Swift Usage Set the UIButton class in Nib to ZFRippleButton or

Amornchai Kanokpullwad 1.4k Dec 1, 2022
A fully customisable swift subclass on UIButton which allows you to create beautiful buttons without writing any line of code.

JSButton Demo $ pod try JSButton ...or clone this repo and build and run/test the JSButton project in Xcode to see JSButton in action. If you don't ha

Jogendra 12 May 9, 2022
Full-featured IBDesignable UIButton class

SpicyButton Full-featured IBDesignable UIButton class Installation Add the following to your project's Podfile: pod 'SpicyButton' Usage You can easily

Luke Crum 2 Sep 6, 2022
Customizable download button with progress and transition animations. It is based on Apple's App Store download button.

AHDownloadButton is a customizable download button similar to the download button in the latest version of Apple's App Store app (since iOS 11). It fe

Amer Hukić 465 Dec 24, 2022
Custom loading button with progress swiftui

CustomLoadingButton Simple Custom Loading Progress Button for SwiftUI Version 1.0.0 This version requires Xcode 11+ SwiftUI iOS 13+ macOS 10.15+ Insta

Tariqul 1 Dec 14, 2022
IGStoryButtonKit provides an easy-to-use button with rich animation and multiple way inspired by instagram story/stories.

Introduction Have you ever seen UI like instagram story, haven't you? Actually, features like instagram story have been implemented in many applicatio

mutation 34 Nov 8, 2022
LTHRadioButton - A radio button with a pretty animation

LTHRadioButton Slightly inspired by Google's material radio button. The clip below has 3 sections: full speed, 25% and 10%, but after converting it to

Roland Leth 368 Dec 16, 2022
Customizable and easy to use expandable button in Swift.

ExpandableButton Requirements iOS 9.0+ Installation CocoaPods: Add the following line to your Podfile: pod 'ExpandableButton' #for swift less than 4.

Dmytro Mishchenko 98 Dec 5, 2022
Simple and customizable button in Swift

SwiftyButton Maintainer(s): @nickm01 @pmacro @aryamansharda Simple and customizable button in Swift. Installation Cocoapods pod 'SwiftyButton' Cartha

Scoop 542 Dec 13, 2022
Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation.

AnimatablePlayButton Animated Play and Pause Button written in Swift, using CALayer, CAKeyframeAnimation. features Only using CAShapeLayer, CAKeyframe

keishi suzuki 77 Jun 10, 2021
Interactive and fully animated Material Design button for iOS developers.

WYMaterialButton Inspired by Google Material Design, written purely in Swift 3. WYMaterialButton implemented Material Design on iOS and add more dynam

Yu Wang 76 Oct 7, 2022
TTopImageBottomLabelButton is a simple and flexible UI component fully written in Swift

TTopImageBottomLabelButton is a simple and flexible UI component fully written in Swift. TTopImageBottomLabelButton is developed to help programmers create a button with top image and bottom title quickly without having to write many lines of codes.

Nguyen Duc Thinh 2 Aug 18, 2022
A small and flexible (well documented) UIButton subclass with animated loading progress, and completion animation.

ButtonProgressBar-iOS Example For LIVE PREVIEW on Appetize in your browser itself, click here. To run the example project, clone the repo, and run pod

Pushkar Sharma 566 Dec 9, 2022
Appstore card animation transition. UICollectionView and UITableView card expand animated transition

Appstore card animation transition. UICollectionView and UITableView card expand animated transition. This library tries to add the appstore transition to your own app. The goal is to be as simple as possible to integrate in an app while keeping the flexibility and customization alive.

appssemble 544 Dec 28, 2022
UIButton-based view with fade in/out animation features

JTFadingInfoView Overview JTFadingInfoView is google's material design like notification view with smooth fade in/out animation features, based on UIB

Junichi Tsurukawa 129 Mar 19, 2022