Create Animations - Mac Catalyst

import Foundation
import IMGLYEngine

@MainActor
func createAnimations(engine: Engine) async throws {
  let scene = try engine.scene.createVideo()

  let page = try engine.block.create(.page)
  try engine.block.setWidth(page, value: 800)
  try engine.block.setHeight(page, value: 600)
  try engine.block.appendChild(to: scene, child: page)

  try await engine.scene.zoom(to: page, paddingLeft: 40, paddingTop: 40, paddingRight: 40, paddingBottom: 40)

  let block = try engine.block.create(.graphic)
  try engine.block.setShape(block, shape: engine.block.createShape(.rect))
  try engine.block.setPositionX(block, value: 100)
  try engine.block.setPositionY(block, value: 50)
  try engine.block.setWidth(block, value: 300)
  try engine.block.setHeight(block, value: 300)
  try engine.block.appendChild(to: page, child: block)
  let fill = try engine.block.createFill(.image)
  try engine.block.setString(
    fill,
    property: "fill/image/imageFileURI",
    value: "https://img.ly/static/ubq_samples/sample_1.jpg",
  )
  try engine.block.setFill(block, fill: fill)

  guard try engine.block.supportsAnimation(block) else {
    return
  }

  let slideAnimation = try engine.block.createAnimation(.slide)
  try engine.block.setInAnimation(block, animation: slideAnimation)
  try engine.block.setDuration(slideAnimation, duration: 1.0)

  let fadeIn = try engine.block.createAnimation(.fade)
  try engine.block.destroy(try engine.block.getInAnimation(block))
  try engine.block.setInAnimation(block, animation: fadeIn)
  try engine.block.setDuration(fadeIn, duration: 0.8)
  try engine.block.setEnum(fadeIn, property: "animationEasing", value: "EaseOut")

  let fadeOut = try engine.block.createAnimation(.fade)
  try engine.block.setOutAnimation(block, animation: fadeOut)
  try engine.block.setDuration(fadeOut, duration: 0.6)
  try engine.block.setEnum(fadeOut, property: "animationEasing", value: "EaseIn")

  let pulsatingLoop = try engine.block.createAnimation(.pulsatingLoop)
  try engine.block.setLoopAnimation(block, animation: pulsatingLoop)
  try engine.block.setDuration(pulsatingLoop, duration: 2.0)

  let allProperties = try engine.block.findAllProperties(fadeIn)
  try engine.block.setEnum(fadeIn, property: "animationEasing", value: "EaseInOut")

  let slideIn = try engine.block.createAnimation(.slide)
  try engine.block.destroy(try engine.block.getInAnimation(block))
  try engine.block.setInAnimation(block, animation: slideIn)
  try engine.block.setDuration(slideIn, duration: 1.0)
  try engine.block.setFloat(slideIn, property: "animation/slide/direction", value: 0.5 * .pi)

  let text = try engine.block.create(.text)
  try engine.block.setPositionX(text, value: 100)
  try engine.block.setPositionY(text, value: 400)
  try engine.block.setWidth(text, value: 600)
  try engine.block.setHeight(text, value: 100)
  try engine.block.replaceText(text, text: "Animated text with word-by-word reveal")
  try engine.block.appendChild(to: page, child: text)

  let baselineAnimation = try engine.block.createAnimation(.baseline)
  try engine.block.setInAnimation(text, animation: baselineAnimation)
  try engine.block.setDuration(baselineAnimation, duration: 2.0)
  try engine.block.setEnum(baselineAnimation, property: "textAnimationWritingStyle", value: "Word")
  try engine.block.setFloat(baselineAnimation, property: "textAnimationOverlap", value: 0.4)

  let currentIn = try engine.block.getInAnimation(block)
  let currentOut = try engine.block.getOutAnimation(block)
  let currentLoop = try engine.block.getLoopAnimation(block)
  let inType = try engine.block.getType(currentIn)

  try engine.block.destroy(currentIn)
  let zoomIn = try engine.block.createAnimation(.zoom)
  try engine.block.setInAnimation(block, animation: zoomIn)
  try engine.block.setDuration(zoomIn, duration: 0.5)

  let easingOptions = try engine.block.getEnumValues(ofProperty: "animationEasing")
}

Add motion to design elements by creating entrance, exit, and loop animations using CE.SDK’s animation system.

3 mins

estimated time

GitHub

CE.SDK provides a unified animation system for adding motion to design elements. Animations are created as separate block instances and attached to target blocks. This guide introduces the core workflow — see the linked guides below for detailed coverage of each topic.

