Customization

Jelly provides a set of objects that allow you to customize interactive and non-interactive transitions & presentations according to your needs without having to get into the depths of the UIKit Transitioning API.

The followig code shows a full custom jelly presentation with all customizable properties so far.

let allCorners = [.layerMaxXMaxYCorner,.layerMaxXMinYCorner,.layerMinXMaxYCorner,.layerMinXMinYCorner]

let uiConfiguration = PresentationUIConfiguration(cornerRadius: 10, 
                                                  backgroundStyle: .blurred(effectStyle: .dark),           
                                                  isTapBackgroundToDismissEnabled: true, 
                                                  corners: allCorners )

let size = PresentationSize(width: .fullscreen, height: .fullscreen)

let alignment = PresentationAlignment(vertical: .center, horizontal: .center)

let marginGuards = UIEdgeInsets(top: 40, left: 16, bottom: 40, right: 16)

let timing = PresentationTiming(duration: .normal, presentationCurve: .linear, dismissCurve: .linear)

let interactionConfiguration = InteractionConfiguration(presentingViewController: self, 
                                                        completionThreshold: 0.5, 
                                                        dragMode: .canvas)

let presentation = CoverPresentation(directionShow: .left, 
                                     directionDismiss: .left, 
                                     uiConfiguration: uiConfiguration, 
                                     size: size, 
                                     alignment: alignment, 
                                     marginGuards: marginGuards, 
                                     timing: timing, 
                                     spring: .none, 
                                     interactionConfiguration: interactionConfiguration)

• Size

Sizes are managed in Jelly using the Size type. The type provides two preconfigured sizes .halfscreen and .fullscreen which should be self-explanatory.

If you want to define your own custom width or height you can use the .custom state of the size enum. Some presentation types expect a PresentationSize object which is basically just a wrapper around width and height.

public enum Size {
    case fullscreen
    case halfscreen
    case custom(value: CGFloat)
}

• margin guards

Margin Guards define how large a ViewController presented with Jelly can be in all directions at most. Let's assume a ViewController is 312 pixels wide, horizontally and vertically centered and defines margin guards that should be 8 pixels wide on the left and right so the ViewController is adjusted to the appropriate size.

• direction

public enum Direction {
    case top
    case bottom
    case left
    case right
}

• horizontal & vertical alignment

public enum HorizontalAlignment {
    case left
    case right
    case center
    case custom(x: CGFloat)
}

public enum VerticalAlignment {
    case top
    case bottom
    case center
    case custom(y: CGFloat)
}

• dimmed and blurred backgroundStyle

public enum BackgroundStyle {
    case dimmed(alpha: CGFloat)
    case blurred(effectStyle: UIBlurEffect.Style)
}

• duration

public enum Duration {
    case custom(duration: TimeInterval)
    case ultraSlow
    case slow
    case medium
    case normal
    case fast
    case reallyFast
    
    var timeInterval: TimeInterval {
        switch self {
            case .custom(let duration):
                return duration
            case .ultraSlow:
                return 2.0
            case .slow:
                return 1.0
            case .medium:
                return 0.5
            case .normal:
                return 0.35
            case .fast:
                return 0.2
            case .reallyFast:
                return 0.1
        }
    }
}

• presentation and dismiss curve

public enum AnimationCurve : Int {     
   case easeInOut
   case easeIn
   case easeOut
   case linear
}

• spring damping & velocity

extension Spring {
    var damping: CGFloat {
        switch self {
            case .none:
                return 1.0
            case .tight:
                return 0.7
            case .medium:
                return 0.5
            case .loose:
                return 0.2
        }
    }
    
    var velocity: CGFloat {
        switch self {
            case .none:
                return 0
            case .tight:
                return 1
            case .medium:
                return 3
            case .loose:
                return 4
        }
    }
}

• corner specification & corner radius

Simple CGFloat for the radius and CACornerMask for the Corners you want to round.

public struct CACornerMask : OptionSet {
    public init(rawValue: UInt)    
    public static var layerMinXMinYCorner: CACornerMask { get }
    public static var layerMaxXMinYCorner: CACornerMask { get }
    public static var layerMinXMaxYCorner: CACornerMask { get }
    public static var layerMaxXMaxYCorner: CACornerMask { get }
}

• completion threshold

Tells the interaction when it should complete the transition if interaction ends.

• interactive drag mode

canvas will add a pan gesture recognizer named "JellyInteractivePanGestureRecognizer" (accessible via the name property of the gesture recognizer in iOS 11) to the main view of the presented and the presentingViewController.

edge will add a pan gesture recognizer named "JellyInteractivePanGestureRecognizer" (accessible via the name property of the gesture recognizer in iOS 11) to the main or the background view (dimming or blur) depending on the size of the presented viewController.