WebGL2AnimationTiming

Encapsulates the values that specify the timing information for an animation used by WebGL2 animations.

Inheritance Hierarchy

WebGL2AnimationTiming

Remarks

This class is immutable and provides read-only access to the properties specified in the constructor, only. The class is modelled loosely after the set of CSS animation properties. However, it does not use animation names and does not support animation delays. Animation timing consists of an integral, non-negative number of animation cycles specified via the iterationCount property. Each cycle has the same duration. An easing function determines how progress happens in each cycle. The direction determines whether the animation plays forward, reverse, or alternates.

This is a convertible type that can be used with the following basic pattern in parameter lists, parameter objects or setters when annotated as such: duration easing-function iteration-count direction. This syntax is similar to the CSS shorthand for animation, but it does not support more than one iteration count or non-integral iteration counts, delays, fill-mode, and animation names. none can be used to specify no animation, explicitly. All parts are optional and the default is 1s linear 1 normal: A linear timing function that takes 1 second to go from zero to 1.

Examples

Examples of the shorthand notation

const beaconAnimation = webGL2GraphModelManager.createBeaconAnimation({
  type: WebGL2BeaconAnimationType.FADE,
  timing: '300ms ease-in-out infinite'
})

const dashAnimation1 = webGL2GraphModelManager.createDashAnimation({
  timing: '1s ease 11 reverse'
})

const dashAnimation2 = webGL2GraphModelManager.createDashAnimation({
  timing: '3s linear'
})

Type Details

yfiles module: view-webgl
yfiles-umd modules: view-webgl, view
Legacy UMD name: yfiles.view.WebGL2AnimationTiming

Constructors

WebGL2AnimationTiming

(duration?: TimeSpan, easing?: WebGL2AnimationEasing, iterationCount?: number, direction?: WebGL2AnimationDirection)

Creates a new immutable instance with the provided values.

ParametersOptions Overload

options - Object
A map of options to pass to the method.

duration - TimeSpan: The duration of a single cycle. Defaults to 1 second.
easing - WebGL2AnimationEasing: The easing to apply in each cycle. Defaults to LINEAR
iterationCount - number: The number of iterations. Defaults to 1.
direction - WebGL2AnimationDirection: The animation direction. Defaults to NORMAL.