blocks|key|516981|text|你只需要在渐变笔刷的渐变色标上使用颜色动画。这是一个使用故事板制作矩形渐变动画的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|516982|++++<Window
++++xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
++++xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
++++x:Class="GradientBrushAnimation.MainWindow"
++++x:Name="Window"
++++Title="MainWindow"
++++Width="640"+Height="480">
++++<Window.Resources>
++++++++<Storyboard+x:Key="Storyboard1">
++++++++++++<ColorAnimationUsingKeyFrames+Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"+Storyboard.TargetName="rectangle">
++++++++++++++++<EasingColorKeyFrame+KeyTime="0:0:2"+Value="Red"/>
++++++++++++</ColorAnimationUsingKeyFrames>
++++++++++++<ColorAnimationUsingKeyFrames+Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"+Storyboard.TargetName="rectangle">
++++++++++++++++<EasingColorKeyFrame+KeyTime="0:0:2"+Value="#FF71FF00"/>
++++++++++++</ColorAnimationUsingKeyFrames>
++++++++</Storyboard>
++++</Window.Resources>
++++<Window.Triggers>
++++++++<EventTrigger+RoutedEvent="FrameworkElement.Loaded">
++++++++++++<BeginStoryboard+Storyboard="{StaticResource+Storyboard1}"/>
++++++++</EventTrigger>
++++</Window.Triggers>

++++<Grid+x:Name="LayoutRoot">
++++++++<Rectangle+x:Name="rectangle"+Margin="78,102,292,144"+Stroke="Black">
++++++++++++<Rectangle.Fill>
++++++++++++++++<LinearGradientBrush+EndPoint="0.5,1"+StartPoint="0.5,0">
++++++++++++++++++++<GradientStop+Color="Black"+Offset="0"/>
++++++++++++++++++++<GradientStop+Color="White"+Offset="1"/>
++++++++++++++++</LinearGradientBrush>
++++++++++++</Rectangle.Fill>
++++++++</Rectangle>
++++</Grid>
</Window>|code-block|syntax|javascript|516983|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You just need to use the color animation on the gradient stops of the gradient brush. Here is an example that animates a rectangle gradient using a storyboard.

<pre><code> &lt;Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="GradientBrushAnimation.MainWindow"
 x:Name="Window"
 Title="MainWindow"
 Width="640" Height="480"&gt;
 &lt;Window.Resources&gt;
 &lt;Storyboard x:Key="Storyboard1"&gt;
 &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle"&gt;
 &lt;EasingColorKeyFrame KeyTime="0:0:2" Value="Red"/&gt;
 &lt;/ColorAnimationUsingKeyFrames&gt;
 &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle"&gt;
 &lt;EasingColorKeyFrame KeyTime="0:0:2" Value="#FF71FF00"/&gt;
 &lt;/ColorAnimationUsingKeyFrames&gt;
 &lt;/Storyboard&gt;
 &lt;/Window.Resources&gt;
 &lt;Window.Triggers&gt;
 &lt;EventTrigger RoutedEvent="FrameworkElement.Loaded"&gt;
 &lt;BeginStoryboard Storyboard="{StaticResource Storyboard1}"/&gt;
 &lt;/EventTrigger&gt;
 &lt;/Window.Triggers&gt;

 &lt;Grid x:Name="LayoutRoot"&gt;
 &lt;Rectangle x:Name="rectangle" Margin="78,102,292,144" Stroke="Black"&gt;
 &lt;Rectangle.Fill&gt;
 &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
 &lt;GradientStop Color="Black" Offset="0"/&gt;
 &lt;GradientStop Color="White" Offset="1"/&gt;
 &lt;/LinearGradientBrush&gt;
 &lt;/Rectangle.Fill&gt;
 &lt;/Rectangle&gt;
 &lt;/Grid&gt;
&lt;/Window&gt;
</code></pre>

blocks|key|517030|text|如果在模板样式中为填充画笔指定了名称，则可以为画笔颜色设置动画效果，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517031|<Rectangle+Width="100"+Height="100">
++<Rectangle.Fill>
++++<SolidColorBrush+x:Name="MyAnimatedBrush"+Color="Orange"+/>
++</Rectangle.Fill>
++<Rectangle.Triggers>

