Transition
interface SimpleTransition {
readonly type: "DISSOLVE" | "SMART_ANIMATE" | "SCROLL_ANIMATE"
readonly easing: Easing
readonly duration: number
}
interface DirectionalTransition {
readonly type: "MOVE_IN" | "MOVE_OUT" | "PUSH" | "SLIDE_IN" | "SLIDE_OUT"
readonly direction: "LEFT" | "RIGHT" | "TOP" | "BOTTOM"
readonly matchLayers: boolean
readonly easing: Easing
readonly duration: number
}
type Transition = SimpleTransition | DirectionalTransition
interface Easing {
readonly type: "EASE_IN" | "EASE_OUT" | "EASE_IN_AND_OUT" | "LINEAR" | "EASE_IN_BACK" | "EASE_OUT_BACK" | "EASE_IN_AND_OUT_BACK" | "CUSTOM_CUBIC_BEZIER" | "GENTLE" | "QUICK" | "BOUNCY" | "SLOW" | "CUSTOM_SPRING"
readonly easingFunctionCubicBezier?: { x1: number, y1: number, x2: number, y2: number }
readonly easingFunctionSpring?: { mass: number, stiffness: number, damping: number, initialVelocity: number }
}
A prototyping Transition
describes an animation used when navigating in a prototype.
When the transition type
is "SMART_ANIMATE"
or when matchLayers
is true
, then the transition will be performed using smart animate, which attempts to match corresponding layers an interpolate other properties during the animation.
When the easing type
is "CUSTOM_CUBIC_BEZIER"
, then easingFunctionCubicBezier
will describe the points that define the cubic bezier easing curve. The values x1, y1, x2, y2
are the same as shown in the UI.
When the easing type
is "CUSTOM_SPRING"
, then easingFunctionSpring
will describe parameters for the spring formula. These parameters are mass
, stiffness
and damping
.