Transition Animation in iOS Swift & SwiftUI

An animation in iOS Swift can add a touch of dynamism and visual appeal to your app’s user interface.

A wide range of animation libraries and tools are available in iOS Swift, enabling the creation of engaging motion effects that can enhance the visual appeal and dynamism of your app’s user interface.

Core Animation framework is easily animate various UI elements of views, buttons, and images. This framework empowers you to create smooth animations that seamlessly transition between different states.

The UIKit Dynamics module provides a powerful physics-based animation engine, enabling you to simulate real-world behaviors within your app. By leveraging features like gravity, collision detection, and elasticity, you can bring objects to life and create interactive and engaging experiences for your users.

CiaoTransitions

CiaoTransitions animation library to make fancy custom push and modal transitions in your ios projects. You only need to follow some simple steps to implement it.

CiaoTransitions is customizable and easy to use.

• language: Swift 5
• platform: ios
• device: iphone
• license: MIT

• Make awesome transitions
• Totally customizable
• App Store simulated transition included!
• Easy usage
• Supports iOS, developed in Swift 4

Installation

Ciao is available through CocoaPods.

To install podfile and execute the pod install command:

pod 'CiaoTransitions'

After import the library in your project

import CiaoTransitions

Usage

In the example you will see some custom transitions that can be used in your project. It’s really simple:

1. Add CiaoTransition to your presented view controller

Add CiaoTransition to your presented view controller, In project class have scrollview so you can add the apply didscroll method like bottom of code.

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

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

Using 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
}

Uses of 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)
}

Modal with Navigation Controller Example

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

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

ciaoTransition.enable() this code to you can enable gesture transition animation in your project.same like this ciaoTransition.disable() this code to disable gesture transition animation.

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

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

Download

Animation in ios swift – CiaoTransitions