'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 1:[1]
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.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Sergey_VC |