AVFoundation Tutorial: Adding Overlays and Animations to Videos

Taking Center Stage — Adding Overlays to Videos

Overlays are really useful for adding watermarks, copyright labels, or other images to your video. By this point, you have almost everything you need to add overlay layers to your video.

“Really? Already?” you might say. Sure! Recall that when you added a border to a video, the border was simply an image on a layer behind the video. The only difference with overlays is that they go on top of the video. That means the overlay image needs to have transparent sections where the video will show through.

The starter project has three sample overlay images the user can choose from: Frame-1.png, Frame-2.png, and Frame-3.png, as seen below:

Switch to AddOverlayViewController.m and find, the hopefully by now familiar, applyVideoEffectsToComposition:size: which should be empty. You’ll just need to add a sprinkling of video magic!

Add the following code to applyVideoEffectsToComposition:size::

  // 1 - set up the overlay
  CALayer *overlayLayer = [CALayer layer];
  UIImage *overlayImage = nil;
  if (_frameSelectSegment.selectedSegmentIndex == 0) {
    overlayImage = [UIImage imageNamed:@"Frame-1.png"];
  } else if(_frameSelectSegment.selectedSegmentIndex == 1) {
    overlayImage = [UIImage imageNamed:@"Frame-2.png"];
  } else if(_frameSelectSegment.selectedSegmentIndex == 2) {
    overlayImage = [UIImage imageNamed:@"Frame-3.png"];
  }

  [overlayLayer setContents:(id)[overlayImage CGImage]];
  overlayLayer.frame = CGRectMake(0, 0, size.width, size.height);
  [overlayLayer setMasksToBounds:YES];

  // 2 - set up the parent layer
  CALayer *parentLayer = [CALayer layer];
  CALayer *videoLayer = [CALayer layer];
  parentLayer.frame = CGRectMake(0, 0, size.width, size.height);
  videoLayer.frame = CGRectMake(0, 0, size.width, size.height);
  [parentLayer addSublayer:videoLayer];
  [parentLayer addSublayer:overlayLayer];

  // 3 - apply magic
  composition.animationTool = [AVVideoCompositionCoreAnimationTool
                               videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

Does this code look familiar? Yup, it’s very similar to the previous code for adding borders!

Going through the numbered comments above, you’ll find the following:

1. The user is able to select which overlay image to use. The selected image is loaded into overlayImage, which is then added to overlayLayer for compositing.
2. Next, the parent layer is set up. Note the difference in order: the video layer is added before the overlay layer. This way, the overlay will appear on top of the video, but the transparent parts of the image will let the video show through.
3. Finally, the usual call to AVVideoCompositionCoreAnimationTool is made to set up the final composition with the layers.

Build and run, tap the “Add Overlay to video” button, select your overlay, and then tap “Generate Output”. Once the video has been saved, go to the Photos app and check out your new video.

You should be rewarded with something like the following:

You can add images behind of or in front of a video (or both at the same time) to generate all sorts of neat effects!

Okay, it’s pretty cool to add images on top of your videos, but what about adding things like titles? You know that the world will be dying to know the name of the genius behind all of these great effects — you :]

You’ve probably guessed that adding titles to your video is as simple as adding another overlay to your video. Read on and learn how!

Just Like Those Foreign Films — Adding Subtitles to Videos

Adding text overlays to video can be used for subtitles or captions. This is especially useful for video presentations or to make your videos fully accessible to those who don’t choose to (or aren’t able to) listen to the audio track.

With text overlays, you don’t use an image overlay. Instead, you create an overlay layer on which you’ll render the text.

Open AddSubtitleViewController.m and look for applyVideoEffectsToComposition:size:.

