About Docs GitHub
arrow_upward Back to top
Docs (4.0.0)
arrow_upward Back to top
class RenderContext interface

interface OutputTransform

An interface for an object that represents transformations to be applied to an output element.

static

interface OutputTransform<TElement = unknown>

Description

This object encapsulates a view output element, as well as any transformations that can be applied to it. The transformation methods stack particular transformations on top of each other. Timing functions can be used to control the animation speed and curve. To build complex animations that consist of multiple transformations, use a step-wise approach by chaining a call to step().

This interface is used to control animations within a RenderContext.OutputTransformer, which can be used on its own, with app.animateAsync, or from a UIAnimationView.

Instance Members

  • getOutput()Returns the output for which this transform has been created.
  • delay(ms)Adds a specified delay (in milliseconds) before any transformation takes place.
  • linear(ms)Sets the timing curve for the current step to linear, with the specified duration (in milliseconds).
  • ease(ms)Sets the timing curve for the current step to ease, with the specified duration (in milliseconds).
  • easeIn(ms)Sets the timing curve for the current step to ease-in, with the specified duration (in milliseconds).
  • easeOut(ms)Sets the timing curve for the current step to ease-out, with the specified duration (in milliseconds).
  • timing(ms, bezier)Sets a custom bezier timing curve for the current step, with the specified duration (in milliseconds).
  • fade(opacity)Adds an opacity filter to the current step, with the specified target opacity.
  • blur(strength)Adds a blur filter to the current step, with the specified strength (in pixels).
  • saturate(saturation)Adds a (de)saturation filter to the current step, with the specified strength.
  • origin(x, y)Sets the transformation origin for the current step.
  • offset(x?, y?)Adds a translation transformation to the current step.
  • scale(x?, y?)Adds a scale transformation to the current step.
  • rotate(deg)Adds a rotatation transformation to the current step.
  • skew(xDeg?, yDeg?)Adds a skew transformation to the current step.
  • align(ref?, origin?, refOrigin?, scaleX?, scaleY?)Adds an alignment transformation to the current step.
  • smoothOffset()Adds a smooth offset transition to the current step.
  • step()Returns a new instance, to add an animation step.
  • waitAsync()Returns a promise that’s resolved when the transformation has completed.

Related