DEV Community: Peter Iakovlev

Reducing JPEG UIImage RAM Usage by 50%

Peter Iakovlev — Sun, 30 Jul 2023 19:48:12 +0000

In 2013, Apple shifted from the detailed, texture-rich designs of the past to a simpler style filled with basic shapes and vector icons. But even in this modern era of straight lines and plain gradients, raster graphics are still not obsolete. This is particularly true on iOS, where there's limited support for fast vector shape rendering. The most effective way to draw complex user interfaces is by turning static parts into simple images, an area where the iOS compositor excels. In addition to UI elements, raster graphics also play an indispensable role in non-UI elements, such as photos, which can't be adequately represented using vector graphics alone.

Rendering raster images can greatly impact the device's memory in non-obvious ways. This is because the memory used by an image is decided by the number of its pixels, not its file size. In this article, we'll exploit one of the more obscure techniques to render such images on Apple platforms.

RGB vs YUV

In iOS, we typically work with raster images represented as an array of ARGB values (where A stands for alpha) for each pixel:

let pixels: [UInt8] = [
//  a     r     g     b
    0xff, 0xff, 0x00, 0x00,
    ...
]

In this representation, one pixel requires exactly 4 bytes of storage. To put this in perspective, an iPhone 14 Pro Max with a resolution of 2796 x 1290, would need to allocate 2796 * 1290 * 4 = 14427360 bytes (or 14.4 megabytes) of RAM to fill the entire screen with pixels. For comparison, an average JPEG photo of the same size would occupy around 1 megabyte of disk space.

JPEGs use a number of tricks to reduce the size of image data, with one of the first being a clever re-organization of colors known as YUV. RGB data can be losslessly converted into the YUV representation:

func rgbToYuv(r: Double, g: Double, b: Double) -> (y: Double, u: Double, v: Double) {
    let luminance = (0.299 * r) + (0.587 * g) + (0.114 * b)
    let u = (1.0 / 1.772) * (b - luminance)
    let v = (1.0 / 1.402) * (r - luminance)
    return (luminance, u, v)
}

And back:

func yuvToRgb(y: Double, u: Double, v: Double) -> (r: Double, g: Double, b: Double) {
    let r = 1.402 * v + y
    let g = (y - (0.299 * 1.402 / 0.587) * v - (0.114 * 1.772 / 0.587) * u)
    let b = 1.772 * u + y
    return (r, g, b)
}

In the YUV representation, the first component (Y) represents the brightness of a pixel, while the other two encode color.

Simply converting our RGB data into the YUV format will not result in any data storage savings, however. To actually compress the data, we'll need to discard some information, making the color transformation lossy.

Chroma Subsampling

The human eye is quite sensitive when it comes to variations in pixel brightness but is less perceptive of color. It turns out we can store color data at half the resolution and not lose much in the way of visual clarity, especially at higher resolutions and with natural, photographic images. This is known as 4:2:0 subsampling.

The image above illustrates the extreme scenario where chroma subsampling is visually apparent — where two bright-colored, contrasting objects overlap. In naturally occurring images, the effect is much less pronounced.

The 4:2:0-sampled image requires 50% less bytes of storage, as every four YUV pixels share the same color value:

4 RGB pixels = 4 * (4 * 3) = 12 bytes
4 YUV pixels = 4 * 1 + 1 + 1 = 6 bytes

UIImage and YUV

Unfortunately, iOS does not provide any APIs that would allow us to store uncompressed YUV 4:2:0 data in a UIImage. However, there are a couple of ways to work around this.

First, it is possible to use an AVSampleBufferDisplayLayer to display static image content. AVSampleBufferDisplayLayer can display ARGB content, but to achieve RAM space savings, we will convert the image to YUV format using vImage:

