Commonly used functions for calculating the current value to apply in the middle of a transformation based on the start and end values defined in the transformation.
Properties:
| Name | Type | Description |
|---|---|---|
Color |
function | Calculates a color in between the colors specified as start and end values.
Expected start / end values: CSS color style value strings, specified in any of hex, rgb, rgba, hsl, or hsla format (start and end values must be in the same format as each other). Returns: A CSS color style value string in the same format as the start and end values. |
Discrete |
function | Used when output needed should jump directly from one value to another
rather than gradually moving from the start value to the end value.
Expected start / end values: (Any type) Returns: Either the start value (if the transformation is not yet complete) or the end value (if the transformation is complete). If the transformation has a property called round whose value is X the value will be treated as numeric
and the return value will be rounded to the nearest multiple of X. |
Linear |
function | Calculates a value based on linear interpolation between the start and end values.
Expected start / end values: Numeric Returns: Numeric. If the transformation has a property called round whose value is X the value will be treated as numeric
and the return value will be rounded to the nearest multiple of X.
Note: This should not be confused with the ConstantRate easing function. The easing function is used to determine what fraction of the transformation is complete (i.e., it affects the rate of the transformation), whereas the selected calculator function determines the method by which the values are calculated (i.e., numeric interpolation vs. discrete values, vs. specialized calculations such as determining what color is partway between two other colors). |
Rotational |
function | Calculates a set of coordinates resulting from rotational motion.
Expected start / end values: Object, in the form { centerX: xCoordinate, centerY: yCoordinate, radius: r, angle: angleRadians, offsetX: xDistance, offsetY: yDistance }.These values define the center point around which the rotation occurs, the distance from that point, the angle (in radians), and an offset added to the resulting point. (The offset is useful, for instance, for making an object's centerpoint orbit the rotational center rather than its upper left corner being the anchor point for the rotational movement.) Each of these values can be animated separately. For instance, giving different start and end values for angle results in
rotational movement, and also giving different start and end values for radius would result in spiraling movement.
Returns: Numeric Array determined from calculating the current rotational position and converting it to resulting coordinates in the form [left, top]. |
- Source: