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

pn9klfpd  于 2023-01-14  发布在  其他
关注(0)|答案(2)|浏览(266)

我想动画背景颜色从黄色到红色的变化与流动从左到右。如何实现这种动画在wpf?

bejyjqdl

bejyjqdl1#

ColorAnimation可以提供从黄色到红色的渐变,但由于您希望它从左向右流动,因此使用LinearGradient可能更容易。
像这样设置

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

这将使该区域完全变黄。
然后你将第三个gradientstop的偏移量从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>
r1zk6ea1

r1zk6ea12#

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

相关问题