Avalonia 的 Transitions 是属性变更时自动触发动画的核心机制,支持 Opacity、Scale、Color 等多种类型过渡,可内联定义或通过样式+伪类实现交互动画,并扩展页面级切换与自定义动画。

Avalonia 中的 Transitions 是实现属性变化时自动触发动画的核心机制,无需手动控制动画启停,只要目标属性值改变,过渡效果就会平滑执行。它适用于 UI 状态切换场景,比如按钮悬停、控件显隐、尺寸缩放、透明度渐变等。
Transitions 的基本用法
在 XAML 中,通过控件的 Transitions 属性定义一组过渡动画,每个动画绑定到特定属性。常用写法如下:
- 在控件层级直接声明:
- 或内联定义:
-
Property指定监听的属性名(如Opacity、Scale.X、Translate.Y) -
Duration控制动画持续时间(格式为hh:mm:ss.ff),例如0:0:0.15表示 150 毫秒 -
Delay可选,指定动画开始前的等待时间
支持的过渡类型与常见组合
Avalonia 内置多种 Transition 类型,对应不同数据类型的属性:
-
DoubleTransition:用于double值,如Opacity、Scale.X、Width -
ColorTransition:用于颜色变化,如Background或Foreground -
ThicknessTransition:用于边距或内边距(Margin、Padding) -
TransformOperationsTransition:用于复合变换,如旋转+平移组合 - 多个过渡可共存于同一
Transitions集合中,属性变更时各自独立触发
结合样式与伪类实现交互动画
过渡常配合选择器和伪类使用,让 UI 响应用户行为自动动起来:
- 在
Style中为:pointerover定义不同状态的Opacity,并配上DoubleTransition - 示例:
-
Easing属性可指定缓动函数(如CubicEaseOut、QuadraticEaseIn),让动画更自然 - 注意:伪类触发的属性变更必须是可动画的,且目标属性需支持过渡(如
Visibility不支持,要用Opacity+IsVisible组合模拟)
页面级过渡与自定义 Transition
除控件属性过渡外,Avalonia 还支持导航容器(如 ContentControl 或 Frame)的内容切换动画:
- 使用
PageSlide、Fade等预设页面过渡效果 - 通过
ContentControl.Transitions设置,配合Content绑定变化生效 - 若需复杂逻辑,可继承
Transition实现自定义动画类,重写Run方法控制插值过程 - 自定义 Transition 需注册为资源并在 XAML 中引用,确保线程安全与生命周期管理










