24

我设法找出如何制作 WPF 动画 - 两种颜色之间的过渡。

它被称为 ColorAnimation 并且效果很好。

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. 现在我不能再使用我的动画了。

我需要从画笔到画笔的动画，而不是从颜色到颜色的动画。最好的选择是抽象画笔类型，它包括 SolidColor、LinearGradient 等，所以我可以制作动画，例如从SolidColorBrush到LinearGradientBrush. 这甚至可能吗？谢谢你。

4

3 回答 3

39

另一种可能的方法是创建一个自定义动画类来为画笔设置动画。我找到了一种简单的方法，方法是创建一个派生自AnimationTimeline. 我们可以覆盖自定义类中的一些成员，其中包括AnimationTimeline.GetCurrentValuemethod。它返回一个取决于动画进度以及开始和结束值的值。

最简单的方法是使用子控件上的属性创建一个VisualBrush并交叉淡入淡出开始值和结束值。Opacity结果是如下所示的类：

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 中使用它：

<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();

也可以扩展BrushAnimationwith 构造函数重载等，所以它看起来像一个 .NET 给定的动画类型。

于 2015-04-15T19:58:26.367 回答
5

您只需要在渐变画笔的渐变色标上使用颜色动画即可。这是一个使用故事板为矩形渐变设置动画的示例。

    <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>
于 2011-11-11T17:27:39.573 回答
2

如果您有一个模板样式，您可以在其中为填充画笔命名，则可以为画笔的颜色设置动画，如下所示：

<Rectangle Width="100" Height="100">
  <Rectangle.Fill>
    <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
  </Rectangle.Fill>
  <Rectangle.Triggers>

    <!-- Animates the brush's color to gray
         When the mouse enters the rectangle. -->
    <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>

取自MSDN

于 2013-10-30T14:17:14.937 回答