Search Docs
Loading...
Skip to content

Wipe Effects

Hide parts of a block with the linear wipe, radial wipe and venetian blinds effects, and animate them to reveal the block.

Four copies of one aerial photo: a linear wipe, a radial wipe, venetian blinds and a reveal at 1.5 seconds

5 mins
estimated time
GitHub

Wipe effects use the same effect API as all other effects. You create an effect with createEffect(_:), set its properties and add it to a block with appendEffect(_:effectID:). Scenes that use these effects do not open in earlier versions of CE.SDK. For the general effect API, see Apply a Filter or Effect.

The Wipe Effects#

Each wipe effect hides the part of the block that its completion sets, from 0 (all shown) to 1 (all hidden). feather is the length of the soft edge in design units. The Supported Filters and Effects guide lists the properties and default values of every type.

Type What it hides
.linearWipe The block from one side, along a straight edge
.radialWipe A wedge that sweeps around a center
.venetianBlinds A part of each stripe in a pattern of repeating stripes

Creating the Image Blocks#

We add four copies of one image to the page. Each section below adds its effect to one of these blocks.

// Adds a 360 x 270 image block to the page at a position
func addImageBlock(x: Float, y: Float) throws -> DesignBlockID {
  let block = try engine.block.create(.graphic)
  try engine.block.setShape(block, shape: engine.block.createShape(.rect))
  let fill = try engine.block.createFill(.image)
  try engine.block.setURL(fill, property: "fill/image/imageFileURI", value: imageURL)
  try engine.block.setFill(block, fill: fill)
  try engine.block.setWidth(block, value: 360)
  try engine.block.setHeight(block, value: 270)
  try engine.block.setPositionX(block, value: x)
  try engine.block.setPositionY(block, value: y)
  try engine.block.appendChild(to: page, child: block)
  return block
}


let linearBlock = try addImageBlock(x: 30, y: 30)
let radialBlock = try addImageBlock(x: 410, y: 30)
let blindsBlock = try addImageBlock(x: 30, y: 320)
let revealBlock = try addImageBlock(x: 410, y: 320)

Linear Wipe#

The .linearWipe effect hides the block from one side. An angle of 90 wipes from the left, an angle of 0 wipes from the bottom. Here completion hides half of the block, with a soft edge of 40 design units.

// Hide the left half of the block with a soft edge
let linearWipe = try engine.block.createEffect(.linearWipe)
try engine.block.setFloat(linearWipe, property: "effect/linear_wipe/angle", value: 90)
try engine.block.setFloat(linearWipe, property: "effect/linear_wipe/completion", value: 0.5)
try engine.block.setFloat(linearWipe, property: "effect/linear_wipe/feather", value: 40)
try engine.block.appendEffect(linearBlock, effectID: linearWipe)

Radial Wipe and Venetian Blinds#

The .radialWipe effect hides a wedge of the full circle. startAngle is in degrees clockwise from 12 o’clock. centerX and centerY place the center relative to the block size, from 0 to 1. direction is "Clockwise", "Counterclockwise" or "Both", which centers the wedge on the start angle.

// Hide 60% of the circle around the center, sweeping clockwise from 12 o'clock
let radialWipe = try engine.block.createEffect(.radialWipe)
try engine.block.setFloat(radialWipe, property: "effect/radial_wipe/completion", value: 0.6)
try engine.block.setFloat(radialWipe, property: "effect/radial_wipe/startAngle", value: 0)
try engine.block.setFloat(radialWipe, property: "effect/radial_wipe/centerX", value: 0.5)
try engine.block.setFloat(radialWipe, property: "effect/radial_wipe/centerY", value: 0.5)
try engine.block.setEnum(radialWipe, property: "effect/radial_wipe/direction", value: "Clockwise")
try engine.block.setFloat(radialWipe, property: "effect/radial_wipe/feather", value: 20)
try engine.block.appendEffect(radialBlock, effectID: radialWipe)

The .venetianBlinds effect hides a part of each stripe. direction is in degrees, and 0 gives vertical stripes. width is the width of one stripe in design units.

// Diagonal stripes, 60 design units wide, each half hidden
let blinds = try engine.block.createEffect(.venetianBlinds)
try engine.block.setFloat(blinds, property: "effect/venetian_blinds/completion", value: 0.5)
try engine.block.setFloat(blinds, property: "effect/venetian_blinds/direction", value: 45)
try engine.block.setFloat(blinds, property: "effect/venetian_blinds/width", value: 60)
try engine.block.setFloat(blinds, property: "effect/venetian_blinds/feather", value: 2)
try engine.block.appendEffect(blindsBlock, effectID: blinds)

Revealing a Block over Time#

Effect properties accept keyframes. We give the block a duration of 2 seconds and animate completion of a linear wipe from 1 to 0 with an ease-out, so the block appears from the right. Keyframe times run from 0 to 1 over the duration of the block that the effect belongs to.

// Reveal the block from the right over its 2 second duration
try engine.block.setDuration(revealBlock, duration: 2)
let reveal = try engine.block.createEffect(.linearWipe)
try engine.block.setFloat(reveal, property: "effect/linear_wipe/angle", value: 90)
try engine.block.appendEffect(revealBlock, effectID: reveal)
try engine.block.setKeyframes(reveal, property: "effect/linear_wipe/completion", keyframes: [
  Keyframe(time: 0, value: .float(1), easing: .preset(.easeOut)),
  Keyframe(time: 1, value: .float(0)),
])

getFloat(_:property:) returns the static value, not the animated one, so getKeyframes(_:property:) reads the track back. Set the playback time of the page and export it at 0.5 and 1.5 seconds: the later frame shows more of the block.

// `getFloat` returns the static value, so read the track and export two frames of the reveal
let revealKeyframes = try engine.block.getKeyframes(reveal, property: "effect/linear_wipe/completion")
print(revealKeyframes.count) // 2
try engine.block.setPlaybackTime(page, time: 0.5)
let early = try await engine.block.export(page, mimeType: .png)
try engine.block.setPlaybackTime(page, time: 1.5)
let late = try await engine.block.export(page, mimeType: .png)

For easing, relative tracks and the other keyframe options, see Keyframes.

API Reference#

Method Description
engine.block.createEffect(_:) Create an effect, for example .linearWipe
engine.block.appendEffect(_:effectID:) Add an effect to the end of the effect list of a block
engine.block.setFloat(_:property:value:) Set a number property of an effect
engine.block.setEnum(_:property:value:) Set an option property of an effect
engine.block.setDuration(_:duration:) Set the duration of the block that the keyframes span
engine.block.setKeyframes(_:property:keyframes:mode:) Animate an effect property
engine.block.getKeyframes(_:property:) Read the keyframes of a property
engine.block.setPlaybackTime(_:time:) Move the playback time of the page
engine.block.export(_:mimeType:options:onPreExport:uriResolver:onProgress:) Export the page at the current playback time

Next Steps#