Avalonia 中的
Transitions是实现属性变化时自动触发动画的核心机制,无需手动控制动画启停,只要目标属性值改变,过渡效果就会平滑执行。它适用于 UI 状态切换场景,比如按钮悬停、控件显隐、尺寸缩放、透明度渐变等。
Transitions 的基本用法
在 XAML 中,通过控件的
Transitions属性定义一组过渡动画,每个动画绑定到特定属性。常用写法如下: 在控件层级直接声明:
<button transitions="{StaticResource MyTransitions}"></button>
或内联定义:<button><button.transitions><transitions><doubletransition property="Opacity" duration="0:0:0.2"></doubletransition></transitions></button.transitions></button>
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示例:
<style selector="Button:pointerover"><Setter Property="Opacity" Value="0.8"/><Setter Property="Transitions"><Transitions><DoubleTransition Property="Opacity" Duration="0:0:0.12" Easing="CubicEaseOut"/></style>
Easing属性可指定缓动函数(如
CubicEaseOut、
QuadraticEaseIn),让动画更自然 注意:伪类触发的属性变更必须是可动画的,且目标属性需支持过渡(如
Visibility不支持,要用
Opacity+
IsVisible组合模拟)
页面级过渡与自定义 Transition
除控件属性过渡外,Avalonia 还支持导航容器(如
ContentControl或
Frame)的内容切换动画: 使用
PageSlide、
Fade等预设页面过渡效果 通过
ContentControl.Transitions设置,配合
Content绑定变化生效 若需复杂逻辑,可继承
Transition实现自定义动画类,重写
Run方法控制插值过程 自定义 Transition 需注册为资源并在 XAML 中引用,确保线程安全与生命周期管理
