MAUI中Frame的GradientStop动画无法移动的技术求助

问题根源 #

在Android平台上，MAUI的RadialGradientBrush不会监听GradientStop的属性变更。直接修改GradientStop.Offset时，Brush不会自动重绘，导致视觉上无变化——即便代码已执行，Offset的修改也无法在UI上体现。

两种可行解决方案 #

方案1：通过绑定触发UI更新 #

利用可绑定属性的变更通知机制，让Offset的修改自动触发Brush重绘：

1. 在MainPage中添加可绑定属性：

public partial class MainPage : ContentPage
{
    public static readonly BindableProperty GradientOffsetProperty =
        BindableProperty.Create(nameof(GradientOffset), typeof(float), typeof(MainPage), 0.0f);

    public float GradientOffset
    {
        get => (float)GetValue(GradientOffsetProperty);
        set => SetValue(GradientOffsetProperty, value);
    }

    // 其余原有代码不变
}

2. 修改XAML，将GradientStop.Offset绑定到该属性：

<GradientStop Color="Gray"
              Offset="{Binding Source={RelativeSource AncestorType={x:Type local:MainPage}}, Path=GradientOffset}" />

3. 调整动画逻辑，更新绑定属性而非直接修改GradientStop：

loadingAnimation = new Animation(
    v => GradientOffset = (float)(1 - Math.Abs(v - 1)),
    0, 2, Easing.Linear
);

方案2：修改Offset后强制刷新Brush #

通过重新设置Frame的Background属性，强制触发Brush重绘：

1. 给Frame添加x:Name标识：

<Frame x:Name="LoadingFrame" IsVisible="{Binding IsLoading}" MinimumHeightRequest="40">

2. 保存Brush引用，并在修改Offset后重新赋值：

private RadialGradientBrush _gradientBrush;

public MainPage(MainPageVM vm)
{
    InitializeComponent();
    BindingContext = vm;

    _gradientBrush = (RadialGradientBrush)LoadingFrame.Background;

    // 动画中修改Offset后强制刷新
    loadingAnimation = new Animation(
        v => {
            GradientStop.Offset = (float)(1 - Math.Abs(v - 1));
            LoadingFrame.Background = _gradientBrush;
        },
        0, 2, Easing.Linear
    );

    // 手动修改Offset时也需要执行刷新
    GradientStop.Color = Microsoft.Maui.Graphics.Color.FromArgb("#0000ff");
    GradientStop.Offset = 0.3f;
    LoadingFrame.Background = _gradientBrush;

    vm.PropertyChanged += Vm_PropertyChanged;
}

效果验证 #

两种方案都能让Offset的动画和手动修改正常触发UI更新，实现你需要的Ping-Pong渐变效果。你的动画循环逻辑是正确的，Commit方法中() => true会让动画无限重复，直到调用AbortAnimation终止。

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