Instantiates four paths including two axes, a circular arc, and a cubic spline. Constructs a rendering of each path along with a colored dot color that travels back and forth along the path in a given duration each way. SlowInSlowOut and FastInFastOut interpolation methods are used for going forward and backward, respectively.
This sample also demonstrates the pixel coordinate system by displaying the X and Y coordinates in terms of pixels. Also, the parameters for all paths are specified in terms of pixel coordinates. Notice that in Pixel Construction mode the positive Y-axis goes downwards, which is consistent with the HTML coordinate system.
The sample also demonstrates the construction of a freeform smooth path as a cubic spline. The sample uses a generally useful utility function, SimpleSpline, which takes a list of control points, automatically constructs a suitable knot vector, and returns the spline path.
The moving points are first class values in DirectAnimation, and can, therefore, be returned as parameters from functions. Here they are used to construct time-varying triangles. These triangles are partially opaque, as can be seen where they overlap. Also, the animation overlays the HTML text, which means the transparent triangles are composed with the underlying HTML. Set "z-index:-1" for the DA control, whereby the animation is rendered behind the text, and notice the subtle difference in the way the triangles and text interact.