问题描述
我设法找到了如何制作 WPF 动画 - 两种颜色之间的过渡.
I managed to find out how to make a WPF animation - transition between two colors.
它叫做 ColorAnimation,效果很好.
It's called ColorAnimation and works well.
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);
我正在使用它来为我的用户控件设置背景动画.我的控件背景是 SolidColorBrush
.最近我改成了LinearGradientBrush
.现在我不能再使用我的动画了.
I am using this to animate background of my usercontrol. My controls background is SolidColorBrush
. Recently I changed to LinearGradientBrush
. Now I can use my animation no more.
我需要从画笔到画笔的动画,而不是颜色到颜色.最好的选择是抽象画笔类型,包括 SolidColor、LinearGradient 等,所以我可以从 SolidColorBrush
到 LinearGradientBrush
进行动画处理.这甚至可能吗?谢谢.
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 SolidColorBrush
to LinearGradientBrush
. Is that even possible? Thank you.
推荐答案
另一种可能的方法是创建一个自定义动画类来为画笔设置动画.我找到了一个简单的方法,通过创建一个类,派生自 .我们可以覆盖自定义类中的一些成员,其中包括 AnimationTimeline.GetCurrentValue
方法.它返回一个取决于动画进度和开始和结束值的值.
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 AnimationTimeline
. We can override some members in the custom class, among other things the AnimationTimeline.GetCurrentValue
method. It returns a value depend on the animation progress and the start- and end value.
最简单的方法是创建一个 VisualBrush
并使用子控件上的 Opacity
属性对开始值和结束值进行淡入淡出.结果是一个如下所示的类:
The simplest way is to create a VisualBrush
and crossfade the start- with the end value with the Opacity
property on a child control. The result is a class like the following:
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));
}
您可以像往常一样在 XAML 中使用它:
You can use it as always in XAML:
<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>
或在代码后面:
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();
还可以使用构造函数重载等来扩展 BrushAnimation
,因此它看起来像 .NET 给定的动画类型.
It is also possible to extend the BrushAnimation
with constructor overloads etc., so it looks like a .NET given animation type.
这篇关于画笔到画笔动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!