ColorAnimation Classe

Définition

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

Héritage

Object Platform::Object IInspectable DependencyObject Timeline ColorAnimation

Attributs

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Exemples

L’exemple suivant montre comment utiliser ColorAnimation pour animer la couleur d’arrière-plan d’un 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)"

Vous pouvez également créer explicitement solidColorBrush, le nommer et cibler directement sa propriété Color . L’exemple ci-dessous montre comment créer la même animation que la précédente, sauf qu’elle utilise le ciblage de propriété directe.

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

Remarques

Utilisez ColorAnimation pour animer la valeur de propriété de toute propriété de dépendance de type Color.

L’interpolation linéaire pour une couleur signifie que chacune des valeurs ARVB est traitée comme un octet et que l’interpolation est simplement une opération mathématique. Vous obtenez les meilleurs résultats de l’interpolation de couleur si au moins un des composants RVB est identique ou proche du même dans la valeur de départ et la valeur de fin.

Vous devez généralement utiliser le ciblage de propriété indirect pour cibler une sous-propriété d’un autre objet qui est la valeur d’une propriété sur la cible. Cela est dû au fait que très peu de propriétés qui affichent des informations de couleur dans les éléments d’interface utilisateur sont en fait de type Color. La plupart sont au lieu de type Pinceau. Pour utiliser ColorAnimation sur les éléments d’interface utilisateur, vous ciblez généralement la propriété Color d’un SolidColorBrush qui est la valeur de sous-propriété. La syntaxe de ce paramètre est illustrée dans l’exemple XAML de la section « Exemples ». Pour plus d’informations sur le ciblage de propriétés indirectes et d’autres concepts d’animation storyboarded, consultez la syntaxe des animations storyboarded ou property-path.

Une ColorAnimation a généralement au moins l’une des propriétés From, By ou To définies, mais jamais les trois.

• À partir de seulement : L’animation passe de la valeur spécifiée par la propriété From à la valeur de base de la propriété animée.
• De et vers : L’animation passe de la valeur spécifiée par la propriété From à la valeur spécifiée par la propriété To .
• De et par : L’animation passe de la valeur spécifiée par la propriété From à la valeur spécifiée par la somme des propriétés From et By .
• Pour uniquement : L’animation passe de la valeur de base de la propriété animée ou de la valeur de sortie d’une animation précédente à la valeur spécifiée par la propriété To .
• Par seulement : L’animation passe de la valeur de base de la propriété animée ou de la valeur de sortie d’une animation précédente à la somme de cette valeur et de la valeur spécifiée par la propriété By .

Les propriétés From, By et To d’une ColorAnimation ne sont pas strictement une couleur. Au lieu de cela, il s’agit d’une valeur Nullable pour Color. La valeur par défaut de ces valeurs est Null, et non une structure non initialisée. Cette valeur Null est la façon dont le système d’animation distingue que vous n’avez pas spécifiquement défini de valeur. C++ n’a pas de type Nullable . Il utilise plutôt IReference .

Voir aussi

• Timeline
• SolidColorBrush
• LinearGradientBrush
• Colors
• Animations scénarisées
• Exemple d’animation XAML
• Color
• Color