figureone 0.15.10 → 1.0.0

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/PulseTransformAnimationStep.d.ts

@@ -0,0 +1,52 @@
+import { Transform } from '../../../../tools/g2';
+import type { TypeParsablePoint, TypeParsableTransform } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+import type { OBJ_TranslationPath } from '../../../../tools/geometry/Path';
+export type OBJ_PulseTransformAnimationStep = {
+    start?: Array<Transform>;
+    target?: Array<Transform>;
+    path?: OBJ_TranslationPath;
+    rotDirection: 0 | 1 | -1 | 2;
+    clipRotationTo: '0to360' | '-180to180' | null;
+    velocity?: Transform | number | {
+        position?: TypeParsablePoint | number;
+        translation?: TypeParsablePoint | number;
+        rotation?: number;
+        scale?: TypeParsablePoint | number;
+        transform?: TypeParsableTransform;
+    } | null;
+    maxDuration?: number;
+    zeroDurationThreshold?: number;
+} & OBJ_ElementAnimationStep;
+export default class PulseTransformAnimationStep extends ElementAnimationStep {
+    transform: {
+        start: Array<Transform>;
+        delta: Array<Transform>;
+        target: Array<Transform>;
+        rotDirection: 0 | 1 | -1 | 2;
+        path: OBJ_TranslationPath;
+        velocity: Transform | number | {
+            position?: TypeParsablePoint | number;
+            translation?: TypeParsablePoint | number;
+            rotation?: number;
+            scale?: TypeParsablePoint | number;
+            transform?: TypeParsableTransform;
+        } | null | undefined;
+        clipRotationTo: '0to360' | '-180to180' | null;
+        maxDuration: number | null | undefined;
+        zeroDurationThreshold: number;
+    };
+    constructor(...optionsIn: Array<OBJ_PulseTransformAnimationStep>);
+    spread(transforms: Array<Transform>, toNum: number): Transform[];
+    setStartAndTarget(): void;
+    calculateStartTargetDelta(): void;
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    getVelocityTransform(): Transform;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): PulseTransformAnimationStep;
+}

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/RotationAnimationStep.d.ts