func imageToYUVCVPixelBuffer(image: UIImage) -> CVPixelBuffer? {
    // 1
    guard let image = image.preparingForDisplay(), let cgImage = image.cgImage, let data = cgImage.dataProvider?.data, let bytes = CFDataGetBytePtr(data), let colorSpace = cgImage.colorSpace, case .rgb = colorSpace.model, cgImage.bitsPerPixel / cgImage.bitsPerComponent == 4 else {
        return nil
    }

    let width = cgImage.width
    let height = cgImage.width

    // 2
    var pixelBuffer: CVPixelBuffer? = nil
    let _ = CVPixelBufferCreate(kCFAllocatorDefault, width, height, kCVPixelFormatType_420YpCbCr8BiPlanarFullRange, [
        kCVPixelBufferIOSurfacePropertiesKey: NSDictionary()
    ] as CFDictionary, &pixelBuffer)
    guard let pixelBuffer else {
        return nil
    }

    CVPixelBufferLockBaseAddress(pixelBuffer, CVPixelBufferLockFlags(rawValue: 0))
    defer {
        CVPixelBufferUnlockBaseAddress(pixelBuffer, CVPixelBufferLockFlags(rawValue: 0))
    }
    guard let baseAddress = CVPixelBufferGetBaseAddress(pixelBuffer)?.assumingMemoryBound(to: CVPlanarPixelBufferInfo_YCbCrBiPlanar.self) else {
        return nil
    }

    // 3
    var pixelRange = vImage_YpCbCrPixelRange(Yp_bias: 0, CbCr_bias: 128, YpRangeMax: 255, CbCrRangeMax: 255, YpMax: 255, YpMin: 0, CbCrMax: 255, CbCrMin: 0)
    var info = vImage_ARGBToYpCbCr()
    if vImageConvert_ARGBToYpCbCr_GenerateConversion(kvImage_ARGBToYpCbCrMatrix_ITU_R_709_2, &pixelRange, &info, kvImageARGB8888, kvImage420Yp8_Cb8_Cr8, vImage_Flags(kvImageDoNotTile)) != kvImageNoError {
        return nil
    }

    // 4
    var srcBuffer = vImage_Buffer(data: UnsafeMutableRawPointer(mutating: bytes), height: vImagePixelCount(height), width: vImagePixelCount(width), rowBytes: cgImage.bytesPerRow)
    var dstBufferY = vImage_Buffer(data: UnsafeMutableRawPointer(mutating: baseAddress).advanced(by: Int(CFSwapInt32BigToHost(UInt32(baseAddress.pointee.componentInfoY.offset)))), height: vImagePixelCount(height), width: vImagePixelCount(width), rowBytes: Int(CFSwapInt32BigToHost(baseAddress.pointee.componentInfoY.rowBytes)))
    var dstBufferCbCr = vImage_Buffer(data: UnsafeMutableRawPointer(mutating: baseAddress).advanced(by: Int(CFSwapInt32BigToHost(UInt32(baseAddress.pointee.componentInfoCbCr.offset)))), height: vImagePixelCount(height / 2), width: vImagePixelCount(width / 2), rowBytes: Int(CFSwapInt32BigToHost(baseAddress.pointee.componentInfoCbCr.rowBytes)))

    // 5
    let permuteMap: [UInt8] = [3, 0, 1, 2]
    if vImageConvert_ARGB8888To420Yp8_CbCr8(&srcBuffer, &dstBufferY, &dstBufferCbCr, &info, permuteMap, vImage_Flags(kvImageDoNotTile)) != kvImageNoError {
        return nil
    }

    return pixelBuffer
}

1 - Ensure the source image is fully loaded into memory and in the appropriate format.
2 - Create a CVImagePixelBuffer that will store data in the kCVPixelFormatType_420YpCbCr8BiPlanarFullRange format.
3 - Prepare vImage for the RGB to YUV conversion.
4 - Populate the source and destination vImage buffer structures.
5 - Execute the actual conversion.

To display a CVPixelBuffer within an AVSampleBufferDisplayLayer, it needs to be encapsulated in a CMSampleBuffer:

