CAAnimation stops when scrolled out of bounds - iphone

Question

I have a custom activity indicator in the form of an infinitely rotating UIImageView.
And this this amazing activity indicator is placed inside a table cell.
The animation is achieved this way:
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat: M_PI * 2.0];
animation.duration = 1.0f;
animation.repeatCount = INFINITY;
[self.layer addAnimation:animation forKey:#"SpinAnimation"];
At first, it work beautifully... But when the cell gets scrolled off the bounds of the table, the animation stops, and I have no idea how to reset it... /:
Please help...
Thanks so much in advance... :)

Answer 1

The reason is animation for rotation.z key became nil when prepareForReuse made its work or your application came into background mode.
Consider to draw activity indicator by hands or try something like https://github.com/airbnb/lottie-ios
The approach below activity indicator works and rolling fine inside scroll / cells / background mode
I tried rotation.z and something workarounds based on CAReplicationLayer - both failed in scroll / cells / background mode
private func drawLoaderCircle() {
let path = UIBezierPath(arcCenter: loaderViewCenter, radius: loaderCircleRadius, startAngle: 0, endAngle: 2 * .pi, clockwise: true).cgPath
setupGrapes(endAngle: 310, path: path)
}
private func setupGrapes(endAngle: CGFloat, path: CGPath) {
let step: CGFloat = 2
var grapeAnimationDelay: CFTimeInterval = 0
for i in stride(from: 0, to: endAngle, by: step) {
let radians = i * .pi / 180
let x = loaderViewCenter.x + loaderCircleRadius * cos(radians)
let y = loaderViewCenter.y + loaderCircleRadius * sin(radians)
let grapeLayer = CAShapeLayer()
grapeLayer.frame = CGRect(x: 0, y: 0, width: circleWidth + 0.2, height: circleWidth + 0.2)
grapeLayer.position = CGPoint(x: x, y: y)
grapeLayer.cornerRadius = grapeLayer.frame.width / 2
grapeLayer.backgroundColor = loaderColor.cgColor
grapeAnimationDelay += Double(rotateDuration * Double(step) / 360)
let rotateGrapeAnimation = CAKeyframeAnimation(keyPath: "position")
rotateGrapeAnimation.path = path
rotateGrapeAnimation.beginTime = grapeAnimationDelay
rotateGrapeAnimation.calculationMode = .linear
rotateGrapeAnimation.repeatCount = .infinity
rotateGrapeAnimation.isRemovedOnCompletion = false
rotateGrapeAnimation.duration = rotateDuration
grapeLayer.add(rotateGrapeAnimation, forKey: nil)
progressLayer.addSublayer(grapeLayer)
}
}

Answer 2

It seems that this animation is removed when corresponding cell is reused. At least, I've got animationDidStop delegate's callback when I returned dequeued cell from cellForItemAtIndexPath.
The simplest workaround I can come up with:
Your table view data source:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if(cell && [cell conformsToProtocol:#protocol(CustomCellProtocol)])
{
[(id<CustomCellProtocol>)cell beforeDisplayed];
}
return cell;
}
Your cell:
static NSString* const kSpinAnimationKey = #"SpinAnimation";
#interface CustomCell () <CustomCellProtocol>
#end
#implementation CustomCell
-(void)startSpinAnimation
{
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation.z"];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat: M_PI * 2.0];
animation.duration = 1.0f;
animation.repeatCount = INFINITY;
[self.layer addAnimation:animation forKey:kSpinAnimationKey];
}
-(void)beforeDisplayed
{
UIView* animatedView = self.contentView;
if(![animatedView.layer animationForKey:kSpinAnimationKey])
{
[self startSpinAnimation];
}
}