@@ -0,0 +1,119 @@
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+/**
+ * {@link RotationAnimationStep} step options object.
+ *
+ * The {@link RotationAnimationStep} animates the rotation value of a the first
+ * rotation component in a {@link Transform}.
+ *
+ * To rotate from a `start` rotation to a `target` rotation use the
+ * `start`, `delta` and/or `target` properties.
+ *
+ * If `start` is not defined, the current rotation angle (when the animation
+ * is started) will be used as `start`.
+ *
+ * Either `target` or `delta` (from start) can be used to define the target.
+ *
+ *
+ * The animation can either move to the target with a `duration`, or the
+ * `duration` can be determined by a `velocity`.
+ *
+ * Rotation animation targets can also be created with `velocity`, `start` and
+ * `duration`. In this case, the rotation angles will grow with `velocity`. If
+ * `duration` is null, then rotation duration will continue indefinitely until
+ * the animation is cancelled.
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {number} [start] start rotation - current
+ * rotation used if undefined
+ * @property {number} [target] target rotation
+ * @property {number} [delta] a delta rotation that can be
+ * used to define `target` if `target` is undefined
+ * @property {null | number} [velocity] velocity of
+ * rotation can either define the `duration` of a rotation if `target` or
+ * `delta` is defined, or can define the `target` of a rotation if `duration`
+ * is defined. If `duration` is null, then velocity determines the change in
+ * rotation over time (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ *
+ * @see {@link RotationAnimationStep} for description and examples
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_RotationAnimationStep = {
+    start?: number;
+    target?: number;
+    delta?: number;
+    velocity?: number | null;
+    maxDuration?: number | null;
+} & OBJ_ElementAnimationStep;
+/**
+ * Rotation animation step
+ *
+ * ![](./apiassets/rotation_animation.gif)
+ *
+ * The rotation animation step animates the first {@link Rotation} transform
+ * in the {@link FigureElement}'s {@link Transform}.
+ *
+ * By default, the rotation will start with the element's current rotation.
+ *
+ * Use either `delta` or `target` to define it's end point
+ *
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_RotationAnimationStep} options
+ *
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .rotation({ target: Math.PI, duration: 2 })
+ *   .start();
+ *
+ * @example
+ * // Using velocity
+ * p.animations.new()
+ *   .rotation({ target: Math.PI, velocity: Math.PI / 2 })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.rotation({ target: Math.PI, duration: 2 });
+ * const step2 = new Fig.Animation.RotationAnimationStep({
+ *   element: p,
+ *   target: 0,
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class RotationAnimationStep extends ElementAnimationStep {
+    rotation: {
+        start: number;
+        delta: number;
+        target: number;
+        velocity: number;
+        maxDuration: number | null | undefined;
+        clipTo: '0to360' | '-180to180' | null;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_RotationAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): RotationAnimationStep;
+}

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/ScaleAnimationStep.d.ts

@@ -0,0 +1,93 @@
+import { Point } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+/**
+ * {@link ScaleAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {TypeParsablePoint | number} [start]
+ * @property {TypeParsablePoint | number} [target]
+ * @property {TypeParsablePoint | number} [delta]
+ * @property {null | TypeParsablePoint | number} [velocity] velocity of scale
+ * overrides `duration` - `null` to use `duration` (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScaleAnimationStep = {
+    start?: Point | number;
+    target?: Point | number;
+    delta?: Point | number;
+    velocity?: Point | number;
+    maxDuration?: number | null | undefined;
+} & OBJ_ElementAnimationStep;
+/**
+ * Scale Animation Step
+ *
+ * ![](./apiassets/scale_animation.gif)
+ *
+ * The scale animation step animates the first {@link Scale} transform
+ * in the {@link FigureElement}'s {@link Transform}.
+ *
+ * By default, the scale will start with the element's current scale.
+ *
+ * Use either `delta` or `target` to define it's end point.
+ *
+ * Scale can be defined as either a point or number. If number,
+ * both x and y scale terms will be the same.
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_ScaleAnimationStep} options
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .scale({ target: 2, duration: 2 })
+ *   .start();
+ *
+ * @example
+ * // Using velocity
+ * p.animations.new()
+ *   .scale({ target: 2, velocity: 0.5 })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.scale({ target: 1.5, duration: 2 });
+ * const step2 = new Fig.Animation.ScaleAnimationStep({
+ *   element: p,
+ *   target: 1,
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class ScaleAnimationStep extends ElementAnimationStep {
+    scale: {
+        start: Point | null | undefined;
+        delta: Point | null | undefined;
+        target: Point | null | undefined;
+        velocity: Point | null | undefined;
+        maxDuration: number | null | undefined;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_ScaleAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): ScaleAnimationStep;
+}

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/ScenarioAnimationStep.d.ts

@@ -0,0 +1,204 @@
+import { Transform } from '../../../../tools/g2';
+import type { OBJ_TranslationPath, TypeParsableTransform, TypeParsablePoint } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep, AnimationProgression } from '../ElementAnimationStep';
+import { ParallelAnimationStep } from '../ParallelAnimationStep';
+import type { FigureElement, OBJ_Scenario } from '../../../Element';
+import type { AnimationStartTime } from '../../AnimationManager';
+import type { TypeColor } from '../../../../tools/types';
+/**
+ * Transform, color and visbility scenario definition
+ *
+ * `translation` will overwirte `position`, and `translation, `position`,
+ * rotation` and `scale` overwrite the first equivalent transforms in
+ * `transform`
+ *
+ * @property {TypeParsablePoint} [position]
+ * @property {TypeParsablePoint} [translation]
+ * @property {TypeParsablePoint | number} [scale]
+ * @property {number} [rotation]
+ * @property {TypeParsableTransform} [transform]
+ * @property {TypeColor} [color]
+ * @property {number} [opacity]
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScenarioVelocity = {
+    position?: TypeParsablePoint | number;
+    translation?: TypeParsablePoint | number;
+    rotation?: number;
+    scale?: TypeParsablePoint | number;
+    transform?: TypeParsableTransform;
+    color?: number;
+    opacity?: number;
+};
+/**
+ * {@link ScenarioAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {string | OBJ_Scenario} [start]
+ * @property {string | OBJ_Scenario} [target]
+ * @property {null | string | OBJ_ScenarioVelocity} [velocity] velocity
+ * will override duration with a calculated duration based on
+ * the `start`, `target` and `velocity`. If `null` is used
+ * then `duration` will not be overriden. Any scenario velocity elements that
+ * are undefined will default to 1 (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @property {number} [zeroDurationThreshold] value considered 0 to stop
+ * animation - this is useful when numbers get very small and rounding problems
+ * with javascripts floating point implementation arise
+ * @property {OBJ_TranslationPath} [path] translation path style and options
+ * (`{ style: 'linear' }`)
+ * @property {0 | 1 | -1 | 2} [rotDirection] where `0` is quickest direction,
+ * `1` is positive of CCW direction, `-1` is negative of CW direction and `2` is
+ * whichever direction doesn't pass through angle 0.
+ * @property {'0to360' | '-180to180' | null} [clipRotationTo]
+ * @property {'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression} [progression]
+ * (`'easeinout'`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScenarioAnimationStep = {
+    start?: string | OBJ_Scenario;
+    target?: string | OBJ_Scenario;
+    velocity?: OBJ_ScenarioVelocity;
+    maxDuration?: number;
+    zeroDurationThreshold?: number;
+    allDurationsSame?: boolean;
+    path?: OBJ_TranslationPath;
+    rotDirection: 0 | 1 | -1 | 2;
+    clipRotationTo: '0to360' | '-180to180' | null;
+    progression: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+} & OBJ_ElementAnimationStep;
+/**
+ * {@link ScenarioAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {string} [target]
+ * @property {null | string | OBJ_ScenarioVelocity} [velocity] velocity
+ * will override duration with a calculated duration based on
+ * the `start`, `target` and `velocity`. If `null` is used
+ * then `duration` will not be overriden. Any scenario velocity elements that
+ * are undefined will default to 1 (`null`)
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @property {number} [zeroDurationThreshold] value considered 0 to stop
+ * animation - this is useful when numbers get very small and rounding problems
+ * with javascripts floating point implementation arise
+ * @property {OBJ_TranslationPath} [path] translation path style and options
+ * (`{ style: 'linear' }`)
+ * @property {0 | 1 | -1 | 2} [rotDirection] where `0` is quickest direction,
+ * `1` is positive of CCW direction, `-1` is negative of CW direction and `2` is
+ * whichever direction doesn't pass through angle 0.
+ * @property {'0to360' | '-180to180' | null} [clipRotationTo]
+ * @property {'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression} [progression]
+ * (`'easeinout'`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ScenariosAnimationStep = {
+    target?: string;
+    velocity?: OBJ_ScenarioVelocity;
+    maxDuration?: number;
+    zeroDurationThreshold?: number;
+    allDurationsSame?: boolean;
+    path?: OBJ_TranslationPath;
+    rotDirection: 0 | 1 | -1 | 2;
+    clipRotationTo: '0to360' | '-180to180' | null;
+    progression: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+} & OBJ_ElementAnimationStep;
+/**
+ * Scenario Animation Step
+ *
+ * ![](./apiassets/scenario_animation.gif)
+ *
+ * A scenario defines an element's transform and color and can be used to make
+ * code more readable and reusable.
+ *
+ * By default, the scenario will start with the element's current transform and
+ * color.
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_ScenarioAnimationStep} options
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // NOTE - use these scenario definitions for all examples below
+ * p.scenarios['center'] = { position: [0, 0], scale: [1, 1], color: [1, 0, 0, 1] };
+ * p.scenarios['right'] = { position: [1, 0], scale: [2, 1], color: [0, 0, 1, 1] };
+ * p.scenarios['bottom'] = { position: [0, -0.5], scale: [0.5, 1], color: [0, 0.5, 0, 1] };
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .scenario({ target: 'right', duration: 2 })
+ *   .scenario({ target: 'bottom', duration: 2 })
+ *   .scenario({ target: 'center', duration: 2 })
+ *   .start();
+ *
+ * @example
+ * // Using velocity
+ * p.animations.new()
+ *   .scenario({
+ *     target: 'right',
+ *     velocity: { position: 0.5, scale: 0.2 },
+ *   })
+ *   .scenario({ target: 'bottom', velocity: { position: 0.5 } })
+ *   .scenario({ target: 'center', velocity: { color: 0.2 } })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.scenario({
+ *   target: 'right',
+ *   duration: 2,
+ * });
+ * const step2 = new Fig.Animation.ScenarioAnimationStep({
+ *   element: p,
+ *   target: 'bottom',
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class ScenarioAnimationStep extends ParallelAnimationStep {
+    element: FigureElement | null | undefined;
+    scenario: {
+        start: (string | OBJ_Scenario) | null | undefined;
+        target: (string | OBJ_Scenario) | null | undefined;
+        rotDirection: 0 | 1 | -1 | 2;
+        path: OBJ_TranslationPath;
+        velocity: OBJ_ScenarioVelocity | null | undefined;
+        maxDuration: number | null | undefined;
+        allDurationsSame: boolean;
+        zeroDurationThreshold: number;
+        clipRotationTo: '0to360' | '-180to180' | null;
+        progression: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_ScenarioAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    getDuration(start: {
+        transform?: Transform;
+        color?: TypeColor;
+        isShown?: boolean;
+        opacity?: number;
+    }, target: {
+        transform?: Transform;
+        color?: TypeColor;
+        isShown?: boolean;
+    }): number[];
+    start(startTime?: AnimationStartTime): void;
+    _dup(): ScenarioAnimationStep;
+}

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep/TransformAnimationStep.d.ts

@@ -0,0 +1,163 @@
+/**
+* Animations are simply interpolating each value within a rotation definition
+ * independently (either between a `start` and `target` or from a `start` with
+ * `velocity`). Therefore, animating any values that belong to vectors
+ * (direction ('dir' or 'rd'), change of basis ('rbasis' or 'rb'), or the axis
+ * of axis/angle) may result in unexpected animations. For example, if animating
+ * a rotation direction from [1, 0, 0] to [-1, 0, 0] it might be expected that
+ * a π radians rotation would occur. Instead, it will look like no rotation
+ * will have started, then a π rotation will happen in a single frame, and then
+ * it will look stationary again. This is because only the x component of the
+ * direction vector will change each animation frame. As a rotation direciton
+ * that is [0.5, 0, 0] is the same as [1, 0, 0], then for half the animation it
+ * will look like nothing is changing. When the x component cross from the 0
+ * point, the element's rotation will instantly flip. Then for the second have
+ * of the rotation as the x component gets more negative it will once again
+ * look stationary.
+ *
+ * If wanting to animate a direction vector, use {@link directionToAxisAngle}
+ * or {@link angleFromVectors} and then use a axis/angle rotation
+ * keeping the axis constant. If wanting to animate a change of basis rotation,
+ * then use a {@link CustomAnimationStep} to manage how to change the basis
+ * vectors over time.
+ */
+import { Transform } from '../../../../tools/g2';
+import type { OBJ_TranslationPath } from '../../../../tools/g2';
+import type { OBJ_ElementAnimationStep } from '../ElementAnimationStep';
+import ElementAnimationStep from '../ElementAnimationStep';
+import type { AnimationStartTime } from '../../AnimationManager';
+/**
+ * {@link TransformAnimationStep} options object
+ *
+ * @extends OBJ_ElementAnimationStep
+ *
+ * @property {TypeParsableTransform} [start]
+ * @property {TypeParsableTransform} [target]
+ * @property {TypeParsableTransform} [delta]
+ * @property {null | TypeParsableTransform} [velocity] velocity of
+ * transform overrides `duration` - `null` to use `duration` (`null`)
+ * @property {OBJ_TranslationPath} [path] translation path style and options
+ * (`{ style: 'linear' }`)
+ * @property {0 | 1 | -1 | 2} [rotDirection] where `0` is quickest direction,
+ * `1` is positive of CCW direction, `-1` is negative of CW direction and `2` is
+ * whichever direction doesn't pass through angle 0 (`0`).
+ * @property {'0to360' | '-180to180' | null} [clipRotationTo]
+ * @property {number | null} [maxDuration] maximum duration to clip animation
+ * to where `null` is unlimited (`null`)
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_TransformAnimationStep = {
+    start?: Transform;
+    target?: Transform;
+    delta?: Transform;
+    path?: OBJ_TranslationPath;
+    rotDirection?: 0 | 1 | -1 | 2;
+    clipRotationTo?: '0to360' | '-180to180' | null;
+    velocity?: Transform | number | null | undefined;
+    maxDuration?: number;
+} & OBJ_ElementAnimationStep;
+/**
+ * Transform Animation Step
+ *
+ * ![](./apiassets/transform_animation.gif)
+ *
+ * By default, the transform will start with the element's current transform.
+ *
+ * A {@link Transform} chains many transform links where each link might be
+ * a {@link Rotation}, {@link Scale} or {@link Translation} transform.
+ *
+ * `start`, `target` and `delta` should have the same order of transform links
+ * as the `element`'s transform.
+ *
+ * The {@link TransformAnimationStep} will animate each of these links with the
+ * same duration. If `velocity` is used to calculate the duration, then the link
+ * with the longest duration will define the duration of the animation.
+ * `velocity` can either be a transform with the same order of transform links
+ * as the `element` or it can be a constant value, which will be applied to
+ * all transform links. `velocity` cannot be 0.
+ *
+ * Use either `delta` or `target` to define it's end point of the animation.
+ *
+ * @extends ElementAnimationStep
+ * @param {OBJ_TransformAnimationStep} options
+ *
+ * @see To test examples, append them to the
+ * <a href="#animation-boilerplate">boilerplate</a>
+ *
+ * @example
+ * // Using duration
+ * p.animations.new()
+ *   .transform({
+ *     target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
+ *     duration: 2,
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Using velocity as a transform
+ * p.animations.new()
+ *   .transform({
+ *     target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
+ *     velocity: new Fig.Transform().scale(0.5, 0.5).rotate(0.25).translate(0.5, 0.5),
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Using velocity as a number
+ * p.animations.new()
+ *   .transform({
+ *     target: new Fig.Transform().scale(2, 2).rotate(0.5).translate(1, 0),
+ *     velocity: 0.5,
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Using TypeParsableTransform as transform definition
+ * p.animations.new()
+ *   .transform({
+ *     target: [['s', 1.5, 1.5], ['r', 0.5], ['t', 1, 0]],
+ *     duration: 2,
+ *   })
+ *   .start();
+ *
+ * @example
+ * // Different ways to create a stand-alone step
+ * const step1 = p.animations.transform({
+ *   target: [['s', 1.5, 1.5], ['r', 1], ['t', 1, 0]],
+ *   duration: 2,
+ * });
+ * const step2 = new Fig.Animation.TransformAnimationStep({
+ *   element: p,
+ *   target: [['s', 1, 1], ['r', 0], ['t', 0, 0]],
+ *   duration: 2,
+ * });
+ *
+ * p.animations.new()
+ *   .then(step1)
+ *   .then(step2)
+ *   .start();
+ * @group Animation
+ */
+export default class TransformAnimationStep extends ElementAnimationStep {
+    transform: {
+        start: Transform;
+        delta: Transform;
+        target: Transform;
+        rotDirection: 0 | 1 | -1 | 2;
+        path: OBJ_TranslationPath;
+        velocity: Transform | number | null | undefined;
+        clipRotationTo: '0to360' | '-180to180' | null;
+        maxDuration: number | null | undefined;
+    };
+    /**
+     * @hideconstructor
+     */
+    constructor(...optionsIn: Array<OBJ_TransformAnimationStep>);
+    _getStateProperties(): string[];
+    _getStateName(): string;
+    start(startTime?: AnimationStartTime | null): void;
+    setFrame(deltaTime: number): void;
+    setToEnd(): void;
+    _dup(): TransformAnimationStep;
+}