++++
++++<EventTrigger+RoutedEvent="Rectangle.MouseEnter">
++++++<BeginStoryboard>
++++++++<Storyboard>
++++++++++<ColorAnimation
++++++++++++Storyboard.TargetName="MyAnimatedBrush"
++++++++++++Storyboard.TargetProperty="Color"
++++++++++++To="Gray"+Duration="0:0:1"+/>
++++++++</Storyboard>
++++++</BeginStoryboard>
++++</EventTrigger>++
++</Rectangle.Triggers>
</Rectangle>|code-block|syntax|javascript|517032|摘自MSDN|offset|length|517033|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ms753266.aspx^0|0|0|2|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can animate the color of the brush if you have a template style in which you give the fill brush a name, like so:

<pre><code>&lt;Rectangle Width="100" Height="100"&gt;
 &lt;Rectangle.Fill&gt;
 &lt;SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" /&gt;
 &lt;/Rectangle.Fill&gt;
 &lt;Rectangle.Triggers&gt;

 &lt;!-- Animates the brush's color to gray
 When the mouse enters the rectangle. --&gt;
 &lt;EventTrigger RoutedEvent="Rectangle.MouseEnter"&gt;
 &lt;BeginStoryboard&gt;
 &lt;Storyboard&gt;
 &lt;ColorAnimation
 Storyboard.TargetName="MyAnimatedBrush"
 Storyboard.TargetProperty="Color"
 To="Gray" Duration="0:0:1" /&gt;
 &lt;/Storyboard&gt;
 &lt;/BeginStoryboard&gt;
 &lt;/EventTrigger&gt; 
 &lt;/Rectangle.Triggers&gt;
&lt;/Rectangle&gt;
</code></pre>

As taken from <a href="http://msdn.microsoft.com/en-us/library/ms753266.aspx" rel="nofollow">MSDN</a>

blocks|key|517112|text|另一种可能的方法是，创建一个自定义动画类，使笔刷具有动画效果。我找到了一种简单的方法，就是创建一个派生自AnimationTimeline的类。我们可以覆盖自定义类中的一些成员，其中包括AnimationTimeline.GetCurrentValue+method。它根据动画进度以及开始和结束值返回一个值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|517113|最简单的方法是创建一个VisualBrush，并用子控件上的Opacity属性交叉淡入开始值和结束值。结果是一个如下所示的类：|517114|public+class+BrushAnimation+:+AnimationTimeline
{
++++public+override+Type+TargetPropertyType
++++{
++++++++get
++++++++{
++++++++++++return+typeof(Brush);
++++++++}
++++}

++++public+override+object+GetCurrentValue(object+defaultOriginValue,
+++++++++++++++++++++++++++++++++++++++++++object+defaultDestinationValue,
+++++++++++++++++++++++++++++++++++++++++++AnimationClock+animationClock)
++++{
++++++++return+GetCurrentValue(defaultOriginValue+as+Brush,
+++++++++++++++++++++++++++++++defaultDestinationValue+as+Brush,
+++++++++++++++++++++++++++++++animationClock);
++++}
++++public+object+GetCurrentValue(Brush+defaultOriginValue,
++++++++++++++++++++++++++++++++++Brush+defaultDestinationValue,
++++++++++++++++++++++++++++++++++AnimationClock+animationClock)
++++{
++++++++if+(!animationClock.CurrentProgress.HasValue)
++++++++++++return+Brushes.Transparent;

++++++++//use+the+standard+values+if+From+and+To+are+not+set+
++++++++//(it+is+the+value+of+the+given+property)
++++++++defaultOriginValue+=+this.From+??+defaultOriginValue;
++++++++defaultDestinationValue+=+this.To+??+defaultDestinationValue;

++++++++if+(animationClock.CurrentProgress.Value+==+0)
++++++++++++return+defaultOriginValue;
++++++++if+(animationClock.CurrentProgress.Value+==+1)
++++++++++++return+defaultDestinationValue;

++++++++return+new+VisualBrush(new+Border()
++++++++{
++++++++++++Width+=+1,
++++++++++++Height+=+1,
++++++++++++Background+=+defaultOriginValue,
++++++++++++Child+=+new+Border()
++++++++++++{
++++++++++++++++Background+=+defaultDestinationValue,
++++++++++++++++Opacity+=+animationClock.CurrentProgress.Value,
++++++++++++}
++++++++});
++++}

++++protected+override+Freezable+CreateInstanceCore()
++++{
++++++++return+new+BrushAnimation();
++++}

++++//we+must+define+From+and+To,+AnimationTimeline+does+not+have+this+properties
++++public+Brush+From
++++{
++++++++get+{+return+(Brush)GetValue(FromProperty);+}
++++++++set+{+SetValue(FromProperty,+value);+}
++++}
++++public+Brush+To
++++{
++++++++get+{+return+(Brush)GetValue(ToProperty);+}
++++++++set+{+SetValue(ToProperty,+value);+}
++++}

++++public+static+readonly+DependencyProperty+FromProperty+=
++++++++DependencyProperty.Register("From",+typeof(Brush),+typeof(BrushAnimation));
++++public+static+readonly+DependencyProperty+ToProperty+=
++++++++DependencyProperty.Register("To",+typeof(Brush),+typeof(BrushAnimation));
}|code-block|syntax|javascript|517115|您可以像在XAML中一样使用它：|517116|<EventTrigger+RoutedEvent="Loaded">
++++<BeginStoryboard>
++++++++<Storyboard+>
++++++++++++<local:BrushAnimation+Storyboard.TargetName="border"
++++++++++++++++++++++++++++++++++Storyboard.TargetProperty="Background"+
++++++++++++++++++++++++++++++++++Duration="0:0:5"+From="Red"+
++++++++++++++++++++++++++++++++++RepeatBehavior="Forever"+AutoReverse="True"+>
++++++++++++++++<local:BrushAnimation.To>
++++++++++++++++++++<LinearGradientBrush+EndPoint="0.5,1"+StartPoint="0.5,0">
++++++++++++++++++++++++<GradientStop+Color="#FF00FF2E"+Offset="0.005"/>
++++++++++++++++++++++++<GradientStop+Color="#FFC5FF00"+Offset="1"/>
++++++++++++++++++++++++<GradientStop+Color="Blue"+Offset="0.43"/>
++++++++++++++++++++</LinearGradientBrush>
++++++++++++++++</local:BrushAnimation.To>
++++++++++++</local:BrushAnimation>
++++++++</Storyboard>
++++</BeginStoryboard>
</EventTrigger>|517117|或者在后面的代码中：|517118|var+animation+=+new+BrushAnimation
{
++++From+=+Brushes.Red,
++++To+=+new+LinearGradientBrush+(Colors.Green,+Colors.Yellow,+45),
++++Duration+=+new+Duration(TimeSpan.FromSeconds(5)),
};
animation.Completed+%2B=+new+EventHandler(animation_Completed);
Storyboard.SetTarget(animation,+border);
Storyboard.SetTargetProperty(animation,+new+PropertyPath("Background"));

