With CiaoTransitions you can make fancy custom push and modal transitions in your ios projects. You only need to follow some simple steps to implement it. Ciao is customizable and easy to use.

CiaoTransitions

Installation
Usage
Configuration
Transition Types
- Basic Transitions
- Special Transitions
Apps using CiaoTransitions
Author
Credits
Contributing
License

Installation

Ciao is available through CocoaPods. To install it, simply add the following line to your Podfile and run pod install:

pod 'CiaoTransitions'

Then you can import it when you need

import CiaoTransitions

Usage

In the example you will see some custom transitions that can be used in your project. Once you've installed, follow next steps. It's really simple:

1. Add CiaoTransition to your presented view controller

Add CiaoTransition to your presented view controller. This is neccessary to save your retain your transition for dismissed interaction. Also you could need it if have some scroll view. In this case, you should call didScroll method when the view is scrolled

class DetailViewController: CiaoBaseViewController, UIScrollViewDelegate {
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    var ciaoTransition: CiaoTransition?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        scrollView.delegate = self
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        ciaoTransition?.didScroll(scrollView)
    }
}

Important: If the view have some Scroll View, you must implement UIScrollViewDelegate protocol and call didScroll method when the view is scrolled. This is needed by CiaoTransition to manage interactive transitions.

2. Instace CiaoTransition with your values

Before presenting your view controller, you need to create an instance of CiaoTransition and add it to your presented view controller.

// How to instance a CiaoTransition object
let ciaoTransition = CiaoTransition(
		style: CiaoTransitionStyle, 
		configurator: CiaoConfigurator? = nil, 
		scaleConfigurator: CiaoScaleConfigurator? = nil, 
		appStoreConfigurator: CiaoAppStoreConfigurator? = nil)

CiaoConfigurator is used to setup your custom values for transition animation

CiaoScaleConfigurator is required to make scale style transitions

CiaoAppStoreConfigurator is required to make appStore style transitions

Example with Storyboard

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    guard let detailViewController = segue.destination as? DetailViewController else { return }
    let ciaoTransition = CiaoTransition(style: .vertical)
    detailViewController.ciaoTransition = ciaoTransition
    navigationController?.delegate = ciaoTransition
}

Example push with Xibs

func presentDetailView() {
	let ciaoTransition = CiaoTransition(style: .vertical)
	let detailViewController = DetailViewController()
	detailViewController.ciaoTransition = ciaoTransition
	navigationController?.delegate = ciaoTransition
	navigationController?.pushViewController(detailViewController, animated: true)
}

Example modal with Xibs

func presentDetailView() {
	let ciaoTransition = CiaoTransition(style: .vertical)
	let detailViewController = DetailViewController()
	detailViewController.ciaoTransition = ciaoTransition
	detailViewController.transitioningDelegate = ciaoTransition
	present(detailViewController, animated: true, completion: nil)
}

Example modal with Navigation Controller

func presentDetailView() {
let ciaoTransition = CiaoTransition(style: .vertical)
let detailViewController = DetailViewController()
detailViewController.ciaoTransition = ciaoTransition

let navigationController = UINavigationController(rootViewController: detailViewController)
navigationController.transitioningDelegate = ciaoTransition

present(navigationController, animated: true, completion: nil)
}

Configuration

CiaoConfigurator

Customize your transition creating an instance of CiaoConfigurator

/// Present animation duration
public var duration: TimeInterval = 0.8

/// This block is executed when the view has been presented
public var presentCompletion: (()->Void)? = nil

/// This block is executed when the view has been dismissed
public var dismissCompletion: (()->Void)? = nil

/// Enable or disable fade effect on main view controller
public var fadeOutEnabled = true

/// Enable or disable fade effect on presented view controller
public var fadeInEnabled = false

/// Enable or disable scale 3d effect on back main view controller
public var scale3D = true

/// Enable or disable lateral translation on main view controller
public var lateralTranslationEnabled = false

/// Enable or disable lateral swipe to dismiss view
public var dragLateralEnabled = false

/// Enable or disable vertical swipe to dismiss view
public var dragDownEnabled = true

Then, you can pass these configuration params through CiaoTransition instance:

let configurator = CiaoConfigurator()
let ciaoTransition = CiaoTransition(style: .vertical, configurator: configurator)

CiaoScaleConfigurator

Scale transition configurator is required to make scale transitions. For this, Ciao need some information about view you are going to scale. First create an instance of CiaoScaleConfigurator and setup your custom params.

/// Source image view is going to be scaled from your initial view controller
public var scaleSourceImageView: UIImageView?
    
/// Source image view frame converted to superview in view controller.
public var scaleSourceFrame: CGRect = .zero
    
/// This is the tag asigned to your image view in presented view controller
public var scaleDestImageViewTag: Int = 1000000000
    
/// Destination image view frame in presented view controller
public var scaleDestFrame: CGRect = .zero

To setup scaleSourceFrame it's important convert rect in source image view frame to superview in view controller. See next example:

// Convert image view frame to view under collection view
let rectInView = cell.convert(cell.imageView.frame, to: collectionView.superview)
scaleConfigurator.scaleSourceFrame = rectInView

Tagging your image view in presented view controller is required to help CiaoTransition getting the view to make interactive transitions. Remember using the same tag in your image view & scaleDestImageViewTag

scaleConfigurator. scaleDestImageViewTag = 100

CiaoAppStoreConfigurator

App Store transition configurator is required to simulate app store interactive transitions. For this, Ciao need some information about view you are going to scale. First create an instance of CiaoAppStoreConfigurator and setup your custom params.

/// Collection view cell used to expand the card view
let fromCell: CiaoCardCollectionViewCell

/// This is the tag asigned to your expanded view in presented view controller
let toViewTag: Int

See next example to instance the configurator:

let appStoreConfigurator = CiaoAppStoreConfigurator(fromCell: cell, toViewTag: 100)

Transition Types

Basic Transitions

/// Vertical transition. Drag down or lateral to dismiss the view (by default).
CiaoTransitionStyle.vertical

/// Lateral translation transition. Drag down or lateral to dismiss the view (by default).
CiaoTransitionStyle.lateral

/// Transition with scaled image. Drag down or lateral to dismiss the view (by default).
CiaoTransitionStyle.scaleImage

Special Transitions

/// Special simulated App Store transition. Drag down or lateral to dismiss the view (by default).
CiaoTransitionStyle.appStore

Extra

Additionally you can enable or disable dismiss gesture transitions whenever you want.

// Enable gesture interactive transitions on dismiss
ciaoTransition.enable()

// Disable gesture interactive transitions on dismiss
ciaoTransition.disable()

Apps using CiaoTransitions

If you use CiaoTransitions I'd love to hear about it and feature your app here!

FashTime

Author

Alberto Aznar, info@alberdev.com

Credits

I used open source project iOS 11 App Store Transition made by Wirawit Rueopas to simulate one of transitions.

Contributing

Feel free to collaborate with ideas 💭, issues ⁉️ and/or pull requests 🔃.

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

License

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

zhipengbird/CiaoTransitions