Cool wave like transition between two or more UICollectionView

Related tags

Animation CKWaveCollectionViewTransition
Overview

CKWaveCollectionViewTransition

This is a cool custom transition between two or more UICollectionViewControllers with wave-like cell animation. Could be used in e.g. galleries.

anim.gif

Animation idea was taken from Łukasz Frankiewicz Dribble project

Installation

There are two options:

  • Via CocoaPods.
  • Manually add the files into your Xcode project. Slightly simpler, but updates are also manual.

Usage

  • In storyboard add an object in your NavigationController.

object.jpg

  • Set it's class to NavigationControllerDelegate

objectCustomClass.jpg

  • Set NavigationController delegate to this object.

navigationControllerDelegateObject.jpg

or

Implement UINavigationControllerDelegate in your ViewController:

func navigationController(navigationController: UINavigationController, animationControllerForOperation operation: UINavigationControllerOperation,
        fromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
            let animator = CKWaveCollectionViewAnimator()
            if operation != UINavigationControllerOperation.Push {
                animator.reversed = true
            }

            return animator
    }
  • The last thing you have to set is selectedIndexPath property in your didSelectItemAtIndexPath method implementation.
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        selectedIndexPath = indexPath
}

Properties

internal let animationDuration: Double! = 1.0

Total animation duration.

internal let kCellAnimSmallDelta: Double! = 0.01
internal let kCellAnimBigDelta: Double! = 0.03

Properties you can change to adjust animation.

Requirements

  • iOS 7.0+

License

Released under the MIT license. See the LICENSE file for more info.

Comments
  • Doens't work correctly after changing cell size programmatically.

    Doens't work correctly after changing cell size programmatically.

    Thank you for this awesome library for collection view.

    I have integrated your library in my project, and I have one problem. After calling UICollectionViewDelegateFlowLayout method - sizeForItemAt, the transitioning cell sizes are doesn't changed.

    My code is here and there are written on both of first and second view controller.

    extension MyViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let desiredWidth = (self.view.frame.size.width - 2) / 2
        let desiredHeight = desiredWidth

        return CGSize(width: desiredWidth, height: desiredHeight)
    }
}

    Please let me know how can I handle this problem. Thank you

    opened by git-hwa 2
  • Xcode 7.1.1

    Xcode 7.1.1

    Hi, Thanks for the beautiful open source. Changes:

    1. I couldn't compile on Xcode 7.1.1 So made changes
    2. I needed to make the animationDuration var instead of let

    N.B. Previous version of Xcode might not run if you merge this.

    opened by rishi420 1
  • Documentation update

    Documentation update

    IMO, documentation should mention that you need to set self.selectedIndexPath = indexPath; in -collectionView:didSelectItemAtIndexPath: It may save debugging time for others. You could also make an assertion in code (line ~247) when destinationCollectionViewController.selectedIndexPath is nil with some descriptive comment.

    Good job anyway!

    opened by scibas 1
  • Some graphics in README.md are unavailable

    Some graphics in README.md are unavailable

    In the readme, the following graphics give me "Access denied" errors when I view the readme offline:

    • https://bitbucket.org/repo/bdbxyL/images/476354846-object.jpg
    • https://bitbucket.org/repo/bdbxyL/images/3022245965-objectCustomClass.jpg
    • https://bitbucket.org/repo/bdbxyL/images/3403085542-navigationControllerDelegateObject.jpg

    And the following graphics give me "Not Found" errors when I view the readme online:

    • https://camo.githubusercontent.com/5ec21bb2c56b67eb32face9cefeeb240ec0c95d0/68747470733a2f2f6269746275636b65742e6f72672f7265706f2f62646278794c2f696d616765732f3437363335343834362d6f626a6563742e6a7067
    • https://camo.githubusercontent.com/928dd63dfdaacbda36e429bb31f775cf32edcb07/68747470733a2f2f6269746275636b65742e6f72672f7265706f2f62646278794c2f696d616765732f333032323234353936352d6f626a656374437573746f6d436c6173732e6a7067
    • https://camo.githubusercontent.com/928dd63dfdaacbda36e429bb31f775cf32edcb07/68747470733a2f2f6269746275636b65742e6f72672f7265706f2f62646278794c2f696d616765732f333032323234353936352d6f626a656374437573746f6d436c6173732e6a7067

    (It is the same three graphics, under "Usage".)

    Thanks. (This is a lovely library!)

    opened by PhilipSharman 1
  • found an issue

    found an issue

    when set the background color of second-level collection view as an image, issue happens.

    In such scenario, click 'back' to reverse to the first level, the background turn to be white color for a while.

    opened by gerryke 1
