How to animate UIView inside UICollectionViewCell? - ios

Question

I have created a custom UICollectionViewCell and it contains a subView named animView which I intend to animate. The shape of animView is a regular vertical rectangle.
In the configureCell() method, I use the code below to configure the cells and create an animation, but I do not see the animation.
animView.transform = CGAffineTransform(scaleX: 1.0, y: 0.5)
self.layoutIfNeeded()
UIView.animate(withDuration: 0.7, delay: 0, options: [.curveEaseOut], animations: {
self.animView.transform = CGAffineTransform.identity
self.layoutIfNeeded()
}, completion: nil)
However, when I try to animate whole cell, I see the cell animate successfully.
self.transform = CGAffineTransform(scaleX: 1.0, y: 0.5)
self.layoutIfNeeded()
UIView.animate(withDuration: 0.7, delay: 0, options: [.curveEaseOut], animations: {
self.transform = CGAffineTransform.identity
self.layoutIfNeeded()
}, completion: nil)
I appreciate your time and answer.
EDIT:
As per the suggestions, I changed where I call the animation as shows below. Now, when I try to animate whole cell it is working. However, I want to animate the animView which is a subview of the custom UICollectionViewCell (BarCell). But it is not animating. Any ideas?
func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
let cells = collectionView.visibleCells
for cell in cells {
let current = cell as! BarCell
let curAnimView = current.animView
curAnimView?.transform = CGAffineTransform(translationX: 0, y: current.animFillHeightCons.constant)
UIView.animate(withDuration: 0.7) {
curAnimView?.transform = CGAffineTransform.identity
}
}
}

Answer 1

You need to start animation for only visible cells.
Here is how you can do that.
add this
UIScrollViewDelegate
It will provide the method
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let cells = colAnim.visibleCells
for cell in cells
{
let current = cell as! testCollectionViewCell
UIView.animate(withDuration: 2.0, animations: {
current.animView.transform = CGAffineTransform(translationX: -400, y: 0)
//Change this animation
})
}
}
Also make sure do this also.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "testCollectionViewCell", for: indexPath) as! testCollectionViewCell
cell.animView.transform = CGAffineTransform(translationX: 0, y: 0)// This one
return cell
}
By doing this you can achieve animation only when cell is visible.
Thanks.

Answer 2

There are 2 conditions to make it happen:
You will need to reset the properties you are animating every cell binding
You will have to start the animation only when the cell is about to be visible
Also, there are exceptions (like what I had), sometimes the cell binding or the layout of your collection is complex or custom thus, in these cases we will have to delay the animation so it will actually work.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// your dequeue code...
// ...
// Reseting your properties as described in 1
cell.myImageView.alpha = 1
}
func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
let myCell = cell as! MyCell
// As described in 2
myCell.animate()
}
class MyCell: UICollectionViewCell {
func animate() {
// Optional: As described above, if your scene is custom/complex delaying the animation solves it though it depends on your code
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
// Animation code
UIView.animate(withDuration: 1,
delay: 0,
options: [.autoreverse, .repeat]) {
self.seenNotSeenImageView.alpha = 0.5
}
}
}
}
There's also a third condition:
If your cell will be covered by another VC, you will want to initiate the same animated() method as follow, in your viewWillAppear of the VC that holds the collectionView:
collectionView.visibleCells.forEach{($0 as? MyCell)?.animate()}