var+sb+=+new+Storyboard();
sb.Children.Add(animation);
sb.Begin();|517119|也可以通过构造函数重载等方式扩展BrushAnimation，这样看起来就像是.NET给定的动画类型。|517120|entityMap|0|LINK|mutability|MUTABLE|url|https://msdn.microsoft.com/en-us/library/system.windows.media.animation.animationtimeline.aspx|1|https://msdn.microsoft.com/de-de/library/system.windows.media.animation.animationtimeline.getcurrentvalue.aspx^0|1G|H|2L|X|1G|H|0|2L|14|1|0|B|B|U|7|0|0|0|0|0|0|G|E|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]|$9|1E|A|1F|1|1G]]|E|$]]|$1|F|3|G|5|6|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1N|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1P|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]|14|$5|Z|10|11|E|$12|15]]]]

Another possible way is, to create a custom animtion class that animate brushes.
I found a simple way to do that by creating a class, derivated from <a href="https://msdn.microsoft.com/en-us/library/system.windows.media.animation.animationtimeline.aspx"><code>AnimationTimeline</code></a>. We can override some members in the custom class, among other things the <a href="https://msdn.microsoft.com/de-de/library/system.windows.media.animation.animationtimeline.getcurrentvalue.aspx"><code>AnimationTimeline.GetCurrentValue</code> method</a>. It returns a value depend on the animation progress and the start- and end value.

The simplest way is to create a <code>VisualBrush</code> and crossfade the start- with the end value with the <code>Opacity</code> property on a child control. The result is a class like the following:

