Question

I have a simple animation setup in a Mac App where a page control swaps out some views. I am very close to getting the paging-like animation I want, but there is a slight problem. The paging works and the new page animates into place correctly, but the new page also replaces the initial page before the animation. I wish to ultimately have the view that is being pushed out remain the same instead of changing to the new page early. Here is a video showing the problem, slowed down to a 3 second animation duration. Here is the code:

UASourceView *previousSourceView = [self.sourceViewContainer.subviews objectAtIndex:0];
NSInteger previousIndex = [self.sourceViews indexOfObjectIdenticalTo:previousSourceView];

CATransition *pushTransition = [CATransition animation];
[pushTransition setType:kCATransitionPush];
[pushTransition setSubtype:(previousIndex < index) ? kCATransitionFromRight : kCATransitionFromLeft];
[pushTransition setDuration:PANEL_PAGE_SWIPE_ANIMATION_DURATION];
[pushTransition setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[pushTransition setRemovedOnCompletion:YES];

[CATransaction begin];
[self.sourceViewContainer replaceSubview:previousSourceView with:sourceView];
[CATransaction commit];

[sourceView.layer addAnimation:pushTransition forKey:@"push"];

There is a fixed container view self.sourceViewContainer that gets a new subview replaced on every animation. The problem, as seen above is that the previousSourceView gets replaced immediately by the sourceView and gets pushed in as well. Please help me stop the immediate replacement. Where am I going wrong?

*Note, iOS tag is added because this code is platform independent.

Answer 1

I solved similar issues using CAAnimationBlocks (this is my fork of the original, which the author has moved in a direction I didn’t much care for).

The idea is to set removedOnCompletion to NO and fillMode to kCAFillModeForwards and perform the actual switch (without animation) in the completion block. This has been tested under OSX only (you might need a different solution for iOS, which already supports completion blocks).

Here’s an example usage from my code, which moves a piece on a chess board, and back again:

CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
moveAnimation.fromValue = [NSValue valueWithPoint:[self _pointForSquare:move.from()]];
moveAnimation.toValue = [NSValue valueWithPoint:[self _pointForSquare:move.to()]];
moveAnimation.duration = _animateSpeed / 1000.0;
moveAnimation.autoreverses = YES;
moveAnimation.removedOnCompletion = NO;
moveAnimation.fillMode = kCAFillModeForwards;
moveAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
moveAnimation.completion = ^(BOOL finished)
{
    [pieceLayer removeAnimationForKey:@"movePiece"];
    [self _setPieceLayer:pieceLayer toPiece:piece];
    [pieceLayer setNeedsDisplay];
};

[pieceLayer addAnimation:moveAnimation forKey:@"movePiece"];