public func makeCMSampleBuffer(pixelBuffer: CVPixelBuffer) -> CMSampleBuffer? {
    var sampleBuffer: CMSampleBuffer?

    var videoInfo: CMVideoFormatDescription? = nil
    CMVideoFormatDescriptionCreateForImageBuffer(allocator: nil, imageBuffer: pixelBuffer, formatDescriptionOut: &videoInfo)
    guard let videoInfo else {
        return nil
    }

    var timingInfo = CMSampleTimingInfo(
        duration: CMTimeMake(value: 1, timescale: 30),
        presentationTimeStamp: CMTimeMake(value: 0, timescale: 30),
        decodeTimeStamp: CMTimeMake(value: 0, timescale: 30)
    )
    CMSampleBufferCreateForImageBuffer(allocator: kCFAllocatorDefault, imageBuffer: pixelBuffer, dataReady: true, makeDataReadyCallback: nil, refcon: nil, formatDescription: videoInfo, sampleTiming: &timingInfo, sampleBufferOut: &sampleBuffer)

    guard let sampleBuffer else {
        return nil
    }

    let attachments = CMSampleBufferGetSampleAttachmentsArray(sampleBuffer, createIfNecessary: true)! as NSArray
    let dict = attachments[0] as! NSMutableDictionary
    dict.setValue(kCFBooleanTrue as AnyObject, forKey: kCMSampleAttachmentKey_DisplayImmediately as NSString as String)

    return sampleBuffer
}

Now we can finally display the YUV image on screen:

let videoLayer = AVSampleBufferDisplayLayer()
videoLayer.frame = CGRect(origin: CGPoint(x: 10.0, y: 70.0), size: CGSize(width: 200.0, height: 200.0))
videoLayer.enqueue(makeCMSampleBuffer(pixelBuffer: imageToYUVCVPixelBuffer(image: image)!)!)
view.layer.addSublayer(videoLayer)

A More Efficient Alternative

AVSampleBufferDisplayLayer is a comparatively heavy-duty UI element that conducts extensive hidden state management in the background. The time it takes to initialize a layer of this type is generally unpredictable, and it can sporadically cause animation delays. While AVSampleBufferDisplayLayer excels at displaying YUV video content, its advanced functionalities aren't necessary for presenting simple images. Instead, we can utilize an obscure feature of UIKit that allows us to assign an IOSurface-backed CVPixelBuffer directly to CALayer.contents:

let directLayer = CALayer()
directLayer.frame = CGRect(origin: CGPoint(x: 10.0, y: 70.0), size: CGSize(width: 200.0, height: 200.0))
directLayer.contents = imageToYUVCVPixelBuffer(image: image)!
view.layer.addSublayer(directLayer)

If you run this code in a simulator, you will not see any image. It only works on actual iOS devices and native macOS apps.

Conclusion

This technique can be trivially expanded to manage YUV+Alpha images (use kCVPixelFormatType_420YpCbCr8BiPlanarFullRange and adjust the conversion routine as needed).

A 4:2:0-coded YUV image requires 50% less RAM space than an equivalent RGB image. For illustrative purposes, the code in this article converts an existing RGB image to the YUV format, causing the application to utilize 150% of the RGB-equivalent RAM during the conversion process. To avoid this peak, it is advised to source the image in YUV format directly. This can be achieved using a libjpeg-derived library capable of outputting YUV data directly.

Using Bazel with your iOS Projects

Peter Iakovlev — Fri, 23 Jun 2023 23:51:11 +0000

When making a product, there comes a time when you need to work smarter, not harder. This is especially true when your app gets big and complicated. Just like Facebook shared in their post (2017), it's wise to find better ways to manage the building of your app.

That's where Bazel comes in.

Bazel is a free tool from Google that helps build your apps. It's great for big, complex apps, but also works well for smaller ones. This article is all about how to use Bazel to make building your iOS apps quicker and easier.

We'll start with the basics: how to set up Bazel and use it for the first time. By the end of this article, you'll have a good understanding of how to use Bazel and why it can make your app building process better.

Motivation

Take a look at these important companies using Bazel to build their apps, and in some cases, their backend code as well: https://bazel.build/community/users

Most of these companies have specialized infrastructure teams handling their build tools. Fortunately for us, these teams also contribute to Bazel's open-source code, allowing us to leverage the collective expertise of these professionals to our benefit.

Installing Bazel

To start, visit https://github.com/bazelbuild/bazel/releases and select the version you wish to use. If you're new to Bazel, it's recommended to choose the most recent version that isn't labeled as a "pre-release".

Download the file appropriate for your platform. If you're using an Apple Silicon-based computer, your file name will end with -darwin-arm64.

Next, move the downloaded file to a location within your $PATH, and check to confirm it's operational:



$ bazel --version
bazel *.*.*

For other installation methods (including using Homebrew), visit https://bazel.build/install/os-x

Project Setup

