SplineColorKeyFrame
SplineColorKeyFrame
SplineColorKeyFrame
SplineColorKeyFrame
Class
Definition
public : sealed class SplineColorKeyFrame : ColorKeyFrame, ISplineColorKeyFramepublic sealed class SplineColorKeyFrame : ColorKeyFrame, ISplineColorKeyFramePublic NotInheritable Class SplineColorKeyFrame Inherits ColorKeyFrame Implements ISplineColorKeyFrame// This API is not available in Javascript.
<SplineColorKeyFrame .../>
- Inheritance
-
SplineColorKeyFrameSplineColorKeyFrameSplineColorKeyFrameSplineColorKeyFrame
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited methods
Inherited properties
Examples
This XAML example uses the ColorAnimationUsingKeyFrames class to animate the Background property of a StackPanel. This animation uses three key frames in the following manner:
- During the first two seconds, LinearColorKeyFrame gradually changes the color from green to red. Linear key frames like LinearColorKeyFrame create a smooth linear transition between values.
- During the end of the next half second, DiscreteColorKeyFrame quickly changes the color from red to yellow. Discrete key frames like DiscreteColorKeyFrame create sudden changes between values; the animation occurs quickly and has no interpolation between values at all.
- During the final two seconds, SplineColorKeyFrame changes the color again, this time from yellow back to green. Spline key frames like SplineColorKeyFrame create a variable transition between values according to the values of the KeySpline property. A KeySpline provides a way to alter the relationship of time versus value during the animation duration to be nonlinear, and in particular the relationship can be a curve that would be difficult to produce with individual key frames. In this example, the change in color begins slowly and speeds up exponentially toward the end of the time segment.
<StackPanel x:Name="myStackPanel" Background="Red"
Loaded="Start_Animation">
<StackPanel.Resources>
<Storyboard x:Name="colorStoryboard">
<ColorAnimationUsingKeyFrames Storyboard.TargetName="myStackPanel"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
a smooth, linear animation between values. -->
<LinearColorKeyFrame Value="Blue" KeyTime="00:00:02" />
<!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a
sudden jump between values. -->
<DiscreteColorKeyFrame Value="Yellow" KeyTime="00:00:2.5" />
<!-- In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame
creates a variable transition between values depending on the KeySpline property. In this example,
the animation starts off slow but toward the end of the time segment, it speeds up exponentially.-->
<SplineColorKeyFrame Value="Green" KeyTime="00:00:4.5" KeySpline="0.6,0.0 0.9,0.00" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
// Start the animation when the object loads
private void Start_Animation(object sender, RoutedEventArgs e)
{
colorStoryboard.Begin();
}
' Start the animation when the object loads
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
colorStoryboard.Begin()
End Sub
Remarks
Key-frame animations permit more than one target value that is reached at a point along the animation timeline. In other words each key frame can specify a different intermediate value, and the last key frame reached is the final animation value. By specifying multiple values to animate, you can make more complex animations. You can mix discrete, linear, and spline keyframes in the same keyframe collection.
For more info on how to use key-frame animations, see Key-frame animations and easing function animations.
Constructors
SplineColorKeyFrame() SplineColorKeyFrame() SplineColorKeyFrame() SplineColorKeyFrame()
Initializes a new instance of the SplineColorKeyFrame class.
public : SplineColorKeyFrame()public SplineColorKeyFrame()Public Sub New()// This API is not available in Javascript.
Properties
KeySpline KeySpline KeySpline KeySpline
Gets or sets the two control points that define animation progress for this key frame.
public : KeySpline KeySpline { get; set; }public KeySpline KeySpline { get; set; }Public ReadWrite Property KeySpline As KeySpline// This API is not available in Javascript.
<SplineColorKeyFrame KeySpline="keySplineValue"/>
KeySplineProperty KeySplineProperty KeySplineProperty KeySplineProperty
Identifies the KeySpline dependency property.
public : static DependencyProperty KeySplineProperty { get; }public static DependencyProperty KeySplineProperty { get; }Public Static ReadOnly Property KeySplineProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the KeySpline dependency property.