Animation Workflow#

The basic pattern involves checking animation support, creating an animation instance, and attaching it to a block.

guard try engine.block.supportsAnimation(block) else {
  return
}

let slideAnimation = try engine.block.createAnimation(.slide)
try engine.block.setInAnimation(block, animation: slideAnimation)
try engine.block.setDuration(slideAnimation, duration: 1.0)

Entrance, Exit, and Loop Animations#

CE.SDK supports three animation categories, each attached with its own method:

Category	Attach Method	Behavior
Entrance	`setInAnimation`	Plays when block appears
Exit	`setOutAnimation`	Plays when block leaves
Loop	`setLoopAnimation`	Runs continuously while visible

let fadeIn = try engine.block.createAnimation(.fade)
try engine.block.destroy(try engine.block.getInAnimation(block))
try engine.block.setInAnimation(block, animation: fadeIn)
try engine.block.setDuration(fadeIn, duration: 0.8)
try engine.block.setEnum(fadeIn, property: "animationEasing", value: "EaseOut")

let fadeOut = try engine.block.createAnimation(.fade)
try engine.block.setOutAnimation(block, animation: fadeOut)
try engine.block.setDuration(fadeOut, duration: 0.6)
try engine.block.setEnum(fadeOut, property: "animationEasing", value: "EaseIn")

let pulsatingLoop = try engine.block.createAnimation(.pulsatingLoop)
try engine.block.setLoopAnimation(block, animation: pulsatingLoop)
try engine.block.setDuration(pulsatingLoop, duration: 2.0)

CE.SDK manages timing automatically — when a block has both entrance and exit animations, their durations are adjusted to prevent overlap.

For available animation types and their configurable properties, see Supported Animation Types.

Animation Properties#

Each animation type exposes configurable properties through setFloat and setEnum. Use findAllProperties to discover what’s available.

let allProperties = try engine.block.findAllProperties(fadeIn)
try engine.block.setEnum(fadeIn, property: "animationEasing", value: "EaseInOut")

let slideIn = try engine.block.createAnimation(.slide)
try engine.block.destroy(try engine.block.getInAnimation(block))
try engine.block.setInAnimation(block, animation: slideIn)
try engine.block.setDuration(slideIn, duration: 1.0)
try engine.block.setFloat(slideIn, property: "animation/slide/direction", value: 0.5 * .pi)

For the full list of properties per animation type, see Base Animations.

Text Animations#

Text blocks support additional properties for word-by-word or character-by-character reveals via textAnimationWritingStyle and textAnimationOverlap.

let text = try engine.block.create(.text)
try engine.block.setPositionX(text, value: 100)
try engine.block.setPositionY(text, value: 400)
try engine.block.setWidth(text, value: 600)
try engine.block.setHeight(text, value: 100)
try engine.block.replaceText(text, text: "Animated text with word-by-word reveal")
try engine.block.appendChild(to: page, child: text)

let baselineAnimation = try engine.block.createAnimation(.baseline)
try engine.block.setInAnimation(text, animation: baselineAnimation)
try engine.block.setDuration(baselineAnimation, duration: 2.0)
try engine.block.setEnum(baselineAnimation, property: "textAnimationWritingStyle", value: "Word")
try engine.block.setFloat(baselineAnimation, property: "textAnimationOverlap", value: 0.4)

For detailed coverage of writing styles and overlap configuration, see Text Animations.

Managing Animation Lifecycle#

Retrieve current animations with getInAnimation, getOutAnimation, and getLoopAnimation. When replacing animations, destroy the old instance with destroy to prevent memory leaks.

let currentIn = try engine.block.getInAnimation(block)
let currentOut = try engine.block.getOutAnimation(block)
let currentLoop = try engine.block.getLoopAnimation(block)
let inType = try engine.block.getType(currentIn)

try engine.block.destroy(currentIn)
let zoomIn = try engine.block.createAnimation(.zoom)
try engine.block.setInAnimation(block, animation: zoomIn)
try engine.block.setDuration(zoomIn, duration: 0.5)

let easingOptions = try engine.block.getEnumValues(ofProperty: "animationEasing")

For the full retrieve-read-modify-replace-remove workflow, see Edit Animations.

Next Steps#

Base Animations — Create and configure entrance, exit, and loop animations
Text Animations — Writing styles and overlap for text blocks
Supported Animation Types — All animation types and their properties
Edit Animations — Modify, replace, and remove existing animations
Animation Overview — Animation concepts and capabilities