<pre><code>public class BrushAnimation : AnimationTimeline
{
 public override Type TargetPropertyType
 {
 get
 {
 return typeof(Brush);
 }
 }

 public override object GetCurrentValue(object defaultOriginValue,
 object defaultDestinationValue,
 AnimationClock animationClock)
 {
 return GetCurrentValue(defaultOriginValue as Brush,
 defaultDestinationValue as Brush,
 animationClock);
 }
 public object GetCurrentValue(Brush defaultOriginValue,
 Brush defaultDestinationValue,
 AnimationClock animationClock)
 {
 if (!animationClock.CurrentProgress.HasValue)
 return Brushes.Transparent;

 //use the standard values if From and To are not set 
 //(it is the value of the given property)
 defaultOriginValue = this.From ?? defaultOriginValue;
 defaultDestinationValue = this.To ?? defaultDestinationValue;

 if (animationClock.CurrentProgress.Value == 0)
 return defaultOriginValue;
 if (animationClock.CurrentProgress.Value == 1)
 return defaultDestinationValue;

 return new VisualBrush(new Border()
 {
 Width = 1,
 Height = 1,
 Background = defaultOriginValue,
 Child = new Border()
 {
 Background = defaultDestinationValue,
 Opacity = animationClock.CurrentProgress.Value,
 }
 });
 }

 protected override Freezable CreateInstanceCore()
 {
 return new BrushAnimation();
 }

 //we must define From and To, AnimationTimeline does not have this properties
 public Brush From
 {
 get { return (Brush)GetValue(FromProperty); }
 set { SetValue(FromProperty, value); }
 }
 public Brush To
 {
 get { return (Brush)GetValue(ToProperty); }
 set { SetValue(ToProperty, value); }
 }

 public static readonly DependencyProperty FromProperty =
 DependencyProperty.Register("From", typeof(Brush), typeof(BrushAnimation));
 public static readonly DependencyProperty ToProperty =
 DependencyProperty.Register("To", typeof(Brush), typeof(BrushAnimation));
}
</code></pre>

You can use it as always in XAML:

<pre><code>&lt;EventTrigger RoutedEvent="Loaded"&gt;
 &lt;BeginStoryboard&gt;
 &lt;Storyboard &gt;
 &lt;local:BrushAnimation Storyboard.TargetName="border"
 Storyboard.TargetProperty="Background" 
 Duration="0:0:5" From="Red" 
 RepeatBehavior="Forever" AutoReverse="True" &gt;
 &lt;local:BrushAnimation.To&gt;
 &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt;
 &lt;GradientStop Color="#FF00FF2E" Offset="0.005"/&gt;
 &lt;GradientStop Color="#FFC5FF00" Offset="1"/&gt;
 &lt;GradientStop Color="Blue" Offset="0.43"/&gt;
 &lt;/LinearGradientBrush&gt;
 &lt;/local:BrushAnimation.To&gt;
 &lt;/local:BrushAnimation&gt;
 &lt;/Storyboard&gt;
 &lt;/BeginStoryboard&gt;
&lt;/EventTrigger&gt;
</code></pre>

or in code behind:

<pre><code>var animation = new BrushAnimation
{
 From = Brushes.Red,
 To = new LinearGradientBrush (Colors.Green, Colors.Yellow, 45),
 Duration = new Duration(TimeSpan.FromSeconds(5)),
};
animation.Completed += new EventHandler(animation_Completed);
Storyboard.SetTarget(animation, border);
Storyboard.SetTargetProperty(animation, new PropertyPath("Background"));

var sb = new Storyboard();
sb.Children.Add(animation);
sb.Begin();
</code></pre>

It is also possible to extend the <code>BrushAnimation</code> with constructor overloads etc., so it looks like a .NET given animation type.

I managed to find out how to make a WPF animation - transition between two colors.

It's called ColorAnimation and works well.

<pre><code>ColorAnimation animation = new ColorAnimation
{
 From = Colors.DarkGreen,
 To = Colors.Transparent,
 Duration = new Duration(TimeSpan.FromSeconds(1.5)),
 AutoReverse = false
};
animation.Completed += new EventHandler(animation_Completed);
SolidColorBrush brush = new SolidColorBrush(Colors.Transparent);
animation.AccelerationRatio = 0.5;

Background = brush;
brush.BeginAnimation(SolidColorBrush.ColorProperty, animation);
</code></pre>

I am using this to animate background of my usercontrol. My controls background is <code>SolidColorBrush</code>. Recently I changed to <code>LinearGradientBrush</code>. Now I can use my animation no more.

I need animation from brush to brush, not color to color. And best option is Abstract brush type, which includes SolidColor, LinearGradient etc, so I can animate for example from <code>SolidColorBrush</code> to <code>LinearGradientBrush</code>. Is that even possible? Thank you.

Brush to Brush Animation

我设法找到了如何在两种颜色之间进行WPF动画过渡。它被称为ColorAnimation，并且运行良好。ColorAnimation animation = new ColorAnimation{    From = Colors.DarkGreen,    To = Colors.Transparent,    Dur...

问笔刷到画笔动画
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问笔刷到画笔动画EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问笔刷到画笔动画
EN