我想动画背景颜色从黄色到红色的变化与流动从左到右。如何实现这种动画在wpf?
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>
r1zk6ea12#
我可以建议你使用blend。这是编辑xaml最简单的方法。
2条答案
按热度按时间bejyjqdl1#
ColorAnimation可以提供从黄色到红色的渐变,但由于您希望它从左向右流动,因此使用LinearGradient可能更容易。
像这样设置
这将使该区域完全变黄。
然后你将第三个gradientstop的偏移量从0设置为1。这会慢慢地将该区域变成一个从红色到黄色的渐变。
一旦这个动画已经完成(或一半)动画的第二个梯度停止偏移从0到1这将使整个地区红色。
通过移动第二个和第三个渐变停止点,画笔将在四个渐变停止点之间实现“平滑”颜色过渡:在开始和结束时,处于相同偏移的梯度停止点之间的过渡是不可见的,从而隐藏了颜色过渡。
这里是一个例子。玩弄开始时间和持续时间,使动画你喜欢。
点击按钮的C#代码:
如果需要硬过渡,请在与黄色动画相同的开始时间设置红色色标偏移的动画。
下面是另一个设置,它看起来不同,并设置颜色的动画:
r1zk6ea12#
我可以建议你使用blend。这是编辑xaml最简单的方法。