Owner
Cezary Kopacz
Cezary Kopacz
GitHub
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
ChainPageCollectionView A custom View with two level chained collection views and fancy transition animation

ChainPageCollectionView A custom View with two level chained collection views and fancy transition animation. Demo Requirements iOS 9.0+ Xcode 8 Insta

Yansong Li 775 Dec 7, 2022
A SwiftUI implementation of Wave animating shape.

WaveAnimation A SwiftUI implementation of Wave animating shape. Preview Usage import SineWaveShape SineWaveShape(percent: 0.4, strength: 30, frequency

Zerlz 16 Sep 23, 2022
Wave is a spring-based animation engine for iOS that makes it easy to create fluid, interruptible animations that feel great.

Wave is a spring-based animation engine for iOS and iPadOS. It makes it easy to create fluid, interactive, and interruptible animations that feel great.

Janum Trivedi 1.2k Jan 8, 2023
iOS framework for impressive transition animations between views.

CoreTransition iOS framework for impressive transition animations between views. Built using Swift, and supports a lot of animations to navigate to a

Ahmed Abdelkarim 4 Nov 17, 2022
Letters animation allows you to click on different letters and accordingly it will animate letters in a cool way. It has a very attractive UI and is very easy to use.

Letters Animation Cool Letters Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Numbers animation allows you to click on different numbers and accordingly it will animate numbers in a cool way. It has a very attractive UI and is very easy to use.

Numbers Animation Cool Numbers Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 31 Oct 4, 2022
Reading animation allows you to click on the different page numbers and accordingly it will animate page changes in a cool way. It has a very attractive UI and is very easy to use.

Reading Animation Cool Reading Animation in iOS written in Swift. Preview Table of content :- Description How to add in your project Requirement Licen

MindInventory 42 Oct 4, 2022
Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable.

IBAnimatable 8.6k Jan 2, 2023
ZoomTransitioning provides a custom transition with image zooming animation and swiping the screen edge.

ZoomTransitioning Overview ZoomTransitioning provides a custom transition with image zooming animation. When you use this library with UINavigationCon

WorldDownTown 673 Dec 27, 2022
Transition animation for ViewController

XTransitionKit Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 9.0+ Swift 5

Leo 2 Dec 17, 2021
Keynote-style Magic Move transition animations

MagicMove All the magic of Keynote Magic Move transitions brought to iOS. Demo Magic Move Transition Spin Transition Fade Transition TODO MagicMove Tr

Patrick Reynolds 15 Sep 6, 2018
A UICollectionViewLayout subclass that adds custom transitions/animations to the UICollectionView without effecting your existing code.

AnimatedCollectionViewLayout Normally a UICollectionView has no transition effects when you scroll from one item to another. There are lots of ways to

Jin Wang 4.5k Jan 1, 2023
Garland View seamlessly transitions between multiple lists of content.

Garland View seamlessly transitions between multiple lists of content. We specialize in the designing and coding of custom UI for Mobile

Ramotion 504 Jul 31, 2022
Accessbility workshop by hacking with swift. Make every app more usefull for the all the users

Accessibility Accessbility workshop by hacking with swift. Make every app more u

Pavel Surový 0 Dec 26, 2021
A concept to more easily define simple keyframe / multi-step animations in SwiftUI

?? Animate A concept to more easily define simple keyframe / multi-step animations in SwiftUI, without: Defining an @State value for each property to

Seb Jachec 3 Oct 18, 2022
🎨 Gradient animation effect like Instagram

Pastel ?? Gradient animation effect like Instagram Example override func viewDidLoad() { super.viewDidLoad() let pastelView = PastelView(fram

Cruz 3.4k Jan 1, 2023
Poi - You can use tinder UI like tableview method

Poi You can use tinder UI like tableview method Installation Manual Installation Use this command git clone [email protected]:HideakiTouhara/Poi.git Imp

null 65 Nov 7, 2022
Bring life to CALayers with SpriteKit-like animation builders

Animo Bring life to CALayers with SpriteKit-like animation builders. Why use Animo? Because declaring CAAnimations (especially with CAAnimationGroups)

エウレカ 279 Dec 9, 2022