You know the drill by now; add the code below to applyVideoEffectsToComposition:size::

    // 1 - Set up the text layer
    CATextLayer *subtitle1Text = [[CATextLayer alloc] init];
    [subtitle1Text setFont:@"Helvetica-Bold"];
    [subtitle1Text setFontSize:36];
    [subtitle1Text setFrame:CGRectMake(0, 0, size.width, 100)];
    [subtitle1Text setString:_subTitle1.text];
    [subtitle1Text setAlignmentMode:kCAAlignmentCenter];
    [subtitle1Text setForegroundColor:[[UIColor whiteColor] CGColor]];

    // 2 - The usual overlay
    CALayer *overlayLayer = [CALayer layer];
    [overlayLayer addSublayer:subtitle1Text];
    overlayLayer.frame = CGRectMake(0, 0, size.width, size.height);
    [overlayLayer setMasksToBounds:YES];
    
    CALayer *parentLayer = [CALayer layer];
    CALayer *videoLayer = [CALayer layer];
    parentLayer.frame = CGRectMake(0, 0, size.width, size.height);
    videoLayer.frame = CGRectMake(0, 0, size.width, size.height);
    [parentLayer addSublayer:videoLayer];
    [parentLayer addSublayer:overlayLayer];
    
    composition.animationTool = [AVVideoCompositionCoreAnimationTool
                                 videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

Again, this should look very familiar! Just to be complete, though, here’s a rundown of the steps:

1. CATextLayer, as the name suggests, is a CALayer subclass specifically designed for text layout and rendering. You set the various subtitle properties such as font, size, text, and position here.
2. The rest of the method should be familiar by now: set up the overlay, set up the parent layer, and then finally use AVVideoCompositionCoreAnimationTool to do the composition.

Build and run your app. This time, tap the “Add Subtitle to video” button and select a video to process. Type in some subtitle text, then hit the “Generate Output” button.

Once the video is saved, go to your Photos app and you should see a subtitle at the bottom of your video, similar to the screen below:

You can play around with the text and font settings in the code above and see the difference in the output. Note that the text itself comes from _subTitle1, which is a UITextField on the storyboard.

Okay, that’s enough for static overlays. Time to take the user on a crazy “Inception”-like ride through your video by adding some perspective effects!

Nothing Shifty About This Video — Add Tilt Effect to Videos

The stacking of layers to create overlays is similar to multiple views stacked in a view hierarchy. Similarly, CATransform3D is Core Animation’s version of CGAffineTransform in Core Graphics.

Note: Want to learn more about Core Graphics and CGAffineTransform? Then take a look at Core Graphics Tutorial: Curves and Layers.

CATransform3D can really be useful for advanced video editors who want to add cool transitions to their videos. In this section, you’ll create a simple 3D tilt effect along the x-axis for your video.

Open AddTiltViewController.m and — you guessed it! — find applyVideoEffectsToComposition:size:. Then add the following code to the method:

    // 1 - Layer setup
    CALayer *parentLayer = [CALayer layer];
    CALayer *videoLayer = [CALayer layer];
    
    parentLayer.frame = CGRectMake(0, 0, size.width, size.height);
    videoLayer.frame = CGRectMake(0, 0, size.width, size.height);
    [parentLayer addSublayer:videoLayer];
    
    // 2 - Set up the transform
    CATransform3D identityTransform = CATransform3DIdentity;

    // 3 - Pick the direction
    if (_tiltSegment.selectedSegmentIndex == 0) {
        identityTransform.m34 = 1.0 / 1000; // greater the denominator lesser will be the transformation
    } else if (_tiltSegment.selectedSegmentIndex == 1) {
        identityTransform.m34 = 1.0 / -1000; // lesser the denominator lesser will be the transformation
    }

    // 4 - Rotate
    videoLayer.transform = CATransform3DRotate(identityTransform, M_PI/6.0, 1.0f, 0.0f, 0.0f);
    
    // 5 - Composition
    composition.animationTool = [AVVideoCompositionCoreAnimationTool
                                 videoCompositionCoreAnimationToolWithPostProcessingAsVideoLayer:videoLayer inLayer:parentLayer];

You’ll notice right off that the implementation here is quite different than before. First off, there’s no overlay layer. In this case, you’re applying a transform to the video layer itself — so there’s no need for an overlay.

Going through the code section-by-section, you’ll find the following:

1. The usual setup for the parent and video layers.
2. An identity transform is just a baseline transform that does nothing, just as multiplying a number by 1 does nothing. It’s the starter CATransform3D object that you’ll tweak to get the desired effect.
3. Internally, transforms are just matrices (you can brush up on the ugly math at Wikipedia, if you like). The number at position (3,4) of the matrix (accessed by the m34 property) controls the amount of tilt, or how “squashed” the video appears.
4. The CATransform3DRotate function takes identityTransform as the starting point and applies a rotation around the x-axis.
5. Finally, the usual composition via AVVideoCompositionCoreAnimationTool is done.

Build and run your project!

Select “Add Tilt to video”, choose your video, and generate a copy with the tilt effect. Go find your video in your Photos app and check out the crazy tilt effect, much like the images below:

If you don’t see a drastic difference between the original video and the tilted video after using the code above, try reducing the value in section #3 to something smaller like 100. Play around with the tilt settings and see how the output is affected. Replacing 1000 with 500 for a “squashier” tilt. Or change the angle in section #4 from “M_PI/6.0” (that’s 30 degrees) to “M_PI/3” for an extreme 60 degree tilt!

The last three parameters in the call to CATransform3DRotate() control the axis of rotation; try playing around with these to rotate around the y-axis (0.0f, 1.0f, 0.0f) instead of the x-axis (1.0f, 0.0f, 0.0f) or some other arbitrary vector.

Note: For more information on how to use CATransform3D and matrix manipulation, check out the Core Animation Programing Guide.

So far, you’ve learned about image overlays, text overlays, and now direct video transforms. And all this time you’ve dealt with Core Animation — but nothing’s actually been animated yet! Can you animate things in your video using Core Animation?

Okay, we won’t keep you in suspense any longer — you can definitely add animations to your video! Read on to find out how.