Material Motion Exploring solutions that will empower creators with the tools needed to describe and implement rich, interactive motion on any platform. Edit this page · History
Drafting as of Oct 25, 2016

TransitionWindow specification

This is the engineering specification for the TransitionWindow type.


A transition window represents a reversible interval of time in a bi-directional transition.

A segment of a transition window represents a specific region in the window. TransitionWindowSegment is a representation of such a segment. When used in a transition, segments placed on a transition window can be mapped to absolute time by considering the transition’s direction.

Consider the following diagram in which there are two segments:

let redSegment = TransitionWindowSegment(position: 0, length: 0.5)
let greenSegment = TransitionWindowSegment(position: 0, length: 1)

During a forward transition our segments are mapped to absolute time like so:

let delay = segment.position * window.duration
let duration = segment.length * window.duration

During a backward transition, our segments are mapped to absolute time like so:

let delay = (1 - (segment.position + segment.length)) * window.duration
let duration = segment.length * window.duration

In other words, a segment that occurs during the first half of a forward transition will occur during the last half of a backward transition.


Object type

A transition window is an object.

class TransitionWindow {

Initialization API

A transition window must be created with a duration.

class TransitionWindow {

Duration API

Expose a read-only API for the window’s duration.

class TransitionWindow {
  let duration: TimeInterval