C# Avalonia 16- Animation- KeySplineAnimation

KeySplineAnimation.axaml代码

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Height="249.6" Width="624"
        x:Class="AvaloniaUI.KeySplineAnimation"
        Title="KeySplineAnimation">

    <Window.Styles>
        <!-- 为 ellipse1 定义关键帧动画 -->
        <Style Selector="Ellipse#ellipse1">
            <Style.Animations>
                <Animation Duration="0:0:10" IterationCount="Infinite">
                    <KeyFrame Cue="0%">
                        <Setter Property="Canvas.Left" Value="0"/>
                    </KeyFrame>
                    <KeyFrame Cue="50%" KeySpline="0.25,0 0.5,0.7">
                        <Setter Property="Canvas.Left" Value="250"/>
                    </KeyFrame>
                    <KeyFrame Cue="100%" KeySpline="0.25,0.8 0.2,0.4">
                        <Setter Property="Canvas.Left" Value="500"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
        <!-- 为 ellipse2 定义线性动画 -->
        <Style Selector="Ellipse#ellipse2">
            <Style.Animations>
                <Animation Duration="0:0:10" IterationCount="Infinite">
                    <KeyFrame Cue="0%">
                        <Setter Property="Canvas.Left" Value="0"/>
                    </KeyFrame>
                    <KeyFrame Cue="100%">
                        <Setter Property="Canvas.Left" Value="500"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
    </Window.Styles>
    
    <Canvas Margin="10">
        <Ellipse Name="ellipse1" Canvas.Left="0" Fill="Red" Width="10" Height="10"/>

        <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2,1" Canvas.Top="25">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,0">
                        <BezierSegment Point1="25,0" Point2="50,70" Point3="100,100"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.RenderTransform>
                <ScaleTransform ScaleX="2.5"/>
            </Path.RenderTransform>
        </Path>

        <Path Stroke="Blue" StrokeThickness="1" StrokeDashArray="2,1" Canvas.Left="250" Canvas.Top="25">
            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,0">
                        <BezierSegment Point1="25,80" Point2="20,40" Point3="100,100"/>
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
            <Path.RenderTransform>
                <ScaleTransform ScaleX="2.5"/>
            </Path.RenderTransform>
        </Path>

        <Ellipse Name="ellipse2" Canvas.Top="150" Canvas.Left="0" Fill="Red" Width="10" Height="10"/>
    </Canvas>
</Window>

KeySplineAnimation.axaml.cs代码

using Avalonia;
using Avalonia.Animation;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace AvaloniaUI;

public partial class KeySplineAnimation : Window
{
    public KeySplineAnimation()
    {
        InitializeComponent();
    }
}

运行效果