WPF 机械类组件动画制作流程简述
独立观察员 2025 年 3 月 4 日
一、创建组件
创建组件用户控件，将组件的各部分 “零件”(图片) 拼装在一起，形成组件的默认状态：
二、给运动部分加上 RenderTransform
需要平移则加上 TranslateTransform，需要旋转则加上 RotateTransform，并起好名称：
可改变一下数值看看效果：
三、添加转换动画（视觉状态）
在组件布局代码的外面放置 VisualStateManager.VisualStateGroups，一个 VisualStateGroup 代表一组互斥的视觉状态。此处定义了三个视觉状态（Normal、LeftExtend、RightExtend），共同组成了 “手臂状态” 这个视觉状态组：
三个视觉状态分别设置了对应变换的 X 值：
示例代码：
<VisualStateGroup Name="ArmState"><VisualState Name="Normal"><Storyboard FillBehavior="HoldEnd" SpeedRatio="1"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="topTranslateTransform" Storyboard.TargetProperty="X"><LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/></DoubleAnimationUsingKeyFrames></Storyboard></VisualState><VisualState Name="LeftExtend"><Storyboard FillBehavior="HoldEnd"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="topTranslateTransform" Storyboard.TargetProperty="X"><LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="-30"/></DoubleAnimationUsingKeyFrames></Storyboard></VisualState><VisualState Name="RightExtend"><Storyboard FillBehavior="HoldEnd"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="topTranslateTransform" Storyboard.TargetProperty="X"><LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/></DoubleAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup>
四、使用视觉状态
首先定义一个相应的视觉状态枚举，Key 和之前定义的视觉状态名称相同，方便之后使用：
然后在用户控件后台代码中新增一个依赖属性，用于给外界绑定相应的视觉状态，并在变动方法中使用 VisualStateManager.GoToState 方法进行状态的切换，其中一个视觉状态名称的参数就使用了创建的枚举的字符串形式：
同时重写 OnApplyTemplate () 方法，在其中将相关视觉状态切换为初始值：
注意：之前定义 VisualStateGroup 时的名称 “ArmState”，可能会和依赖属性 ArmState 冲突，建议两者不同名。这里我将依赖属性重命名为 FtrArmState。
五、外部使用
首先给新建的用户控件创建一个对应的 ViewModel 以便使用，在其中添加一个绑定属性，以及一个测试用的命令：
将这个 VM 在要使用的界面的 VM 中进行声明和创建，然后在前台绑定即可：
效果（动图）：
这个就是控件内部的动画，如果还需要控件整体的平移等动画，可以将其当作一个零件，然后在外部再按照本文的方法制作动画，原理是一样的。
六、关于 VisualStateGroups 的放置位置
以下为正确位置：
如果放在图 1 的 “机械运动区” 的 Canvas 中，则 VisualStateManager.GoToState 方法会返回 false。
下面的放置方式也是不行的：
也就是说控件的布局代码和视觉状态组需要并列地放在同一个面板 (UserControl 不行) 中。
原创文章，转载请注明： 转载自 独立观察员 (dlgcy.com)
本文链接地址: [WPF 机械类组件动画制作流程简述](https://dlgcy.com/wpf-create-machine-animation-simple-steps/)
关注微信公众号 独立观察员博客（DLGCY_BLOG） 第一时间获取最新文章
WPF
WPF 借助 FuncValueConverter 实现可显示自定义文本的通用枚举项选择弹窗
WPF 用户控件翻转与内部的内容控件反翻转
【编辑】解决 Wpf TabControl 在所有选项卡上仅创建一个视图 的问题
WPF 中某元素执行旋转动画时另一元素如何进行跟随
WPF 从 用户控件 到 自定义控件
WPF 中的圆形不够圆？
WPF 多个 ScrollViewer 滚动同步
C# 或 WPF 中如何判断两个颜色是否近似
WPF 路由事件和附加事件简明教程
WPF 消息传递简明教程
WPF 属性变动后的业务处理及恢复原始值的方法
我向 ChatGPT 讨教了一下 WPF 中的行为 Behavior
使用通用附加属性来减少 WPF 元素自定义样式的多余代码
几十款 WPF 控件 - UI 库，总有一款适合你
WPF 用户控件分享之边上带输入框的圆圈
分享一个 WPF 气泡弹框
WPF 表单验证之 INotifyDataErrorlnfo 接口的使用示例
[翻译] WPF 中用户控件 DataContext/Binding 和依赖属性的问题
OxyPlot 导出图片及 WPF 元素导出为图片的方法
让 WPF 的 RadioButton 支持再次点击取消选中的功能
WPF DataGrid 如何将被选中行带到视野中
WPF 触屏事件后触发鼠标事件的问题及 DataGrid 误触问题
WPF DataGrid 通过自定义表头模拟首行固定
WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换
【翻译】WPF 中附加行为的介绍 Introduction to Attached Behaviors in WPF
WPF 使用 Expression Design 画图导出及使用 Path 画图
WPF MVVM 弹框之等待框
解决 WPF 绑定集合后数据变动界面却不更新的问题（使用 ObservableCollection）
WPF 消息框 TextBox 绑定新数据时让光标和滚动条跳到最下面
真WPF 按钮拖动和调整大小
WPF MVVM 模式下的弹窗
WPF 让一组 Button 实现 RadioButton 的当前样式效果
WPF 原生绑定和命令功能使用指南
WPF 用户控件的自定义依赖属性在 MVVM 模式下的使用备忘
在WPF的MVVM模式中使用OCX组件
第三方库和框架
Prism 中如何判断界面当前是否显示
WPF 依赖注入之 Microsoft.Extensions.DependencyInjection
WPF 表格控件 ReoGrid 的简单使用
OxyPlot.WPF 公共属性一览
OxyPlot.Wpf 图表控件使用备忘
C#
C# 实现时间来到新的一天时触发事件
C# 字符串排序时指定偏好的排列顺序
对于 C# 中 Task 的 StartNew 与 WhenAll 相互配合的实验
【问题】为什么 System.Timers.Timer 更改间隔时间后的第一次触发时间是设定时间的三倍？
C#10 新特性 [调用方参数表达式] 解决了我七年前的困惑
【分享】C# 字节帮助类 ByteHelper
C# 在自定义的控制台输出重定向类中整合调用方信息
C# 枚举转列表