WPF中的动画效果应该怎么制作？

WPF提供了完善的动画系统，开发者可以通过内置的动画类快速实现界面元素的动态效果，不需要依赖第三方库就能完成大部分常见的动效需求。WPF动画的核心是基于时间线的属性值渐变，通过修改依赖属性的数值来实现视觉上的变化。

WPF动画的核心概念

WPF动画的实现依赖几个核心组件，理解这些组件的作用才能灵活组合出需要的动效。

• Storyboard：动画的容器，用来组织和管理多个动画，控制动画的播放、暂停、停止等状态。
• 动画类：针对不同数据类型的属性提供对应的动画实现，比如DoubleAnimation用于双精度数值属性，ColorAnimation用于颜色属性。
• 依赖属性：WPF动画只能作用于依赖属性，普通的CLR属性无法被动画修改。

常见的动画类型及实现示例

1. 透明度动画

透明度动画可以让元素实现淡入淡出的效果，需要修改元素的Opacity属性，该属性是双精度类型，因此使用DoubleAnimation。

// XAML中定义按钮，准备做透明度动画
<Button x:Name="fadeBtn" Content="淡入淡出按钮" Width="120" Height="40" Opacity="0.2"/>

// 后台代码实现透明度动画
using System.Windows.Media.Animation;

// 创建透明度动画，从0.2变化到1，持续2秒
DoubleAnimation opacityAnimation = new DoubleAnimation();
opacityAnimation.From = 0.2;
opacityAnimation.To = 1;
opacityAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));

// 创建Storyboard并添加动画
Storyboard storyboard = new Storyboard();
storyboard.Children.Add(opacityAnimation);

// 设置动画作用的目标元素和目标属性
Storyboard.SetTargetName(opacityAnimation, fadeBtn.Name);
Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(Button.OpacityProperty));

// 启动动画
storyboard.Begin(fadeBtn);

2. 平移动画

平移动画可以改变元素在界面中的位置，通过修改Canvas.Left和Canvas.Top属性实现，前提是元素放在Canvas布局容器中。

<!-- XAML中定义Canvas和需要平移的矩形 -->
<Canvas Width="400" Height="300" Background="LightGray">
    <Rectangle x:Name="moveRect" Width="60" Height="60" Fill="Blue" Canvas.Left="0" Canvas.Top="120"/>
</Canvas>

<!-- 定义平移动画的Storyboard，放在Window的资源中 -->
<Window.Resources>
    <Storyboard x:Key="moveAnimation">
        <DoubleAnimation 
            Storyboard.TargetName="moveRect"
            Storyboard.TargetProperty="(Canvas.Left)"
            From="0" To="300" Duration="0:0:3"/>
    </Storyboard>
</Window.Resources>

后台触发动画的代码：

// 获取资源中的Storyboard并启动
Storyboard moveStoryboard = (Storyboard)this.Resources["moveAnimation"];
moveStoryboard.Begin();

3. 缩放动画

缩放动画可以改变元素的尺寸，通过修改RenderTransform的ScaleTransform的ScaleX和ScaleY属性实现。

<!-- XAML中定义带缩放变换的按钮 -->
<Button x:Name="scaleBtn" Content="缩放按钮" Width="100" Height="40">
    <Button.RenderTransform>
        <ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" CenterX="50" CenterY="20"/>
    </Button.RenderTransform>
</Button>

后台实现缩放动画的代码：

// 创建X轴缩放动画
DoubleAnimation scaleXAnimation = new DoubleAnimation();
scaleXAnimation.From = 1;
scaleXAnimation.To = 1.5;
scaleXAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
scaleXAnimation.AutoReverse = true; // 自动反向播放，回到原始大小

// 创建Y轴缩放动画
DoubleAnimation scaleYAnimation = new DoubleAnimation();
scaleYAnimation.From = 1;
scaleYAnimation.To = 1.5;
scaleYAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
scaleYAnimation.AutoReverse = true;

// 启动动画
scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleXAnimation);
scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleYAnimation);

动画的常用控制方式

除了直接启动动画，还可以通过代码控制动画的播放状态：

• 暂停动画：调用storyboard.Pause(targetObject)方法。
• 恢复动画：调用storyboard.Resume(targetObject)方法。
• 停止动画：调用storyboard.Stop(targetObject)方法，停止后属性会回到初始值。
• 动画完成事件：可以订阅动画的Completed事件，在动画结束后执行自定义逻辑。

// 订阅动画完成事件示例
opacityAnimation.Completed += (sender, e) =>
{
    // 动画结束后修改按钮内容
    fadeBtn.Content = "动画已结束";
};

制作动画的注意事项

WPF动画修改的是依赖属性的最终值，如果动画结束后需要保留动画后的属性值，需要设置动画的FillBehavior为FillBehavior.HoldEnd，默认就是该值，若设置为FillBehavior.Stop则动画结束后属性会回到初始状态。

另外，不要在动画中频繁修改非依赖属性，否则无法生效。如果需要对自定义类的属性做动画，需要将该属性注册为依赖属性。同时，复杂的动画组合建议优先在XAML中定义Storyboard，这样结构更清晰，也方便后续维护。

WPF动画效果StoryboardDoubleAnimation依赖属性修改时间：2026-07-11 14:30:33