We're now ready to create our first Bazel-based iOS app. Although we'll be using Xcode later, we need to manually set up some basic structure first since we're opting for an alternative build system.

To simplify the process, I've prepared a template: https://github.com/petertechstories/ios-bazel-template

Here's the structure of the project folder:



BUILD
Info.plist
[MyModule]
[Resources]
[Sources]
WORKSPACE

Let's unpack what's going on here.

Let's break down what each of these files and folders do.

WORKSPACE is the starting point of our project. It lists all the tools needed to build the app. The contents of this file might seem complex initially, but for the most part, it's a standard setup suitable for Apple platforms. A typical example can be found at https://github.com/bazelbuild/rules_apple/releases

BUILD provides a detailed description of the project. Think of it like an .xcodeproj file, but with simpler syntax that's easy for humans to read. For our template project, it's pretty straightforward:



load("@build_bazel_rules_apple//apple:ios.bzl", "ios_application")
load("@build_bazel_rules_swift//swift:swift.bzl", "swift_library")

load(
    "@rules_xcodeproj//xcodeproj:defs.bzl",
    "top_level_targets",
    "xcodeproj",
    "xcode_provisioning_profile",
)

load("@build_bazel_rules_apple//apple:apple.bzl", "local_provisioning_profile")

swift_library(
    name = "Sources",
    srcs = [
        "Sources/AppDelegate.swift",
    ],
    data = [
        "//Resources:Main.storyboard",
    ],
    deps = [
        "//MyModule"
    ]
)

local_provisioning_profile(
    name = "xcode_managed_profile",
    profile_name = "iOS Team Provisioning Profile: com.test.BazelApp",
    tags = ["manual"],
)

ios_application(
    name = "App",
    app_icons = ["//Resources:PhoneAppIcon.xcassets"],
    bundle_id = "com.test.BazelApp",
    families = [
        "iphone",
        "ipad",
    ],
    provisioning_profile = ":xcode_managed_profile",
    infoplists = [":Info.plist"],
    launch_storyboard = "//Resources:Launch.storyboard",
    minimum_os_version = "13.0",
    deps = [":Sources"],
    visibility = ["//visibility:public"],
)

xcodeproj(
    name = "xcodeproj",
    project_name = "App",
    tags = ["manual"],
    top_level_targets = top_level_targets(
        labels = [
            ":App",
        ],
        target_environments = ["device", "simulator"],
    ),    
)

It might seem like we're looking at a series of Python function calls, and in a way, we are. Bazel uses a Turing-complete language to understand project descriptions. However, it's important to note that even though it's possible, it's not recommended to perform heavy computations in this space.

First, we load a few definitions from our toolset. In Bazel language, the components we import and use to define different parts of the project are called "rules". The load statements can only reference those rules that have been defined in the WORKSPACE file.

Next, we define a Swift module that will hold the app's code. This is done using the swift_library function. If you're familiar with SwiftPM syntax, this is quite similar, except it's expressed in a style more akin to Python.

Afterwards, we call the ios_application function to outline our application. Most of the parameters should be easy to understand. The visibility parameter is handy in larger projects divided into modules. But for simpler projects like ours, it's perfectly fine to keep it public.

The remaining part of the BUILD file is responsible for adding Xcode support to our project, so we're not stuck coding in Notepad.

The MyModule directory houses the definition of a module. It's always a smart move to divide your project into separate, functional units.

Lastly, Info.plist and Resources function just like they would in Xcode.

Working with Xcode

Now that the project is set up, we're ready to start working on it. Normally, we would just double-click the .xcodeproj file, but there isn't one available. Like many other third-party build systems, Bazel doesn't depend on .xcodeproj files internally. However, it can generate a temporary project file for our use. To create one, run the following command:



$ bazel run :xcodeproj

In a few seconds, an App.xcodeproj file should appear in the project's directory. Double-click it to open Xcode.

This brings us back to our comfort zone. Working with a Bazel-based project in Xcode should feel familiar. The key thing to remember is that when you want to change the project's structure (like adding files or modules), you need to make these changes in the BUILD files first, then re-generate the project.

Preparing for Distribution

Let's assume we are ready to send the app for testing or submission to the App Store. How do we get the app archive? Typically, we would use the Archive action in Xcode. With Bazel, we don't even need Xcode for that. Instead, head over to the terminal, and run the following command:



