XAML 帧中的GradientStop动画未移动

7eumitmz  于 2023-06-27  发布在  其他
关注(0)|答案(2)|浏览(91)

我想动画帧的梯度,所以它似乎是乒乓球从一端到另一端。可悲的是,没有什么移动,但其余的行为正确:
1.我可以改变GradientStop的颜色
1.在IsLoading变为false后,Frame消失。
我通过断点检查了代码的所有部分都被执行了。我又做了一次检查,在后面的代码中手动设置偏移量也没有效果。
如何让Offset移动?我在VS 2022内置的Pixel 5 - API 33(Android 13.0)模拟器上运行这个。
App.xaml

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiMRE"
             x:Class="MauiMRE.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

App.xaml.cs

namespace MauiMRE;

public partial class App : Application
{ 
    public App()
    {
        InitializeComponent();
        MainPage = new AppShell();
    }
}

AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiMRE.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiMRE"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

AppShell.xaml.cs

namespace MauiMRE;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();
    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiMRE.MainPage"             
             Title="Animation Example">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Frame IsVisible="{Binding IsLoading}" MinimumHeightRequest="40">
            <Frame.Background>
                <RadialGradientBrush Center="1.0,1.0">
                    <GradientStop Color="Gray" x:Name="GradientStop"
                    Offset="0.0" />
                    <GradientStop Color="White"
                    Offset="1.0" />
                </RadialGradientBrush>
            </Frame.Background>
        </Frame>
    </Grid>
</ContentPage>

MainPage.xaml.cs

namespace MauiMRE;

public partial class MainPage : ContentPage
{
    readonly MainPageVM mainPageVM;

    readonly Animation loadingAnimation;

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

        loadingAnimation = new Animation(
          v => { GradientStop.Offset = (float)(1 - Math.Abs(v - 1)); }, 0, 2, Easing.Linear
          );
        GradientStop.Color = Microsoft.Maui.Graphics.Color.FromArgb("#0000ff"); // color changes
        GradientStop.Offset = 0.3f; // offset doesn't change
        vm.PropertyChanged += Vm_PropertyChanged;
    }

    protected override void OnAppearing()
    {
        mainPageVM.Load();
        base.OnAppearing();
    }

    private void Vm_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(mainPageVM.IsLoading))
        {
            var animationId = "loadingAnimation";
            if (mainPageVM.IsLoading)
            {
                loadingAnimation.Commit(this, animationId, 16, 1000, Easing.Linear, (v, c) => { GradientStop.Offset = 0; }, () => { return true; });
            }
            else
            {
                _ = this.AbortAnimation(animationId);
            }
        }
    }
}

MainPageVM.cs

using CommunityToolkit.Mvvm.ComponentModel;

namespace MauiMRE;

public partial class MainPageVM : ObservableObject
{    

    [ObservableProperty]
    private bool isLoading; 

    public MainPageVM()
    {

    }

    public async void Load()
    {
        IsLoading = true;
        await Task.Delay(8000);
        IsLoading = false;
    }
}

MauiProgram.cs

using Microsoft.Extensions.Logging;

namespace MauiMRE;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

#if DEBUG
        builder.Logging.AddDebug();
#endif
        builder.Services.AddTransient<MainPage>();
        builder.Services.AddTransient<MainPageVM>();        
        return builder.Build();
    }
}
2uluyalo

2uluyalo1#

我做了更多的实验,甚至把辐射梯度切换到线性梯度。有趣的是,偏移属性似乎真的被打破了。如果你添加更多的颜色,它会决定颜色的顺序(通过偏移量排序),但也就是说,偏移量(0.0,0.1,0.2,0.3)将给予与(0.0,0.25,0.5,0.75)相同的渐变。此外,如果你把梯度沿着对角线(起点(0,0)终点(1,0))梯度不关心。
我查看了this example,他们使用了矩形而不是框架。我把相框换成了背景,效果很好。
因此,要点是,帧上的渐变表现得出乎意料(至少对我来说)。

zzoitvuj

zzoitvuj2#

是否要移动整个渐变?动画中心。
中间X代表从左到右
Radial Gradient doc所示,
Center="0.0,0.0"将中心放在左上角。
Center="1.0,1.0"将中心放在右下角。

  • ——————————-
    偏移(尽管其名称)的范围为0到1,因为渐变是从中心到半径绘制的。从-1到1设置动画没有意义。但是,从0到1应使“中心颜色”扩展,直到整个圆都是该颜色。如果它对颜色没有影响,那可能是一个bug。
    给定偏移1.0处的第二个GradientStop:
  • 偏移量为0.3的第一个GradientStop表示圆的内部30%为纯色,然后渐变开始。
  • 尝试偏移0.9,以获得显著差异。大部分圆圈变成纯色。(除非在0处添加第三个GradientStop,以从不同的中心颜色开始。)

相关问题