Search code examples
swiftxcodeanimationuicollectionviewuicollectionviewlayout

Several animations in a collection view


I'm learning to animate collection views and currently use CollectionViewPagingLayout template.

I want to use not only swipes for navigation in a collection view - but also buttons. And the idea is that animation for swipes differs from animation for buttons.

So the point is - how is it possible to configure two different animations for one collection view?

One chosen animation works perfectly: in viewDidLoad I declare chosen template:

override func viewDidLoad() {
        super.viewDidLoad()
        let layout = CollectionViewPagingLayout()
        collectionView.collectionViewLayout = layout
        collectionView.isPagingEnabled = true
        layout.numberOfVisibleItems = nil
    }

Then there are two buttons, that works the same as right and left swipes.

And after the end of a class I create an extension with some animation, for example:

extension TargetCollectionViewCell: ScaleTransformView {
    var scaleOptionsDetailed: ScaleTransformViewOptions {
        return ScaleTransformViewOptions(
            minScale: 0.6,
            scaleRatio: 0.4,
            translationRatio: CGPoint(x: 0.66, y: 0.2),
            maxTranslationRatio: CGPoint(x: 2, y: 0)
        )
    }
}

But I dont understand how to set the second animation - and then how to call it. The example of a result I want is the following: For swipe actions the minScale parameter from the extension should be 0.6. And when I click right/left button minScale parameter should be 0.9.

The readme, provided by the author of template is detailed - but I didnt find the clue there. I guess, some sort of function may help - or another extension. But I tried and completely failed to figure out how to write that method.

Your help with this will be very much appreciated.


Solution

  • Eventually, I managed to do it myself. In case it will be useful for anyone - one of the possible solutions is the following:

    First, create a type of animation, for example var animationType = 1.

    Then, in extension, make some cases:

    extension TargetCollectionViewCell: ScaleTransformView {
        var scaleOptions: ScaleTransformViewOptions {
            if animationType == 1 {
                return ScaleTransformViewOptions(
                    minScale: 0.01,
                    maxScale: 0.01,
                    scaleRatio: 0,
                    translationRatio: .zero,
                    minTranslationRatio: .zero,
                    maxTranslationRatio: .zero,
                    shadowEnabled: false,
                    rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
                    translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
            } else if animationType == 2 {
                return ScaleTransformViewOptions(
                    minScale: 0.04,
                    maxScale: 0.04,
                    scaleRatio: 0,
                    translationRatio: .zero,
                    minTranslationRatio: .zero,
                    maxTranslationRatio: .zero,
                    shadowEnabled: false,
                    rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
                    translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
            } else {
                return ScaleTransformViewOptions(
                    minScale: 0.07,
                    maxScale: 0.07,
                    scaleRatio: 0,
                    translationRatio: .zero,
                    minTranslationRatio: .zero,
                    maxTranslationRatio: .zero,
                    shadowEnabled: false,
                    rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
                    translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
            }
            
            return ScaleTransformViewOptions(
                
            )
        }
    }
    

    In my example the only thing that is changing is minScale/maxScale parameters - of course, all other options may be changed to.

    And the last thing - add a line of code to right/left button, so it changes the animation type. So for left button you add:

     @IBAction func swipeLeftButton(_ sender: Any) {
           ...
           animationType = 1
            
        }
    

    Instead of ... you put a code, that describes the basic functionality of a button. In my case - it was a left swipe command.

    Hope, it will be helpful to someone.