AVFoundation Tutorial: Adding Overlays and Animations to Videos

Adding Animations

One good thing about CALayers is, as the name Core Animation implies, they’re animatable! To make your birthday card more dynamic, you’ll add a scaling animation to your text to make it scale up and down.

In add(text:to:videoSize:), add the following line right before the last line, where you add the text layer as a sublayer of layer:

let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")

CABasicAnimation lets you add simple animations to CALayers between two specific values. CABasicAnimation uses key-value observing to set and read the animated values. In this case, you’ll be setting the transform’s scale.

Next, set up the animation by adding the following code right under the line you just added:

scaleAnimation.fromValue = 0.8
scaleAnimation.toValue = 1.2
scaleAnimation.duration = 0.5
scaleAnimation.repeatCount = .greatestFiniteMagnitude
scaleAnimation.autoreverses = true
scaleAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

This code scales the text from a value of 0.8 to 1.2 over 0.5 seconds. You want this animation to repeat indefinitely, so you set the repeat count to .greatestFiniteMagnitude. You also set autoreverses to true so that the scale bounces back and forth between 0.8 and 1.2.

Finally, set a few more settings and add the animation to the layer:

scaleAnimation.beginTime = AVCoreAnimationBeginTimeAtZero
scaleAnimation.isRemovedOnCompletion = false
textLayer.add(scaleAnimation, forKey: "scale")

When adding animations to videos, it’s important that you set the beginTime to AVCoreAnimationBeginTimeAtZero; otherwise, the animation will never start. You also need to make sure the animation is not removed on completion.

Build and run the project and select a video.

Away with the boring static birthday cards, now your text scales up and down! You made the card more dynamic, but why stop there? In the next section, you’ll add confetti to your birthday card, too!

Adding the Final Touches

There are lots of other powerful CALayer subclasses besides CATextLayer. For instance, CAGradientLayer shows color gradients. CAReplicatorLayer lets you create patterns by repeating a layer according to a set of rules. With CAShapeLayer, you can draw circles, ellipses, arcs, polygons and even arbitrary shapes. By combining it with CAAnimation, you can dynamically change and animate the shape, leading to some cool effects.

No birthday is complete without confetti, which is why, as a final touch, you’ll add a confetti effect. The confetti will fall from the top of the video. Thankfully, this is digital confetti, so you won’t need to clean up the mess afterward. :]

To create the confetti, you’ll use another CALayer subclass called CAEmitterLayer, which lets you create particle effects. You determine the layer’s shape and set your desired particle birth rate, velocity and other settings. The layer will then emit particles from its shape.

The starter project already includes a method called addConfetti(to:) that creates 16 different particles by combining a random confetti image with a random color. It then sets up a CAEmitterLayer as a line just above the video layer with those 16 particles. The result is confetti falling from the top of the video!

To add the confetti, scroll to makeBirthdayCard(fromVideoAt:forName:onComplete:) for the final time and call the method right above where you call addImage(to:videoSize:):

addConfetti(to: overlayLayer)

Build and run the project and bask in the glory of CALayers!

By adding confetti, you’ve made the birthday card at least ten times as triumphant. Trust me, I calculated that myself. :]

Where to Go From Here?

You can download the completed project files by clicking the Download Materials button at the top or bottom of the tutorial.

By now, you deserve a card to congratulate you for everything you’ve learned in this AVFoundation tutorial! You learned how to use AVVideoCompositionCoreAnimationTool to combine CALayers with video to add backgrounds and overlays, how to make a video composition and how to export a video to a file.

If you want to go deeper into everything you can do with AVFoundation, check out our video course Beginning Video with AVFoundation.

To learn more about the different things you can do with Core Animation, check out the iOS Views and Animations video course, as well as the CALayer Tutorial.

Make sure to remember this tutorial for your friends’ upcoming birthdays! If you have any comments or questions, reach out in the comment section below.