KeySpline
Microsoft Silverlight will reach end of support after October 2021. Learn more.
Defines animation progress in a spline key frame.
<object property="keySplines" .../>
object.property="keySplines"
keySplines Grammar
cp1x,cp1y cp2x,cp2y
Term |
Definition |
|---|---|
cp1x |
The x-coordinate of the first control point. |
cp1y |
The y-coordinate of the first control point. |
cp2x |
The x-coordinate of the second control point. |
cp2y |
The y-coordinate of the second control point. |
The delimiter can be either a comma or a space; these delimiters are interchangeable. The syntax shown here is the most conventional usage, with commas between x,y and spaces between point pairs.
The values for each component of a KeySpline expressed in a string should be between 0 and 1. Each control point influences the shape of the conceptual curve that controls the rate of a splined animation, changing the linear progression between 0,0 and 1,1 that would occur if there were no control points set.
The grammar for keySplines must specify exactly two control points. If you only require one control point for the curve, you can repeat the same control point.
Remarks
Properties that take a KeySpline object use a string type conversion syntax as shown in the keySplines Grammar section.
It is often helpful to graph or otherwise visualize the spline pattern you declare. For example, the following illustration shows the timeline graph for a KeySpline value of "0,1 1,0". In the graph, x is the time dimension, and y is the value delta dimension. Therefore, this animation will rapidly change a value at first, slowly change a value in the middle of its duration, and then accelerate the value change again at the end.
A key spline with control points (0.25, 0.5) and (0.75, 1.0)
.png "Shows control points for a spline.")
KeySpline is exposed as an object to the object model (you can obtain a KeySpline through relevant properties), but you cannot set any of the properties of KeySpline at run time. "ControlPoint1" and "ControlPoint2" of a KeySpline are not accessible in the JavaScript API for Silverlight.
For more information, see the following animation objects: SplineColorKeyFrame, SplineDoubleKeyFrame, and SplinePointKeyFrame.
For more information on basic concepts, see Key-Frame Animations. Note that the Key-Frame Animations topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.