ColorAnimation Class

Reference

Definition

Namespace:: Windows.UI.Xaml.Media.Animation

Important

Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Edit

Animates the value of a Color property between two target values using linear interpolation over a specified Duration.

Equivalent WinUI class: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.

public ref class ColorAnimation sealed : Timeline

/// [Windows.Foundation.Metadata.Activatable(65536, Windows.Foundation.UniversalApiContract)]
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class ColorAnimation final : Timeline

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class ColorAnimation final : Timeline

[Windows.Foundation.Metadata.Activatable(65536, typeof(Windows.Foundation.UniversalApiContract))]
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class ColorAnimation : Timeline

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class ColorAnimation : Timeline

Public NotInheritable Class ColorAnimation
Inherits Timeline

<ColorAnimation .../>

Inheritance: Object IInspectable DependencyObject Timeline ColorAnimation

Attributes: ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Windows requirements

Device family	Windows 10 (introduced in 10.0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (introduced in v1.0)

Examples

The following example shows how to use ColorAnimation to animate the background color of a StackPanel.

<StackPanel x:Name="myStackPanel" Background="Red"
  Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">

      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation Storyboard.TargetName="myStackPanel" 
        Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
        From="Red" To="Blue" Duration="0:0:4"/>

    </Storyboard>
  </StackPanel.Resources>
</StackPanel>

<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>

<StackPanel Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">
      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
        Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:4"/>
    </Storyboard>
  </StackPanel.Resources>

  <StackPanel.Background>
    <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
  </StackPanel.Background>

</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

Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"

Alternatively, you could explicitly create the SolidColorBrush, name it, and target its Color property directly. The example below shows how to create the same animation as the previous one except it uses direct property targeting.

<StackPanel Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">
      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
        Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:4"/>
    </Storyboard>
  </StackPanel.Resources>

  <StackPanel.Background>
    <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
  </StackPanel.Background>

</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

Use ColorAnimation to animate the property value of any dependency property that is of type Color.

Linear interpolation for a Color means that each of the ARGB values is treated as a byte and the interpolation is simply a mathematical operation. You get best results from color interpolation if at least one of the RGB components is the same or close to the same in both the starting value and ending value.

You usually need to use indirect property targeting in order to target a sub-property of another object that's the value of a property on the target. This is because very few properties that display color information in UI elements are actually of type Color. Most are instead of type Brush. To use ColorAnimation on UI elements, you typically are targeting the Color property of a SolidColorBrush that's the sub-property value. Syntax for this is shown in the XAML example in the "Examples" section. For more info on indirect property targeting and other storyboarded animation concepts, see Storyboarded animations or Property-path syntax.

A ColorAnimation typically has at least one of the From, By or To properties set, but never all three.

From only: The animation progresses from the value specified by the From property to the base value of the property being animated.
From and To: The animation progresses from the value specified by the From property to the value specified by the To property.
From and By: The animation progresses from the value specified by the From property to the value specified by the sum of the From and By properties.
To only: The animation progresses from the animated property's base value or a previous animation's output value to the value specified by the To property.
By only: The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the By property.

The From, By and To properties of a ColorAnimation aren't strictly a Color. Instead these are a Nullable for Color. The default value for these is null, not an uninitialized structure. That null value is how the animation system distinguishes that you haven't specifically set a value. Visual C++ component extensions (C++/CX) doesn't have a Nullable type, so it uses IReference instead.

Constructors

ColorAnimation()

Initializes a new instance of the ColorAnimation class.

Properties

AutoReverse	Gets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.Timeline.AutoReverse. (Inherited from Timeline)
BeginTime	Gets or sets the time at which this Timeline should begin. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.Timeline.BeginTime. (Inherited from Timeline)
By	Gets or sets the total amount by which the animation changes its starting value. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.By.
ByProperty	Identifies the By dependency property. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.ByProperty.
Dispatcher	Gets the CoreDispatcher that this object is associated with. The CoreDispatcher represents a facility that can access the DependencyObject on the UI thread even if the code is initiated by a non-UI thread. Equivalent WinUI property: Microsoft.UI.Xaml.DependencyObject.Dispatcher. (Inherited from DependencyObject)
Duration	Gets or sets the length of time for which this timeline plays, not counting repetitions. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.Timeline.Duration. (Inherited from Timeline)
EasingFunction	Gets or sets the easing function applied to this animation. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.EasingFunction.
EasingFunctionProperty	Identifies the EasingFunction dependency property. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.EasingFunctionProperty.
EnableDependentAnimation	Gets or sets a value that declares whether animated properties that are considered dependent animations should be permitted to use this animation declaration. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.EnableDependentAnimation.
EnableDependentAnimationProperty	Identifies the EnableDependentAnimation dependency property. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.EnableDependentAnimationProperty.
FillBehavior	Gets or sets a value that specifies how the animation behaves after it reaches the end of its active period. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.Timeline.FillBehavior. (Inherited from Timeline)
From	Gets or sets the animation's starting value. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.From.
FromProperty	Identifies the From dependency property. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.FromProperty.
RepeatBehavior	Gets or sets the repeating behavior of this timeline. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.Timeline.RepeatBehavior. (Inherited from Timeline)
SpeedRatio	Gets or sets the rate, relative to its parent, at which time progresses for this Timeline. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.Timeline.SpeedRatio. (Inherited from Timeline)
To	Gets or sets the animation's ending value. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.To.
ToProperty	Identifies the To dependency property. Equivalent WinUI property: Microsoft.UI.Xaml.Media.Animation.ColorAnimation.ToProperty.

Methods

ClearValue(DependencyProperty)	Clears the local value of a dependency property. Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.ClearValue. (Inherited from DependencyObject)
GetAnimationBaseValue(DependencyProperty)	Returns any base value established for a dependency property, which would apply in cases where an animation is not active. Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.GetAnimationBaseValue. (Inherited from DependencyObject)
GetValue(DependencyProperty)	Returns the current effective value of a dependency property from a DependencyObject. Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.GetValue. (Inherited from DependencyObject)
ReadLocalValue(DependencyProperty)	Returns the local value of a dependency property, if a local value is set. Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.ReadLocalValue. (Inherited from DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	Registers a notification function for listening to changes to a specific DependencyProperty on this DependencyObject instance. Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.RegisterPropertyChangedCallback. (Inherited from DependencyObject)
SetValue(DependencyProperty, Object)	Sets the local value of a dependency property on a DependencyObject. Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.SetValue. (Inherited from DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Cancels a change notification that was previously registered by calling RegisterPropertyChangedCallback. Equivalent WinUI method: Microsoft.UI.Xaml.DependencyObject.UnregisterPropertyChangedCallback. (Inherited from DependencyObject)

Events

Completed

Occurs when the Storyboard object has completed playing.

Equivalent WinUI event: Microsoft.UI.Xaml.Media.Animation.Timeline.Completed.

(Inherited from Timeline)

Applies to

ColorAnimation Class

Definition

Windows requirements

Examples

Remarks

Constructors

Properties

Methods

Events

Applies to

See also

Feedback

ColorAnimation Class

Is this page helpful?

Definition

Windows requirements

Examples

Remarks

Constructors

Properties

Methods

Events

Applies to

See also

Feedback