Home > other >  Several animations in a collection view
Several animations in a collection view

Time:05-16

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.

CodePudding user response:

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.

  • Related