Supported Animation Types - macOS

import Foundation
import IMGLYEngine

@MainActor
func animationTypes(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)

  let slideAnimation = try engine.block.createAnimation(.slide)
  try engine.block.setInAnimation(block, animation: slideAnimation)
  try engine.block.setDuration(slideAnimation, duration: 1.0)
  try engine.block.setFloat(slideAnimation, property: "animation/slide/direction", value: .pi)
  try engine.block.setEnum(slideAnimation, property: "animationEasing", value: "EaseOut")

  try engine.block.destroy(try engine.block.getInAnimation(block))

  let fadeAnimation = try engine.block.createAnimation(.fade)
  try engine.block.setInAnimation(block, animation: fadeAnimation)
  try engine.block.setDuration(fadeAnimation, duration: 0.8)
  try engine.block.setEnum(fadeAnimation, property: "animationEasing", value: "EaseInOut")

  try engine.block.destroy(try engine.block.getInAnimation(block))

  let zoomAnimation = try engine.block.createAnimation(.zoom)
  try engine.block.setInAnimation(block, animation: zoomAnimation)
  try engine.block.setDuration(zoomAnimation, duration: 1.0)
  try engine.block.setBool(zoomAnimation, property: "animation/zoom/fade", value: true)

  try engine.block.destroy(try engine.block.getInAnimation(block))

  let wipeInAnimation = try engine.block.createAnimation(.wipe)
  try engine.block.setInAnimation(block, animation: wipeInAnimation)
  try engine.block.setDuration(wipeInAnimation, duration: 0.8)

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

  try engine.block.destroy(try engine.block.getInAnimation(block))
  try engine.block.destroy(try engine.block.getOutAnimation(block))

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

  try engine.block.destroy(try engine.block.getLoopAnimation(block))

  let spinIn = try engine.block.createAnimation(.spin)
  try engine.block.setInAnimation(block, animation: spinIn)
  try engine.block.setDuration(spinIn, duration: 0.8)

  let blurOut = try engine.block.createAnimation(.blur)
  try engine.block.setOutAnimation(block, animation: blurOut)
  try engine.block.setDuration(blurOut, duration: 0.6)

  let swayLoop = try engine.block.createAnimation(.swayLoop)
  try engine.block.setLoopAnimation(block, animation: swayLoop)
  try engine.block.setDuration(swayLoop, duration: 1.5)

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

Apply entrance, exit, and loop animations to design blocks using the available animation types in CE.SDK.

5 mins

estimated time

GitHub

CE.SDK organizes animations into three categories: entrance (In), exit (Out), and loop. Each category determines when the animation plays during the block’s lifecycle. This guide demonstrates different animation types and their configurable properties.

This guide covers applying entrance animations (slide, fade, zoom), exit animations, loop animations, and configuring animation properties like direction, easing, and intensity.

Entrance Animations#

Entrance animations define how a block appears. We use createAnimation with the animation type and attach it using setInAnimation.

Slide Animation#

The slide animation moves a block in from a specified direction. The direction property uses radians where 0 is right, Float.pi / 2 is bottom, Float.pi is left, and 3 * Float.pi / 2 is top.

let slideAnimation = try engine.block.createAnimation(.slide)
try engine.block.setInAnimation(block, animation: slideAnimation)
try engine.block.setDuration(slideAnimation, duration: 1.0)
try engine.block.setFloat(slideAnimation, property: "animation/slide/direction", value: .pi)
try engine.block.setEnum(slideAnimation, property: "animationEasing", value: "EaseOut")

Fade Animation#

The fade animation transitions opacity from invisible to fully visible. Easing controls the animation curve.

let fadeAnimation = try engine.block.createAnimation(.fade)
try engine.block.setInAnimation(block, animation: fadeAnimation)
try engine.block.setDuration(fadeAnimation, duration: 0.8)
try engine.block.setEnum(fadeAnimation, property: "animationEasing", value: "EaseInOut")

Zoom Animation#

The zoom animation scales the block from a smaller size to its final dimensions. The fade property adds an opacity transition during scaling.

let zoomAnimation = try engine.block.createAnimation(.zoom)
try engine.block.setInAnimation(block, animation: zoomAnimation)
try engine.block.setDuration(zoomAnimation, duration: 1.0)
try engine.block.setBool(zoomAnimation, property: "animation/zoom/fade", value: true)

Other entrance animation types include:

.blur — Transitions from blurred to clear
.wipe — Reveals with a directional wipe
.pop — Bouncy scale effect
.spin — Rotates the block into view
.grow — Scales up from a point

Exit Animations#

Exit animations define how a block leaves the screen. We use setOutAnimation to attach them. CE.SDK prevents overlap between entrance and exit durations automatically.

let wipeInAnimation = try engine.block.createAnimation(.wipe)
try engine.block.setInAnimation(block, animation: wipeInAnimation)
try engine.block.setDuration(wipeInAnimation, duration: 0.8)

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

In this example, a wipe entrance transitions to a fade exit. Mirror entrance effects for visual consistency, or use contrasting effects for emphasis.

Loop Animations#

Loop animations run continuously while the block is visible. They can combine with entrance and exit animations. We use setLoopAnimation to attach them.

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

The duration controls each cycle length. Loop animation types include:

.breathingLoop — Slow scale pulse
.pulsatingLoop — Rhythmic scale
.spinLoop — Continuous rotation
.fadeLoop — Opacity cycling
.swayLoop — Rotational oscillation
.jumpLoop — Jumping motion
.blurLoop — Blur cycling
.squeezeLoop — Squeezing effect

Combined Animations#

A single block can have entrance, exit, and loop animations running together. The loop animation runs throughout the block’s visibility while entrance and exit animations play at the appropriate times.

let spinIn = try engine.block.createAnimation(.spin)
try engine.block.setInAnimation(block, animation: spinIn)
try engine.block.setDuration(spinIn, duration: 0.8)

let blurOut = try engine.block.createAnimation(.blur)
try engine.block.setOutAnimation(block, animation: blurOut)
try engine.block.setDuration(blurOut, duration: 0.6)

let swayLoop = try engine.block.createAnimation(.swayLoop)
try engine.block.setLoopAnimation(block, animation: swayLoop)
try engine.block.setDuration(swayLoop, duration: 1.5)

Configuring Animation Properties#

Each animation type has specific configurable properties. We use findAllProperties to discover available properties and getEnumValues(ofProperty:) to query options for enum properties.

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

Common configurable properties include:

Direction: Controls entry/exit direction in radians or enum values
Easing: Animation curve (Linear, EaseIn, EaseOut, EaseInOut)
Intensity: Strength of the effect (varies by animation type)
Fade: Whether to include opacity transition

API Reference#

Method	Description
`engine.block.createAnimation(type)`	Create animation by type
`engine.block.setInAnimation(block, animation:)`	Attach entrance animation
`engine.block.setOutAnimation(block, animation:)`	Attach exit animation
`engine.block.setLoopAnimation(block, animation:)`	Attach loop animation
`engine.block.setDuration(anim, duration:)`	Set animation duration
`engine.block.setFloat(anim, property:, value:)`	Set numeric property
`engine.block.setEnum(anim, property:, value:)`	Set enum property
`engine.block.setBool(anim, property:, value:)`	Set boolean property
`engine.block.findAllProperties(anim)`	Discover configurable properties
`engine.block.getEnumValues(ofProperty:)`	Get available enum values

Next Steps#

Base Animations — Create and attach animations to blocks
Text Animations — Animate text with writing styles
Animation Overview — Animation concepts and capabilities