从左到右流动的颜色变化动画

Question

我希望动画背景颜色从黄色到红色的变化，并从左到右流动。在wpf中如何实现这种动画呢？

Answer 1

ColorAnimation 可以提供从黄色到红色的渐变，但因为您希望它从左向右流动，所以使用 LinearGradient 可能更容易。

像这样设置

GradientStopOffet, color
0, red
0, red
0, yellow
1, yellow

这将使该区域完全变黄。

然后将第三个渐变停止点的偏移设置为从 0 到 1 的动画，这会慢慢将该区域变成从红色到黄色的渐变。

一旦该动画完成（或完成一半），将第二个gradientstop偏移量从0设置为1，这将使整个区域变成红色。

通过移动第二个和第三个渐变点，画笔将在四个渐变点之间实现“平滑”的颜色过渡：第一个和第二个、第二个和第三个以及第三个和第四个之间。在开始和结束时，具有相同偏移的渐变停止点之间的过渡不可见，从而隐藏颜色过渡。

这是一个例子。调整开始时间和持续时间以使动画符合您的喜好。

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <Storyboard x:Key="ToRed" >
            <DoubleAnimation Storyboard.TargetName="YellowStop"
                             Storyboard.TargetProperty="Offset"
                             To="1"
                             Duration="0:0:1" />
            <DoubleAnimation Storyboard.TargetName="RedStop"
                             Storyboard.TargetProperty="Offset"
                             BeginTime="0:0:0.5"
                             To="1"
                             Duration="0:0:1" />
        </Storyboard>
    </Window.Resources>
    <Grid>
        <StackPanel VerticalAlignment="Top"
                    Orientation="Horizontal">
            <Button Click="ToRedButton_Click">To red</Button>
        </StackPanel>
        <Rectangle Margin="0,50,0,0">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="1,0">
                    <GradientStop Offset="0"
                                  Color="Red" />
                    <GradientStop x:Name="RedStop"
                                  Offset="0"
                                  Color="Red" />
                    <GradientStop x:Name="YellowStop"
                                  Offset="0"
                                  Color="Yellow" />
                    <GradientStop Offset="1"
                                  Color="Yellow" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window>

单击按钮的 C# 代码：

private void ToRedButton_Click(object sender, RoutedEventArgs e)
{
    var toRedAnimation = this.FindResource("ToRed") as Storyboard;
    if(toRedAnimation != null)
    {
        toRedAnimation.Begin();
    }
}

如果您想要硬过渡，请在与黄色动画相同的开始时间为红光点的偏移设置动画。

这是另一个设置，它看起来不同并且颜色动画：

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <Storyboard x:Key="ToRed2">
            <DoubleAnimation Storyboard.TargetName="MiddleStop"
                             Storyboard.TargetProperty="Offset"
                             To="1"
                             Duration="0:0:1" />
            <ColorAnimation Storyboard.TargetName="MiddleStop"
                             Storyboard.TargetProperty="Color"
                             BeginTime="0:0:1"
                             To="Red"
                             Duration="0:0:1" />
        </Storyboard>
    </Window.Resources>
    <Grid>
        <StackPanel VerticalAlignment="Top"
                    Orientation="Horizontal">
            <Button Click="ToRedButton_Click">To red</Button>
        </StackPanel>
        <Rectangle Margin="0,50,0,0">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="1,0">
                    <GradientStop Offset="0"
                                  Color="Red" />
                    <GradientStop x:Name="MiddleStop"
                                  Offset="0"
                                  Color="Yellow" />
                    <GradientStop Offset="1"
                                  Color="Yellow" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window>