Avalonia:如何使用代码为路径中的点设置动画

Posted

技术标签:

【中文标题】Avalonia:如何使用代码为路径中的点设置动画【英文标题】:Avalonia: How to animate points in path using code 【发布时间】:2022-01-05 19:30:33 【问题描述】:

我正在尝试弄清楚如何在 Avalonia 中制作动画。

我有一条包含 4 个线段的路径,我想将每个点设置为动画到一个新位置。在 WPF 中,我是这样做的:

        public void AnimatePoints(PointCollection pts, TimeSpan timespan, bool randomized = true, Action onFinished = null)
        
            Points = PointCollection.Parse(PathString);

            //PathFigure needs an animation too (for the start point), otherwise the first point always stays in one place
            var pfa = new PointAnimation(pts[0], timespan);

            if (onFinished != null)
            
                pfa.Completed += (sender, args) => onFinished();
            

            PathFigure.BeginAnimation(PathFigure.StartPointProperty, pfa);

            for (int i = 0; i < pts.Count; i++)
            
                var pa = new PointAnimation(pts[i], timespan);
                if (randomized)
                
                    LineSegments[i].BeginAnimation(LineSegment.PointProperty, pa);
                
                else
                
                    LineSegments[i].BeginAnimation(LineSegment.PointProperty, pa);
                
            
        

如何在 Avalonia 中使用代码执行相同的操作?我尝试过使用 PathTransition,但 PathFigure 和 LineSegments 都不是动画的。

【问题讨论】:

【参考方案1】:

我不认为有内置动画师,但在 Avalonia 你可以做这样的自定义动画师:

public class MorphAnimator : Animator<Geometry>

    public override Geometry Interpolate(double progress, Geometry oldValue, Geometry newValue)
    
        var clone = (oldValue as PathGeometry).ClonePathGeometry();

        Morph.To(clone, newValue as PathGeometry, progress);

        return clone;
    

并注册

Animation.RegisterAnimator<MorphAnimator>(prop => typeof(Geometry).IsAssignableFrom(prop.PropertyType));

示例代码:https://github.com/wieslawsoltes/MorphingDemo

您还可以从 Xaml 制作自定义动画师:

<UserControl 
  xmlns="https://github.com/avaloniaui" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:pages="clr-namespace:RenderDemo.Pages"
  x:Class="RenderDemo.Pages.CustomAnimatorPage"
  MaxWidth="600">
  <Grid>
    <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="x:Type pages:CustomStringAnimator"/>
              </KeyFrame>
              <KeyFrame Cue="100%">
                <Setter Property="Text" Value="0123456789" Animation.Animator="x:Type pages:CustomStringAnimator"/>
              </KeyFrame>
            </Animation>
          </Style.Animations>
        </Style>
      </TextBlock.Styles>
    </TextBlock>
  </Grid>
</UserControl>

动画师:

using Avalonia.Animation.Animators;

namespace RenderDemo.Pages

    public class CustomStringAnimator : Animator<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;
        
    

【讨论】:

很酷,谢谢!我应该可以用它来弄清楚该怎么做。

以上是关于Avalonia:如何使用代码为路径中的点设置动画的主要内容,如果未能解决你的问题,请参考以下文章

沿 konva 中的线或路径为形状设置动画

使用填充为 svg 设置动画

如何在画布上为路径设置动画 - android

Avalonia跨平台入门第十二篇之动画效果

Avalonia 中的 GetTemplateChild / TemplatePart?

如何使用贝塞尔曲线沿路径为图像设置动画