使用 MVVM 的动态视图动画

如果只是为了一些动画，我建议使用视觉状态。然后，您可以在视图上使用 GoToAction 行为来触发不同的动画。如果您正在处理大量类似的动画，创建自己的行为将是一个更好的解决方案。

更新我创建了一个非常简单的行为器来给矩形一个小彩色动画。这是代码。

   public class ColorAnimationBehavior : TriggerAction<FrameworkElement>
    {
        #region Fill color
        [Description("The background color of the rectangle")]
        public Color FillColor
        {
            get { return (Color)GetValue(FillColorProperty); }
            set { SetValue(FillColorProperty, value); }
        }
        public static readonly DependencyProperty FillColorProperty =
            DependencyProperty.Register("FillColor", typeof(Color), typeof(ColorAnimationBehavior), null);
        #endregion
        protected override void Invoke(object parameter)
        {
            var rect = (Rectangle)AssociatedObject;
            var sb = new Storyboard();
            sb.Children.Add(CreateVisibilityAnimation(rect, new Duration(new TimeSpan(0, 0, 1)), FillColor));
            sb.Begin();
        }
        private static ColorAnimationUsingKeyFrames CreateVisibilityAnimation(DependencyObject element, Duration duration, Color color)
        {
            var animation = new ColorAnimationUsingKeyFrames();
            animation.KeyFrames.Add(new SplineColorKeyFrame { KeyTime = new TimeSpan(duration.TimeSpan.Ticks), Value = color });
            Storyboard.SetTargetProperty(animation, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));
            Storyboard.SetTarget(animation, element);
            return animation;
        }
    }

在 xaml 中，您只需像这样附加此行为，

    <Rectangle x:Name="rectangle" Fill="Black" Margin="203,103,217,227" Stroke="Black">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseLeftButtonDown">
                <local:ColorAnimationBehavior FillColor="Red"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Rectangle>

单击矩形时，它应从黑色变为红色。

我使用了Xin发布的代码，并做了一些非常小的tweek（代码如下）。 仅有的 3 个材料差异：

我创建了适用于任何 UIElement 的行为，而不仅仅是矩形

我使用了 PropertyChangedTrigger 而不是 EventTrigger。 这让我监视视图模型上的颜色属性，而不是侦听单击事件。

我将 FillColor 绑定到 ViewModel 的 Color 属性。

要使用它，您需要下载 Blend 4 SDK（它是免费的，只有在您还没有 Expression Blend 时才需要它），并添加对 System.Windows.Interactivity 和 Microsoft.Expression.Interactions 的引用

下面是行为类的代码：

 
// complete code for the animation behavior
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace ColorAnimationBehavior
{
    public class ColorAnimationBehavior: TriggerAction<UIElement>
    {
        public Color FillColor
        {
            get { return (Color)GetValue(FillColorProperty); }
            set { SetValue(FillColorProperty, value); }
        }
        public static readonly DependencyProperty FillColorProperty =
            DependencyProperty.Register("FillColor", typeof(Color), typeof(ColorAnimationBehavior), null);
        public Duration Duration
        {
            get { return (Duration)GetValue(DurationProperty); }
            set { SetValue(DurationProperty, value); }
        }
        // Using a DependencyProperty as the backing store for Duration.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty DurationProperty =
            DependencyProperty.Register("Duration", typeof(Duration), typeof(ColorAnimationBehavior), null);
        protected override void Invoke(object parameter)
        {
            var storyboard = new Storyboard();
            storyboard.Children.Add(CreateColorAnimation(this.AssociatedObject, this.Duration, this.FillColor));
            storyboard.Begin();
        }
        private static ColorAnimationUsingKeyFrames CreateColorAnimation(UIElement element, Duration duration, Color color)
        {
            var animation = new ColorAnimationUsingKeyFrames();
            animation.KeyFrames.Add(new SplineColorKeyFrame() { KeyTime = duration.TimeSpan, Value = color });
            Storyboard.SetTargetProperty(animation, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));
            Storyboard.SetTarget(animation, element);
            return animation;
        }
    }
}

现在，下面是将其挂接到矩形的 XAML：

 
<UserControl x:Class="MVVM.ColorAnimation.Silverlight.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ColorAnimation="clr-namespace:MVVM.ColorAnimation"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:ca="clr-namespace:ColorAnimationBehavior;assembly=ColorAnimationBehavior"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.DataContext>
        <ColorAnimation:MainWindowViewModel />
    </UserControl.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <Rectangle x:Name="rectangle" Margin="10" Stroke="Black" Fill="Red">
            <i:Interaction.Triggers>
                <ei:PropertyChangedTrigger Binding="{Binding Color}">
                    <ca:ColorAnimationBehavior FillColor="{Binding Color}" Duration="0:0:0.5" />
                </ei:PropertyChangedTrigger>
            </i:Interaction.Triggers>
        </Rectangle>
        <StackPanel Orientation="Horizontal" Grid.Row="1">
            <Button Command="{Binding BlueCommand}" Width="100" Content="Blue"/>
            <Button Command="{Binding GreenCommand}" Width="100" Content="Green"/>
        </StackPanel>
    </Grid>
</UserControl>

这真的是辛的主意——我只是清理了一下。