$ bazel build -c opt :App

Here, we're instructing Bazel to build the target :App, which is our application (as seen in BUILD), in its Release configuration (where opt stands for "optimized").

Once the build completes, you should see the following lines:



Target //:App up-to-date:
  bazel-bin/App.ipa

This indicates that the build was successful, and the .ipa file can be found at bazel-bin/App.ipa. This file can then be submitted to the App Store using the Application Loader, or shared with friends or colleagues for AdHoc installation.

Conclusion

Bazel is a powerful build system that can greatly simplify the build and distribution process of iOS applications, especially as they become more complex. By integrating Bazel with familiar tools like Xcode, you can harness the best of both worlds - the flexibility and power of Bazel, and the convenience and familiarity of Xcode. While it might take some getting used to, the pay-off in terms of improved efficiency and scalability makes it well worth the effort.

Happy coding!

Recreating iMessage's Sticker Peel-Off Effect

Peter Iakovlev — Wed, 21 Jun 2023 14:04:18 +0000

Since the release of iOS 10, iMessage has grown from a simple text messaging app into a lively platform filled with various features. Among these, the introduction of expressive stickers has been a major highlight.

True to form, Apple extended its celebrated eye for detail into this feature as well. The seemingly straightforward act of applying a sticker onto a message transcends the usual translate-and-scale animations seen on other platforms. Instead, Apple applies the "sticker" metaphor literally, as the chosen item deforms to mimic the physical action of peeling off an actual sticker.

In this article, we'll reconstruct this particular effect from scratch, leveraging basic trigonometry and some lesser-known features of UIKit.

The End Result

By the end of this article, we will achieve the peel-off effect seen here. Take note of the image's seamless, non-linear bending and the vibrant shadow.

Bending Images

UIKit does not provide any public APIs that enable us to apply arbitrary non-affine transformations to views. There is a private API, CAMeshTransform (see this excellent exploration by Bartosz Ciechanowski), but using private APIs is strongly discouraged, as it may lead to Apple rejecting your app upon submission to the App Store.

Given these constraints, we'll opt for the next best alternative, which involves separating an image into several independent layers and manually arranging them to create the illusion of non-uniform transformation.

From this point forward, assume that all provided code exists within the context of a UIView-derived class (for instance, StickerEffectView). To begin, we'll define the array that will hold the image segments:

let containerLayer = CALayer()
var segmentLayers: [CALayer] = []

And define the parameters that will affect the presentation:

let inset: CGFloat = 20.0
let elevation: CGFloat = 60.0

Here, inset defines to the size of the "edge" that extends beyond our sticker image, allowing us to add a shadow effect later; elevation impacts the perceived height at which the sticker will appear to float when we apply the effect.

Next, we need to arrange the segment layers in a way that assigns each one a portion of the image:

func rebuildLayers() {
    if bounds.isEmpty {
        return
    }

    let segmentCount = 20
    let boundingSize = CGSize(width: bounds.width + inset * 2.0, height: bounds.height + inset * 2.0)
    let segmentHeight = boundingSize.height / CGFloat(segmentCount)

    for i in 0 ..< segmentCount {
        if segmentLayers.count <= i {
            let segmentLayer = CALayer()

            segmentLayer.anchorPoint = CGPoint()

            let segmentFrame = CGRect(origin: CGPoint(x: 0, y: CGFloat(i) * segmentHeight), size: CGSize(width: boundingSize.width, height: segmentHeight))
            let segmentContentsRect = CGRect(origin: CGPoint(x: segmentFrame.minX / boundingSize.width, y: segmentFrame.minY / boundingSize.height), size: CGSize(width: segmentFrame.width / boundingSize.width, height: segmentFrame.height / boundingSize.height))

            segmentLayer.contentsRect = segmentContentsRect

            containerLayer.addSublayer(segmentLayer)
            segmentLayers.append(segmentLayer)
        }
    }
}

In this function, we divide the image into segmentCount vertical parts. Each segment is assigned with the exact same image content. To enable them to display only their respective parts, we'll utilize the somewhat obscure contentsRect property of CALayer. In essence, this property lets us "crop" the image using the GPU, removing the need for doing that on the CPU.

Lastly, we will specify the function that updates the segments' positions and rotations to align with our peel-off wave animation:

