首页 > 基础资料 博客日记

Avalonia中的动画

2026-05-22 17:30:04基础资料围观16

文章Avalonia中的动画分享给大家,欢迎收藏极客资料网,专注分享技术知识

作者:王先荣
内置动画 在Avalonia中,常用的动画有以下几种:关键帧动画(KeyFrame Animation)、过渡动画(Transition Animation)和合成动画(Composition Animations)。它们在使用方式和适用场景有所不同,官方文档的总结如下表所示(https://docs.avaloniaui.net/docs/graphics-animation/animations)。
Type
Description
Use case
Keyframe Animations
 
Change one or more properties over a timeline with multiple keyframes.
 
Complex, multi-step animations triggered by style selectors.
 
Control Transitions
 
Animate a single property when its value changes.
 
Smooth visual feedback for property changes (opacity, color, size).
 
Composition Animations
 
Code-driven animations that run on the render thread.
 
Performance-sensitive or programmatic animations controlled from C#.
严格来说,它们都是插值动画(Interpolated Animations)。那么怎样才能实现离散动画呢?例如打字机效果的动画,游戏中的精灵动画。 Avalonia官方的自定义动画示例 Avalonia的官方示例项目(RenderDemo https://github.com/AvaloniaUI/Avalonia/tree/master/samples/RenderDemo)中,实现了一个名为CustomStringAnimator(https://github.com/AvaloniaUI/Avalonia/blob/master/samples/RenderDemo/Pages/CustomStringAnimator.cs)的动画类,它继承自InterpolatingAnimator<string>,并重写了Interpolate方法来实现打字机效果的动画。以下是该动画类的代码:
public class CustomStringAnimator : InterpolatingAnimator<string>
{
    public override string Interpolate(double progress, string oldValue, string newValue)
    {
        if (newValue.Length == 0) return "";
        var step = 1.0 / newValue.Length;
        var length = (int)(progress / step);
        var result = newValue.Substring(0, length + 1);
        return result;
    }
}
自定义动画

使用起来跟普通的动画几乎一样,需要指定Animator,代码如下(https://github.com/AvaloniaUI/Avalonia/blob/master/samples/RenderDemo/Pages/CustomAnimatorPage.xaml):
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
  <TextBlock.Styles>
    <Style Selector="TextBlock">
      <Style.Animations>
        <Animation Duration="0:0:1" IterationCount="Infinite">
          <KeyFrame Cue="0%">
            <Setter Property="Text" Value="">
              <Animation.Animator>
                <pages:CustomStringAnimator/>
              </Animation.Animator>
            </Setter>
          </KeyFrame>
          <KeyFrame Cue="100%">
            <Setter Property="Text" Value="0123456789" >
              <Animation.Animator>
                <pages:CustomStringAnimator/>
              </Animation.Animator>
            </Setter>
          </KeyFrame>
        </Animation>
      </Style.Animations>
    </Style>
  </TextBlock.Styles>
</TextBlock>
View Code

 

值得注意的是在axaml中使用自定义动画器时,需要指定动画器的类型(<Animation.Animator><pages:CustomStringAnimator/></Animation.Animator>),否则会报错。 改进的字符串动画 在官方示例的基础上,我们可以略微做一些改进:支持在字符串之间进行插值动画。动画过程中会根据进度逐渐显示新字符串的内容,同时保留旧字符串的公共前缀部分。
public class StringAnimator : InterpolatingAnimator<string>
{
    /// <summary>
    /// 计算插值结果。
    /// </summary>
    /// <param name="progress">进度:0到1之间的值,指在两个关键帧之间过渡的时间位置。</param>
    /// <param name="oldValue">旧值:动画开始时,第一个关键帧的值。</param>
    /// <param name="newValue">新值:动画结束时,最后一个关键帧的值。</param>
    /// <returns>返回插值结果。</returns>
    public override string Interpolate(double progress, string oldValue, string newValue)
    {
        if (progress <= 0)
            return oldValue;
        if (progress >= 1)
            return newValue;
        int oldLength = string.IsNullOrEmpty(oldValue) ? 0 : oldValue.Length;
        int newLength = string.IsNullOrEmpty(newValue) ? 0 : newValue.Length;
        if (oldLength == 0 && newLength == 0)
            return string.Empty;
        if (oldLength == newLength && oldValue == newValue)
            return newValue;
        if (oldLength == 0 || newValue.StartsWith(oldValue))
        {
            // 如果旧值为空或新值以旧值开头,则从旧值开始插入新值的剩余部分
            return newValue.Substring(0, (int)(oldLength + (newLength - oldLength) * progress));
        }
        else if (newLength == 0 || oldValue.StartsWith(newValue))
        {
            // 如果新值为空或旧值以新值开头,则从新值开始删除旧值的剩余部分
            return oldValue.Substring(0, (int)(newLength + (oldLength - newLength) * (1 - progress)));
        }
        else
        {
            //如果没有包含关系,忽略旧值,直接从新值开始插入
            oldLength = 0;
            return newValue.Substring(0, (int)(oldLength + (newLength - oldLength) * progress));
        }
    }

    static StringAnimator()
    {
        // 注册动画器
        Animation.RegisterCustomAnimator<string, StringAnimator>();
    }
}

 

使用方法跟官方示例一样。 自定义离散动画 如果要实现通用的离散动画,该怎么实现呢?跟上面类似,我们可以从InterpolatingAnimator<T>继承一个DiscreteAnimator<T>类,代码很简单,放弃中间的过渡部分,直接在进度达到100%时切换到新值,代码如下:
public class DiscreteAnimator<T> : InterpolatingAnimator<T>
{
    public override T Interpolate(double progress, T oldValue, T newValue)
    {
        return progress < 1 ? oldValue : newValue;
    }

    static DiscreteAnimator()
    {
        // 注册动画器
        Animation.RegisterCustomAnimator<T, DiscreteAnimator<T>>();
    }
}

 

使用方法跟上面一样:
<TextBlock Text="离散动画器文本,切换几种不同的样式。">
    <TextBlock.Styles>
        <Style Selector="TextBlock">
          <Style.Animations>
            <Animation Duration="0:0:3" IterationCount="Infinite" PlaybackDirection="Alternate">
              <KeyFrame Cue="0%">
                <Setter Property="FontStyle" Value="Normal">
                    <Animation.Animator>
                        <app:DiscreteAnimator x:TypeArguments="FontStyle" />
                    </Animation.Animator>
                </Setter>
              </KeyFrame>
              <KeyFrame Cue="30%">
                <Setter Property="FontStyle" Value="Italic">
                    <Animation.Animator>
                        <app:DiscreteAnimator x:TypeArguments="FontStyle" />
                    </Animation.Animator>
                </Setter>
              </KeyFrame>
              <KeyFrame Cue="60%">
                <Setter Property="FontStyle" Value="Oblique">
                    <Animation.Animator>
                        <app:DiscreteAnimator x:TypeArguments="FontStyle" />
                    </Animation.Animator>
                </Setter>
              </KeyFrame>
            </Animation>
          </Style.Animations>
        </Style>
      </TextBlock.Styles>
</TextBlock>

 

因为我们使用了泛型,在指定动画器时需要使用x:TypeArguments来指定类型参数(<app:DiscreteAnimator x:TypeArguments="FontStyle" />),否则会报错。 另一种实现自定义动画的变通方法 如果不想实现通用的动画器,我们可以注册AvaloniaProperty,并在属性的PropertyChanged回调中直接修改属性值来实现动画效果。以下是一个简单的示例,演示如何通过注册一个名为DiscreteValue的AvaloniaProperty来实现几何路径变换的动画:
//注册一个AvaloniaProperty,类型为int,默认值为0
public const string DISCRETE_VALUE = "DiscreteValue";
public static readonly StyledProperty<int> DiscreteValueProperty =
    AvaloniaProperty.Register<Path, int>(DISCRETE_VALUE, 0);
//定义一个数组,存储不同的几何路径,在动画过程中根据DiscreteValue的值来切换不同的路径
private PathGeometry[] bells = [];      //这里省略了路径的定义
//创建一个动画并运行它
private void PlayAnimation_Click(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
{
    var animation = new Animation()
    {
        Duration = TimeSpan.FromSeconds(8),
        IterationCount = new IterationCount(2),
        PlaybackDirection = PlaybackDirection.Alternate,
        Children =
        {
            new KeyFrame()
            {
                Setters = { new Setter(DiscreteValueProperty, 0), },
                KeyTime = TimeSpan.FromSeconds(0)
            },
            new KeyFrame()
            {
                Setters = { new Setter(DiscreteValueProperty, 1), },
                KeyTime = TimeSpan.FromSeconds(2)
            },
            new KeyFrame()
            {
                Setters = { new Setter(DiscreteValueProperty, 2), },
                KeyTime = TimeSpan.FromSeconds(4)
            },
            new KeyFrame()
            {
                Setters = { new Setter(DiscreteValueProperty, 3), },
                KeyTime = TimeSpan.FromSeconds(6)
            },
            new KeyFrame()
            {
                Setters = { new Setter(DiscreteValueProperty, 3), },
                KeyTime = TimeSpan.FromSeconds(8)
            }
        }
    };
    _ = animation.RunAsync(Path1);
}
//在属性的PropertyChanged事件中,根据DiscreteValue的值来切换不同的路径
private void Path1_PropertyChanged(object? sender, Avalonia.AvaloniaPropertyChangedEventArgs e)
{
    if (e.Property.Name == DiscreteValueProperty.Name)
    {
        Debug.WriteLine($"time: {DateTime.Now}, Path1 property changed: {e.Property.Name}, old value: {e.OldValue}, new value: {e.NewValue}");
        int value = (int)e.NewValue;
        Path1.Data = bells[value % bells.Length];
    }
}

 

这种方法只能在代码中调用,无法在axaml中使用,但它不需要实现通用的动画器,适合一些特定的动画效果。 本文相关代码可以在我的Gitee仓库中找到: https://gitee.com/xrwang2/avalonia-test/tree/master/AvaloniaMvvpDesktopApp

文章来源:https://www.cnblogs.com/xrwang/p/20122560/AnimationInAvalonia
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!

标签:

相关文章

本站推荐

标签云