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
runtime MotionRuntime.visualizationElement visualize
Status Interface level Implementation level Library
Proposed as of April 14, 2017 L1: App creator L4: Runtime engineering material-motion
UpdatesCurrent StatusInitiation dateCompletion date
Introduced spec. Draft April 14, 2017
iOS (Swift) View

MotionRuntime.visualizationElement specification

This is the engineering specification for the MotionRuntime’s visualizationElement API.


The visualizationElement API is a lazily-created element that’s registered to the MotionRuntime’s container element. This element can be provided to the visualize(in: Element) operator, allowing you to add visualization labels to the visualization element.


Lazily create the visualization element and store it on the runtime

This element should be added to the runtime’s container element. This element should be stored on the runtime.

class MotionRuntime {
  public var visualizationView: UIView {
    if let visualizationView = _visualizationView {
      return visualizationView

    let view = UIView(frame: .init(x: 0, y: containerView.bounds.maxY, width: containerView.bounds.width, height: 0))
    view.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
    view.isUserInteractionEnabled = false
    view.backgroundColor = UIColor(white: 0, alpha: 0.1)
    _visualizationView = view

    return view
  private var _visualizationView: UIView?

Remove the visualization element when the runtime terminates

Ensure that you remove the visualization element when the runtime terminates.

class MotionRuntime {
  deinit {