func updateLayers(fraction: CGFloat, reverse: Bool) {
    let segmentContents = contentImage?.cgImage

    for i in 0 ..< segmentLayers.count {
        let segmentLayer = segmentLayers[i]

        segmentLayer.contents = segmentContents

        let topFraction: CGFloat = CGFloat(i) / CGFloat(segmentLayers.count)
        let bottomFraction: CGFloat = CGFloat(i + 1) / CGFloat(segmentLayers.count)

        let topZ = elevation * valueAt(fraction: fraction, t: topFraction, reverse: reverse)
        let bottomZ = elevation * valueAt(fraction: fraction, t: bottomFraction, reverse: reverse)

        let topY = -inset + topFraction * (bounds.height + inset * 2.0)
        let bottomY = -inset + bottomFraction * (bounds.height + inset * 2.0)

        let dy = bottomY - topY
        let dz = bottomZ - topZ
        let angle = -atan2(dy, dz) + .pi * 0.5

        segmentLayer.zPosition = topZ
        segmentLayer.transform = CATransform3DMakeRotation(angle, 1.0, 0.0, 0.0)

        let segmentHeight: CGFloat = sqrt(dy * dy + dz * dz)

        segmentLayer.position = CGPoint(x: -inset, y: topY)

        segmentLayer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: bounds.width + inset * 2.0, height: segmentHeight))
    }
}

In this function, fraction represents the animation's progress (ranging from 0.0 to 1.0), and reverse indicates whether it's a "peel-off" (reverse: false) or a "put-back" (reverse: true) phase. For each layer, the function calculates the locations of its top and bottom edges and positions the layer in a way that accommodates the bending effect.

The updateLayers function calls the valueAt function, which we have yet to define. In mathematical terms, valueAt defines a scalar field (i.e., it returns a floating point number at any given location) that generates the wave effect:

func valueAt(fraction: CGFloat, t: CGFloat, reverse: Bool) -> CGFloat {
    let windowSize: CGFloat = 0.8

    let effectiveT: CGFloat
    let windowStartOffset: CGFloat
    let windowEndOffset: CGFloat
    if reverse {
        effectiveT = 1.0 - t
        windowStartOffset = 1.0
        windowEndOffset = -windowSize
    } else {
        effectiveT = t
        windowStartOffset = -windowSize
        windowEndOffset = 1.0
    }

    let windowPosition = (1.0 - fraction) * windowStartOffset + fraction * windowEndOffset
    let windowT = max(0.0, min(windowSize, effectiveT - windowPosition)) / windowSize
    let localT = 1.0 - windowFunction(t: windowT)

    return localT
}

In this function, windowSize determines the portion of the total image height that will be included in the animatable area. Any area before the window is assigned a value of 1.0 (indicating "peeled-off"), and any area after the window is 0.0 (indicating a stationary position).

The windowFunction is a separate function that allows us to experiment with the shape of the wave. For the sake of simplicity, we'll initially set it as a linear function:

func windowFunction(t: CGFloat) -> CGFloat {
    return t
}

Making it Smoother

If we execute the code we've written so far, we observe the following result:

While it looks acceptable, the animation appears a bit harsh and mechanical. We're aiming for a shape that's more along these lines:

Thankfully, we can easily accomplish this by updating our window function to utilize a Bézier curve instead of a straight line:

func windowFunction(t: CGFloat) -> CGFloat {
    return evaluateBezier(0.5, 0.0, 0.5, 1.0, t)
}

With this straightforward modification, the animation becomes significantly smoother and more appealing:

Adding the Shadow

The shadow effect can be replicated by adding another set of segments that display a blurred version of the sticker:

