ColorAnimation 類別

定義

public ref class ColorAnimation sealed : Timeline

/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 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.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class ColorAnimation : Timeline

Public NotInheritable Class ColorAnimation
Inherits Timeline

<ColorAnimation .../>

繼承

Object Platform::Object IInspectable DependencyObject Timeline ColorAnimation

屬性

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

範例

以下範例展示了如何使用 ColorAnimation 來動畫 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();
}

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

或者，你也可以明確建立 SolidColorBrush，命名它，並直接鎖定它的 Color 屬性。 以下範例展示了如何製作與前一個相同的動畫，但使用直接屬性目標。

<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();
}

備註

使用 ColorAnimation 來動畫任何類型為 Color 的相依屬性的屬性值。

色彩的線性插 值意味著每個ARGB 值都被視為一個位元組，插值僅為數學運算。 如果起始值和結束值至少有一個 RGB 成分相同或接近，色彩插值效果會最好。

通常你需要使用間接屬性目標來鎖定另一個物件的子屬性，該子屬性是該物件屬性在目標上的價值。 這是因為在 UI 元素中顯示顏色資訊的屬性中，實際上很少有屬性是 Color。 大多數是用筆刷代替字 體。 要在 UI 元素上使用 ColorAnimation，通常你會鎖定 SolidColorBrush 的 Color 屬性，也就是子屬性值。 此語法可在 XAML 範例的「範例」部分展示。 欲了解更多關於間接屬性目標及其他分鏡動畫概念的資訊，請參閱 分鏡動畫 或 屬性路徑語法。

ColorAnimation 通常至少設定一個 From、 By 或 To 屬性，但不會同時具備三個屬性。

• 僅來自： 動畫會從 From 屬性指定的值進展到被動畫屬性的基值。
• 發件與收件人： 動畫會從 From 屬性指定的值進展到 To 屬性指定的值。
• 作者與作者： 動畫會從 From 屬性指定的值進展到由 From 屬性與 By 屬性總和所指定的值。
• 只給： 動畫會從被動畫屬性的基底值或先前動畫的輸出值，逐步推進到 To 屬性指定的值。
• 僅由： 動畫會從被動畫屬性的基值或先前動畫的輸出值，逐步累積到該值與 By 屬性指定的值之總和。

ColorAnimation 的 From、 By 和 To 屬性並不嚴格來說是 顏色。 取而代之的是顏色的 Nullable。 這些的預設值為 null，而非未初始化的結構。 這個 空 值就是動畫系統區分你沒有特別設定值的方式。 C++ 沒有 Nullable 型別，所以改用 IReference 。

另請參閱

• Timeline
• SolidColorBrush
• LinearGradientBrush
• Colors
• 分鏡腳本動畫
• XAML 動畫範例
• Color
• Color