Avalonia怎么实现一个简单的动画效果 Avalonia Animations教程

Avalonia动画通过Animation类和Storyboard实现，需作用于可动画依赖属性；XAML中声明Storyboard并用Style绑定Loaded事件，C#中需显式调用Storyboard.SetTarget和SetTargetProperty；支持RepeatBehavior、AutoReverse及缓动效果，注意目标属性必须是可动画的依赖属性。

在 Avalonia 中实现简单动画效果，主要依靠 Animation 类及其子类（如 DoubleAnimation、ColorAnimation）配合 Storyboard 控制，作用于控件的可动画属性（如 Opacity、Width、TranslateTransform.Y 等）。不需要第三方库，原生支持，但需注意属性必须是“依赖属性”且标记为可动画（Avalonia 已为常用属性预设好）。

用 XAML 声明一个淡入动画

这是最直观的方式：在资源中定义 Storyboard，绑定到目标控件的事件（如 Loaded 或按钮点击）。

示例：让一个 TextBlock 加载时 0.5 秒内从透明变不透明：

<Window xmlns="https://github.com/avaloniaui">
  <Window.Resources>
    <Storyboard x:Key="FadeInStoryboard">
      <DoubleAnimation
        Storyboard.TargetProperty="Opacity"
        From="0" To="1" Duration="0:0:0.5" />
    </Storyboard>
  </Window.Resources>
<p><Grid>
<TextBlock Name="MyText" Text="Hello!" Opacity="0" />
</Grid></p><p><Window.Styles>
<Style Selector="Window">
<Setter Property="Loaded" Value="{Binding #FadeInStoryboard.Begin}" />
</Style>
</Window.Styles>
</Window>

登录后复制

⚠️ 注意：Loaded 事件绑定需配合 Style + Setter 实现（Avalonia 当前不支持直接在元素上写 Loaded="{StaticResource FadeInStoryboard.Begin}"）。

用 C# 代码动态触发位移动画

适合需要运行时计算、条件触发或与逻辑强耦合的场景。关键步骤：创建动画 → 设置目标和属性 → 添加到 Storyboard → 调用 Begin()。

示例：点击按钮，让方块向右平移 100 像素：

<Button Content="Move Right" Click="OnMoveClick"/>
<Border Name="MovableBox" Width="60" Height="60" Background="Blue">
  <Border.RenderTransform>
    <TranslateTransform x:Name="MoveTransform"/>
  </Border.RenderTransform>
</Border>

登录后复制

后台代码：

标签： git github seo win 常见问题 c# .net