How can I animate border width / color of UICollectionViewCells during layout transition?

Question

I have a UICollectionView that uses a custom subclass of UICollectionViewFlowLayout. This in turn uses a custom subclass of UICollectionViewLayoutAttributes with properties that affect things like border color and thickness on the cells. When performing an animated layout change on my collection view, how can I include these things in the animations?

Implementation details:

Say in MyLayoutAttributes I have an enum property LayoutType with values TypeBig and TypeSmall. I have a cell class MyCell with a UILabel as a subview. In that cell class, I do something like this:

-(void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)attr
{
  [super applyLayoutAttributes:attr];
  MyLayoutAttributes *myAttr = (MyLayoutAttributes *)attr;
  if (myAttr.layoutType == TypeSmall)
    self.layer.borderWidth = 1; //there's already a color set
  else
    self.layer.borderWidth = 0;
}

When the collection view's layout changes (using [collectionView setCollectionViewLayout:animated:]), the cell size and position changes are animated as expected, but the border is not.

score 6 · Accepted Answer · edited May 23 '17 at 11:52

As it turns out, changes to layer properties are not caught by the animation methods on UIView like animateWithDuration. So they have to be added to the layer using CAAnimation. So, in applyLayoutAttributes, I do something like this:

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"borderColor"];
anim.fromValue = (id)[UIColor clearColor].CGColor;
anim.toValue = (id)[UIColor lightGrayColor].CGColor;
self.layer.borderColor = [UIColor lightGrayColor].CGColor;
anim.duration = [CATransaction animationDuration];
anim.timingFunction = [CATransaction animationTimingFunction];
[self.layer addAnimation:anim forKey:@"myAnimation"];

Thanks to this answer for the trick about getting the right animation duration.

How can I animate border width / color of UICollectionViewCells during layout transition?

1 Answers1