let shadowContainerLayer: CALayer
var shadowSegmentLayers: [CALayer] = []
...
func rebuildLayers() {
    if bounds.isEmpty {
        return
    }

    let segmentCount = 20
    let boundingSize = CGSize(width: bounds.width + inset * 2.0, height: bounds.height + inset * 2.0)
    let segmentHeight = boundingSize.height / CGFloat(segmentCount)

    for i in 0 ..< segmentCount {
        if segmentLayers.count <= i {
            let segmentLayer = SegmentLayer()
            let shadowSegmentLayer = SegmentLayer()

            segmentLayer.anchorPoint = CGPoint()
            shadowSegmentLayer.anchorPoint = CGPoint()

            let segmentFrame = CGRect(origin: CGPoint(x: 0, y: CGFloat(i) * segmentHeight), size: CGSize(width: boundingSize.width, height: segmentHeight))
            let segmentContentsRect = CGRect(origin: CGPoint(x: segmentFrame.minX / boundingSize.width, y: segmentFrame.minY / boundingSize.height), size: CGSize(width: segmentFrame.width / boundingSize.width, height: segmentFrame.height / boundingSize.height))

            segmentLayer.contentsRect = segmentContentsRect
            shadowSegmentLayer.contentsRect = segmentContentsRect

            containerLayer.addSublayer(segmentLayer)
            shadowContainerLayer.addSublayer(shadowSegmentLayer)

            segmentLayers.append(segmentLayer)
            shadowSegmentLayers.append(shadowSegmentLayer)
        }
    }
}
...
func updateLayers(fraction: CGFloat, reverse: Bool) {
    let segmentContents = contentImage?.cgImage
    let shadowSegmentContents = shadowContentImage?.cgImage

    for i in 0 ..< segmentLayers.count {
        let segmentLayer = segmentLayers[i]
        let shadowSegmentLayer = shadowSegmentLayers[i]

        segmentLayer.contents = segmentContents
        shadowSegmentLayer.contents = shadowSegmentContents

        let topFraction: CGFloat = CGFloat(i) / CGFloat(segmentLayers.count)
        let bottomFraction: CGFloat = CGFloat(i + 1) / CGFloat(segmentLayers.count)

        let topZ = elevation * valueAt(fraction: fraction, t: topFraction, reverse: reverse)
        let bottomZ = elevation * valueAt(fraction: fraction, t: bottomFraction, reverse: reverse)

        let topY = -inset + topFraction * (bounds.height + inset * 2.0)
        let bottomY = -inset + bottomFraction * (bounds.height + inset * 2.0)

        let dy = bottomY - topY
        let dz = bottomZ - topZ
        let angle = -atan2(dy, dz) + .pi * 0.5

        segmentLayer.zPosition = topZ
        segmentLayer.transform = CATransform3DMakeRotation(angle, 1.0, 0.0, 0.0)

        shadowSegmentLayer.zPosition = segmentLayer.zPosition
        shadowSegmentLayer.transform = segmentLayer.transform

        let segmentHeight: CGFloat = sqrt(dy * dy + dz * dz)

        segmentLayer.position = CGPoint(x: -inset, y: topY)
        shadowSegmentLayer.position = segmentLayer.position

        segmentLayer.bounds = CGRect(origin: CGPoint(), size: CGSize(width: bounds.width + inset * 2.0, height: segmentHeight))
        shadowSegmentLayer.bounds = segmentLayer.bounds
    }
}

We're now very close to achieving the desired effect:

While the shadow looks good, it would be more effective if it were only rendered beneath the peeled-off portions of the sticker. To fix this, we'll implement a simple gradient mask over the shadow container:

let shadowMaskGradient: CAGradientLayer
...
shadowContainerLayer.mask = shadowMaskGradient
...
func updateLayers(fraction: CGFloat, reverse: Bool) {
...
    shadowMaskGradient.colors = (0 ... segmentLayers.count).map { i in
        let t = CGFloat(i) / CGFloat(segmentLayers.count)
        return UIColor(white: 1.0, alpha: valueAt(fraction: fraction, t: t, reverse: reverse)).cgColor
    }
...
}

Finally, we can see our peel-off effect in action:

Bonus

The iMessage peel-off effect includes a subtle sheen that runs though the sticker during the animation. This can be easily added by incorporating an additional layer of image segments that functions as a mask for the glare. The glare itself can be created with a simple gradient:

I won't include the code for the glare here, as it primarily reiterates the setup and update functions we've already discussed. The full version can be found at the link below.

Conclusion

Visual effects often appear to be magic, until you learn the principles behind them yourself. The iMessage sticker peel-off animation is a visually captivating effect that can add a sense of joy and dynamism in your user interface.

The complete source code provided at https://github.com/petertechstories/sticker-effect contains a number of auxiliary functions that were omitted in this article for clarity and brevity.

Happy coding!