我想动画帧的梯度,所以它似乎是乒乓球从一端到另一端。可悲的是,没有什么移动,但其余的行为正确:
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();
}
}
2条答案
按热度按时间2uluyalo1#
我做了更多的实验,甚至把辐射梯度切换到线性梯度。有趣的是,偏移属性似乎真的被打破了。如果你添加更多的颜色,它会决定颜色的顺序(通过偏移量排序),但也就是说,偏移量(0.0,0.1,0.2,0.3)将给予与(0.0,0.25,0.5,0.75)相同的渐变。此外,如果你把梯度沿着对角线(起点(0,0)终点(1,0))梯度不关心。
我查看了this example,他们使用了矩形而不是框架。我把相框换成了背景,效果很好。
因此,要点是,帧上的渐变表现得出乎意料(至少对我来说)。
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: