Animated iMessage App Graphics

Question

I'm creating my own iMessage Custom App and I simply want to send an iMessage with a background that swaps between 2 images, therefore creating the illusion of animation. I'm not even sure this is possible but I'm trying with the code below. This code only shows the first image when the message is received by the recipient. Any help would be appreciated.

func createImageForMessage() -> UIImage? {
    let cupAnimation = UIImageView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
    let imagesListArray = [UIImage(named: "boy_cup_1_1.png")!,UIImage(named: "boy_cup_1_7.png")!]

    cupAnimation.animationImages = imagesListArray
    cupAnimation.animationDuration = 10.0
    cupAnimation.animationRepeatCount = 50
    cupAnimation.startAnimating()

    let cupBackground = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
    cupBackground.addSubview(cupAnimation)

    background.addSubview(cupBackground)

    background.frame.origin = CGPoint(x: view.frame.size.width, y: view.frame.size.height)

    view.addSubview(background)

    UIGraphicsBeginImageContextWithOptions(background.frame.size, false, UIScreen.main.scale)
    background.drawHierarchy(in: background.bounds, afterScreenUpdates: true)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    background.removeFromSuperview()

    return image
}

Answer 1

Rich messaging extensions for iMessage come in two kinds: iMessage Apps and Sticker Packs.

• When you have an iMessage App, the custom message content you create in your app (and send via MSMessage or MSSession) can be viewed by a recipient only if they also have your iMessage app installed. If they don't, they receive a static preview of your content, along with some UI that lets the recipient install your app from the App Store.

• When you have a Sticker Pack, there's no code involved in creating the sticker images — they're just assets. So Apple's iMessage service can pass those assets to anybody on any device, and anybody can view them regardless of whether they have your app installed on their device. (And regardless of whether they even could have your app installed. Custom sticker apps can be installed only on iOS, but macOS and watchOS can receive stickers.)

So, to have animated stickers, you just need to create animated assets. The preferred format for this is APNG, and there's support in Xcode for automatically creating APNG animated stickers from sequences of PNG images — just look in the editor for your xcstickers bundle. Or follow along with the tutorials and videos on Creating Stickers for iMessage on the Apple Developer site.

Note that you can also combine the two — you can have an iMessage app that dynamically creates new stickers with the MSSticker class and sends them to other users. In that case, the stickers are dynamic in that your app is creating them at runtime, but after creation they're static assets, which means that the iMessage service can distribute them and recipients don't need your app installed to view them.

If you create stickers dynamically you'll need to write the sticker asset file in your app before passing it to the MSSticker class. If you're doing that with animated images, you can create an APNG file using the CGImageDestination API — see this bit in Apple's Image I/O Programming Guide.

---

The above is an attempt to answer what seems to be the actual topic of your question — sending animated stickers in iMessage. But you've also got some more specific confusion in your code, so here's an attempt to address that...

Your method returns a UIImage. That class doesn't support animations, only static images. If you want to do anything with animation, you'll need something different to represent one (as seen with CGImageDestination above).

UIImageView can present animations by being given a sequence of UIImages. But when you use drawHierarchy(in:afterScreenUpdates:) you're taking a screenshot of that view, creating a single static image.