画笔到画笔动画 [英] Brush to Brush Animation

问题描述

我设法找到了如何制作 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.

这篇关于画笔到画笔动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！