如何在.NET MAUI中实现渐变画笔的动画效果？

问题说明 #

尝试为MAUI的Border控件实现渐变颜色循环的RGB动画边框，但颜色始终保持静态，代码逻辑已执行但无动画效果。

原因分析 #

1. GradientStop的Color属性未实现INotifyPropertyChanged，直接修改值无法触发UI更新；
2. 手动调用OnPropertyChanged无效，因为Border和LinearGradientBrush并非绑定源，不具备属性变更通知能力；
3. 自定义动画逻辑结合Task.Delay容易导致时序冲突，且未利用MAUI动画系统的UI跟踪机制。

解决方案 #

使用MAUI内置的ColorAnimation直接对GradientStop.Color属性执行动画，该动画会自动处理UI刷新，同时优化动画同步逻辑。

修改后的完整代码 #

private LinearGradientBrush gradientBrush;
private Border brd;

public MainPage()
{
    InitializeComponent();

    gradientBrush = new LinearGradientBrush
    {
        StartPoint = new Point(0, 0),
        EndPoint = new Point(1, 0),
        GradientStops = new GradientStopCollection
        {
            new GradientStop { Color = Colors.Red, Offset = 0.0f },
            new GradientStop { Color = Colors.Green, Offset = 0.5f },
            new GradientStop { Color = Colors.Blue, Offset = 1.0f }
        }
    };

    brd = new Border
    {
        StrokeThickness = 5,
        BackgroundColor = Colors.White,
        Stroke = gradientBrush,
        Padding = 10,
        Content = new Label
        {
            Text = "Hello",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            TextColor = Colors.Black,
        }
    };

    Content = new Grid
    {
        Children = { brd }
    };
}

private async void AnimateGradient()
{
    while (true)
    {
        await Task.WhenAll(
            AnimateColor(gradientBrush.GradientStops[0], Colors.Red, Colors.Purple, 2000),
            AnimateColor(gradientBrush.GradientStops[1], Colors.Green, Colors.Yellow, 2000),
            AnimateColor(gradientBrush.GradientStops[2], Colors.Blue, Colors.Cyan, 2000)
        );

        await Task.WhenAll(
            AnimateColor(gradientBrush.GradientStops[0], Colors.Purple, Colors.Red, 2000),
            AnimateColor(gradientBrush.GradientStops[1], Colors.Yellow, Colors.Green, 2000),
            AnimateColor(gradientBrush.GradientStops[2], Colors.Cyan, Colors.Blue, 2000)
        );
    }
}

private Task AnimateColor(GradientStop gradientStop, Color fromColor, Color toColor, uint duration)
{
    var colorAnimation = new ColorAnimation
    {
        From = fromColor,
        To = toColor,
        Duration = TimeSpan.FromMilliseconds(duration),
        Easing = Easing.Linear
    };

    // 将动画提交到GradientStop，跟踪Color属性的变化
    return colorAnimation.Commit(gradientStop, nameof(GradientStop.Color), () => fromColor, (value) => gradientStop.Color = value);
}

protected override async void OnAppearing()
{
    base.OnAppearing();
    AnimateGradient();
}

关键优化点 #

• 用ColorAnimation替代自定义颜色计算，MAUI动画系统自动处理UI刷新；
• 直接等待动画提交返回的Task，确保动画完成后再进入下一循环，避免时序错误；
• 移除无效的InvalidateMeasure和OnPropertyChanged调用，简化逻辑。

内容的提问来源于stack exchange，提问作者TheFrieber