Skip to main content
Platform
Language

Animations

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a block's animation through the block API. Animations alter the visual appearance of a block over time in a video scene.

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Creating Animations#

To create an animation simply use createAnimation(type: string): number.

createAnimation(type: AnimationType): DesignBlockId

Creates a new animation, fails if type is unknown.

  • type: The type of animation to create.
  • Returns The handle of the new animation instance.

We currently support the following "in" and "out" animation types:

  • '//ly.img.ubq/animation/slide'
  • '//ly.img.ubq/animation/pan'
  • '//ly.img.ubq/animation/fade'
  • '//ly.img.ubq/animation/blur'
  • '//ly.img.ubq/animation/grow'
  • '//ly.img.ubq/animation/zoom'
  • '//ly.img.ubq/animation/pop'
  • '//ly.img.ubq/animation/wipe'
  • '//ly.img.ubq/animation/baseline'
  • '//ly.img.ubq/animation/crop_zoom'
  • '//ly.img.ubq/animation/spin'

and the following "loop" animation types:

  • '//ly.img.ubq/animation/spin_loop'
  • '//ly.img.ubq/animation/fade_loop'
  • '//ly.img.ubq/animation/blur_loop'
  • '//ly.img.ubq/animation/pulsating_loop'
  • '//ly.img.ubq/animation/breathing_loop'
  • '//ly.img.ubq/animation/jump_loop'
  • '//ly.img.ubq/animation/squeeze_loop'
  • '//ly.img.ubq/animation/sway_loop'

Note: short types are also accepted, e.g. 'slide' instead of '//ly.img.ubq/animation/slide'.

Functions#

You can configure animations just like you configure design blocks. See Modify Properties for more detail.

supportsAnimation(id: DesignBlockId): boolean

Returns whether the block supports animation.

  • block: The block to query.
  • Returns Whether the block supports animation.
setInAnimation(id: DesignBlockId, animation: DesignBlockId): void

Set the "in" animation of the given block.

  • id: The block whose "in" animation should be set.
  • animation: The animation to set.
setLoopAnimation(id: DesignBlockId, animation: DesignBlockId): void

Set the "loop" animation of the given block.

  • id: The block whose "loop" animation should be set.
  • animation: The animation to set.
setOutAnimation(id: DesignBlockId, animation: DesignBlockId): void

Set the "out" animation of the given block.

  • id: The block whose "out" animation should be set.
  • animation: The animation to set.
getInAnimation(id: DesignBlockId): DesignBlockId

Get the "in" animation of the given block.

  • id: The block whose "in" animation should be queried.
  • Returns The "in" animation of the block.
getLoopAnimation(id: DesignBlockId): DesignBlockId

Get the "loop" animation of the given block.

  • id: The block whose "loop" animation should be queried.
  • Returns The "loop" animation of the block.
getOutAnimation(id: DesignBlockId): DesignBlockId

Get the "out" animation of the given block.

  • id: The block whose "out" animation should be queried.
  • Returns The "out" animation of the block.