C# Avalonia 15- Animation- CustomEasingFunction

CustomEasingFunction.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="276" Width="600"
        x:Class="AvaloniaUI.CustomEasingFunction"
         xmlns:local="using:AvaloniaUI"
        Title="CustomEasingFunction">
    
    <Canvas Margin="10">
        <Ellipse Canvas.Left="0" Fill="Red" Width="20" Height="20">
            <Ellipse.Styles>
                <Style Selector="Ellipse">
                    <Style.Animations>
                        <Animation Duration="0:0:10" FillMode="Forward" Easing="SineEaseInOut">
                            <KeyFrame Cue="0%">
                                <Setter Property="(Canvas.Left)" Value="0"/>
                            </KeyFrame>
                            <KeyFrame Cue="100%">
                                <Setter Property="(Canvas.Left)" Value="500"/>
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>
            </Ellipse.Styles>
        </Ellipse>

        <Ellipse Canvas.Top="100" Canvas.Left="0" Fill="Red" Width="20" Height="20">
            <Ellipse.Styles>
                <Style Selector="Ellipse">
                    <Style.Animations>
                        <Animation Duration="0:0:10" FillMode="Forward">
                            <Animation.Easing>
                                <local:RandomJitterEase Jitter="0.08"/>
                            </Animation.Easing>
                            <KeyFrame Cue="0%">
                                <Setter Property="(Canvas.Left)" Value="0"/>
                            </KeyFrame>
                            <KeyFrame Cue="100%">
                                <Setter Property="(Canvas.Left)" Value="500"/>
                            </KeyFrame>
                        </Animation>
                    </Style.Animations>
                </Style>
            </Ellipse.Styles>
        </Ellipse>
    </Canvas>
</Window>

CustomEasingFunction.axaml.cs代码

using Avalonia;
using Avalonia.Animation.Easings;
using Avalonia.Controls;
using System;

namespace AvaloniaUI;

public class RandomJitterEase : Easing
{
    private static readonly Random rand = new Random();
    public double Jitter { get; set; } = 0.05;

    public override double Ease(double progress)
    {
        if (progress <= 0) return 0;
        if (progress >= 1) return 1;

        return Math.Clamp((rand.NextDouble() * 2 - 1) * Jitter+ progress, 0.0, 1.0);
    }
}
public partial class CustomEasingFunction : Window
{
    public CustomEasingFunction()
    {
        InitializeComponent();
    }
}

运行效果