How can I use a video as custom view controller transition in iOS?

Question

I want to use a chroma-keyed (green screen) fullscreen video as custom transition between 2 view controllers.

The video starts completely green (= completely transparent), shows some animated effects (hiding the first view controller behind), and dissolves back into green (revealing the second view controller). Example transitions

I have figured out the chroma-key part (using GPUImage with a modified GPUImageChromaKeyFilter).

How can I show the video fullscreen as custom transition, while switching the view controllers in the back?

thomers thomers · Accepted Answer · 2015-11-09T17:53:14

I was not aware that I can add UIViews to the containerView in the transitionContext in a class implementing UIViewControllerAnimatedTransitioning.

So I am adding the filterView to the container at the beginning of the transition, and remove it again in the completion block.

@interface VideoTransitionAnimator() {
    GPUImageOutput<GPUImageInput> *filter;

}

@property(nonatomic, strong) GPUImageMovie * movieFile;
@property(nonatomic, strong) GPUImagePicture * sourcePicture;

@end

@implementation VideoTransitionAnimator


- (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext
{
    return 2;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    UIViewController* toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    ViewController* fromViewController = (ViewController *) [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    [[transitionContext containerView] addSubview:toViewController.view];
    toViewController.view.alpha = 0;

    NSURL *sampleURL = [[NSBundle mainBundle] URLForResource:@"sample.m4v" withExtension:@"mp4"];

    self.movieFile = [[GPUImageMovie alloc] initWithURL:sampleURL];
    self.movieFile.shouldRepeat = NO;

    filter = [[GPUImageChromaKeyTransparencyFilter alloc] init];
    [(GPUImageChromaKeyTransparencyFilter *)filter setColorToReplaceRed:0.0 green:1.0 blue:0.0];
    [(GPUImageChromaKeyTransparencyFilter *)filter setThresholdSensitivity:0.4];

    [self.movieFile addTarget:filter];

    GPUImageView *filterView = [[GPUImageView alloc] init];
    filterView.frame = fromViewController.view.frame;

    filterView.backgroundColor = [UIColor clearColor];
    [filter addTarget:filterView];

    UIView *containerView = [transitionContext containerView];
    [containerView addSubview:filterView];

    //rfilterView.fillMode = kGPUImageFillModeStretch;

    [self.movieFile startProcessing];

    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        toViewController.view.alpha = 1;
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
        [filterView removeFromSuperview];
    }];
}




@end

How can I use a video as custom view controller transition in iOS?

1 Answers