package/types/js/figure/Animation/AnimationStep/ElementAnimationStep.d.ts

@@ -0,0 +1,56 @@
+import type { OBJ_AnimationStep } from '../AnimationStep';
+import AnimationStep from '../AnimationStep';
+import type { FigureElement } from '../../Element';
+import type { AnimationStartTime } from '../AnimationManager';
+/**
+ * Animation progression function.
+ *
+ * As the animation time progresses, a percentage of the total animation
+ * duration will be passed to this function.
+ *
+ * This function then calculates and returns the percent progress of the
+ * animation.
+ *
+ * This function can be used to make non-linear progressions of an animation.
+ * For instance, it could be used to create a progression that is slowed
+ * at the start or end of the animation.
+ *
+ * @param {number} percent percentage of duration
+ * @return {number} percent of animation complete
+ * @group Misc Animation
+ */
+export type AnimationProgression = (percent: number) => number;
+/**
+ * {@link ElementAnimationStep} options object
+ *
+ * @extends OBJ_AnimationStep
+ * @property {FigureElement} [element]
+ * @property {'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression} [progression]
+ * how the animation progresses - defaults to `linear` for color, opacity and
+ * custom animations and `easeinout` for others
+ * @interface
+ * @group Misc Animation
+ */
+export type OBJ_ElementAnimationStep = {
+    element?: FigureElement;
+    type?: 'transform' | 'color' | 'custom' | 'position' | 'rotation' | 'scale' | 'opacity';
+    progression?: 'linear' | 'easeinout' | 'easein' | 'easeout' | AnimationProgression;
+} & OBJ_AnimationStep;
+/**
+ * Animation Step tied to an element
+ *
+ * Default values for the animation step will then come from this element.
+ *
+ * @extends AnimationStep
+ * @group Misc Animation
+ */
+export default class ElementAnimationStep extends AnimationStep {
+    type: 'transform' | 'color' | 'custom' | 'position' | 'setPosition' | 'opacity';
+    progression: ((percent: number, invert?: boolean) => number) | string;
+    constructor(optionsIn?: OBJ_ElementAnimationStep);
+    fnExec(idOrFn: string | Function | null, ...args: any): any;
+    _getStateProperties(): string[];
+    getPercentComplete(percentTime: number): any;
+    start(startTime?: AnimationStartTime | null): void;
+    _dup(): ElementAnimationStep;
+}