Question

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

Answer 1

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

像这样设置

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

这会使该区域完全变黄。

然后，您将第三个梯度停靠点的偏移量设置为0到1 这会慢慢将区域变成从红色到黄色的渐变。

此动画完成后（或中途）将第二个渐变偏移从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>

Answer 2

我可以建议你使用混合物。这是编辑xaml的最简单方法。

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

2 个答案: